今天JS练手的时候,想封装一个发送AJAX请求的对象,当然,是想要兼容全浏览器的。代码如下:
- var Ajax = {
- xhr: null,callback: null,XMLHttp: function() {
- var xmlhttp;
- //标准浏览器
- if(window.XMLHttpRequest) {
- try {
- xmlhttp = new XMLHttpRequest();
- }
- catch(e) {
- alert('Unknown Ajax Error');
- //console.log('Unknown Ajax Error');
- }
- }
- //IE浏览器
- else {
- if(window.ActiveXObject) {
- try {
- xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
- }
- catch(e) {
- try {
- xmlhttp = new ActiveXObject('MSXML2.XMLHTTP');
- }
- catch(e) {
- alert('Unknown Ajax Error');
- //console.log('Unknown Ajax Error');
- }
- }
- }
- }
- return xmlhttp;
- },connect: function(paramsObj) {
- var PO = paramsObj;
- //判断传参合法性
- if(!(PO instanceof Object)) {
- alert('Ajax params illegal');
- //console.log('Ajax params illegal');
- return false;
- }
- else if(!(PO.url&&PO.method&&PO.callback)) {
- return false;
- }
- //初始化内部参数
- this.xhr = this.XMLHttp();
- this.callback = PO.callback;
- //遍历params对象并生成url参数
- var requestParams = '';
- if(PO.params) {
- for(key in Po.params) {
- requestParams += '&' + key + '=' + params[key];
- }
- requestParams = requestParams.substr(1);
- }
- //发起Ajax请求
- try {
- var xhr = this.xhr;
- xhr.onreadystatechange = this.response;
- //POST请求处理
- if(PO.method.toLowerCase()=='post') {
- xhr.open('POST',PO.url,true);
- xhr.send(requestParams);
- }
- //GET请求处理
- else if(PO.method.toLowerCase()=='get') {
- xhr.open('GET',PO.url+'?'+requestParams,true);
- xhr.send(null);
- }
- }
- catch(e) {
- this.callback(null,-1);
- }
- },response: function() {
- // 此段代码在全浏览器下测试通过
- // if(Ajax.xhr.readyState==4) {
- // if(Ajax.xhr.status=='200') {
- // Ajax.callback(Ajax.xhr.responseText);
- // }
- // else {
- // Ajax.callback(null,Ajax.xhr.status);
- // }
- // }
- //
- // 下面的代码在IE下失效(无报错,请求有相应,却没有返回结果),其它浏览器无此问题
- if(this.readyState==4) {
- if(this.status=='200') {
- Ajax.callback(this.responseText);
- }
- else {
- Ajax.callback(null,this.status);
- }
- }
- }
- };
- //Ajax实例
- Ajax.connect({
- url: 'test.html',method: 'GET',callback: function(data,err) {
- if(data!=null) {
- alert(data);
- // console.log(data);
- }
- else {
- alert(err);
- // console.log(err);
- }
- }
- });
问题描述: 大家看一下我代码中有一块注释掉的代码,那块代码是在全浏览器下测试通过的。而没有注释掉的代码是有问题的代码,具体表现:
在Chrome,Firefox,Opera,Safari下测试通过,在IE6、7(IE8+没有测试)下的表现是:没有报错,也没有返回结果。
对比上下两块代码的不同,我想有两个可能,一个是this指向的问题,一个是IE下onreadystatechange函数执行的上下文环境有区别于其它浏览器。但是现在又无法确定问题,IE6、7下的JS调试又挺困难的(试了firebug-lite,但是没有想象中的好用,而且这个Ajax对象在firebug-lite下调用却成功了,有点糊涂)
解决过程:
其实测试方法很简单。主要是头脑一发热没想到,吃了个饭回来就恍然大悟。
其实JS在处理this指向不明的问题的时候,可以尝试使用this instanceof Object这类判断去了解它指向的是一个什么类型的变量。而对于判断是否为全局调用,则可以使用this===window。在这里我用的就是这个方法。
在代码出现问题的那一块,我们可以试着插入一段:
- alert(this instanceof Object);
结果发现,在IE6下,返回为false!一目了然!在IE下才可能出现如此诡异的返回值!证明什么?也就是说函数的执行上下文并非是对象!如此一来,在IE下就只能想到window对象了,要知道IE向来都是奇葩。你们标准浏览器说window对象是对象,我就偏不认。你还在怀疑我的看法?那何不试试?