今天JS練手的時(shí)候，想封裝一個(gè)發(fā)送AJAX請(qǐng)求的對(duì)象，當(dāng)然，是想要兼容全瀏覽器的。代碼如下：
復(fù)制代碼 代碼如下:
var Ajax = {
xhr: null,
callback: null,
XMLHttp: function() {
var xmlhttp;
//標(biāo)準(zhǔn)瀏覽器
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.urlPO.methodPO.callback)) {
return false;
}
//初始化內(nèi)部參數(shù)
this.xhr = this.XMLHttp();
this.callback = PO.callback;
//遍歷params對(duì)象并生成url參數(shù)
var requestParams = '';
if(PO.params) {
for(key in Po.params) {
requestParams += '' + key + '=' + params[key];
}
requestParams = requestParams.substr(1);
}
//發(fā)起Ajax請(qǐng)求
try {
var xhr = this.xhr;
xhr.onreadystatechange = this.response;
//POST請(qǐng)求處理
if(PO.method.toLowerCase()=='post') {
xhr.open('POST',PO.url,true);
xhr.send(requestParams);
}
//GET請(qǐng)求處理
else if(PO.method.toLowerCase()=='get') {
xhr.open('GET',PO.url+'?'+requestParams,true);
xhr.send(null);
}
}
catch(e) {
this.callback(null,-1);
}
},
response: function() {
// 此段代碼在全瀏覽器下測(cè)試通過(guò)
// if(Ajax.xhr.readyState==4) {
// if(Ajax.xhr.status=='200') {
// Ajax.callback(Ajax.xhr.responseText);
// }
// else {
// Ajax.callback(null,Ajax.xhr.status);
// }
// }
//
// 下面的代碼在IE下失效（無(wú)報(bào)錯(cuò)，請(qǐng)求有相應(yīng)，卻沒(méi)有返回結(jié)果），其它瀏覽器無(wú)此問(wèn)題
if(this.readyState==4) {
if(this.status=='200') {
Ajax.callback(this.responseText);
}
else {
Ajax.callback(null,this.status);
}
}
}
};
//Ajax實(shí)例
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);
}
}
});
問(wèn)題描述： 大家看一下我代碼中有一塊注釋掉的代碼，那塊代碼是在全瀏覽器下測(cè)試通過(guò)的。而沒(méi)有注釋掉的代碼是有問(wèn)題的代碼，具體表現(xiàn)：
在Chrome，F(xiàn)irefox，Opera，Safari下測(cè)試通過(guò)，在IE6、7（IE8+沒(méi)有測(cè)試）下的表現(xiàn)是：沒(méi)有報(bào)錯(cuò)，也沒(méi)有返回結(jié)果。
對(duì)比上下兩塊代碼的不同，我想有兩個(gè)可能，一個(gè)是this指向的問(wèn)題，一個(gè)是IE下onreadystatechange函數(shù)執(zhí)行的上下文環(huán)境有區(qū)別于其它瀏覽器。但是現(xiàn)在又無(wú)法確定問(wèn)題，IE6、7下的JS調(diào)試又挺困難的（試了firebug-lite，但是沒(méi)有想象中的好用，而且這個(gè)Ajax對(duì)象在firebug-lite下調(diào)用卻成功了，有點(diǎn)糊涂）
解決過(guò)程：
其實(shí)測(cè)試方法很簡(jiǎn)單。主要是頭腦一發(fā)熱沒(méi)想到，吃了個(gè)飯回來(lái)就恍然大悟。
其實(shí)JS在處理this指向不明的問(wèn)題的時(shí)候，可以嘗試使用this instanceof Object這類(lèi)判斷去了解它指向的是一個(gè)什么類(lèi)型的變量。而對(duì)于判斷是否為全局調(diào)用，則可以使用this===window。在這里我用的就是這個(gè)方法。
在代碼出現(xiàn)問(wèn)題的那一塊，我們可以試著插入一段：
alert(this instanceof Object);
結(jié)果發(fā)現(xiàn)，在IE6下，返回為false！一目了然！在IE下才可能出現(xiàn)如此詭異的返回值！證明什么？也就是說(shuō)函數(shù)的執(zhí)行上下文并非是對(duì)象！如此一來(lái)，在IE下就只能想到window對(duì)象了，要知道IE向來(lái)都是奇葩。你們標(biāo)準(zhǔn)瀏覽器說(shuō)window對(duì)象是對(duì)象，我就偏不認(rèn)。你還在懷疑我的看法？那何不試試？
alert(this===window);
結(jié)果是true！怎么樣？沒(méi)話(huà)說(shuō)了吧？所以這樣，問(wèn)題就明朗了：
在IE下，AJAX請(qǐng)求得到響應(yīng)后，回調(diào)函數(shù)onreadystatechange是在全局環(huán)境下被調(diào)用的。而在標(biāo)準(zhǔn)瀏覽器下，其執(zhí)行上下文是XMLHttpRequest對(duì)象。故造成了我這次的“事故”。
