在IE下，AJAX請求得到響應後，回調函數onreadystatechange是在全局環境下被調用的，而在標准浏覽器下，其執行上下文是XMLHttpRequest對象
今天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對象是對象，我就偏不認。你還在懷疑我的看法？那何不試試？ alert(this===window); 結果是true！怎麼樣？沒話說了吧？所以這樣，問題就明朗了： 在IE下，AJAX請求得到響應後，回調函數onreadystatechange是在全局環境下被調用的。而在標准浏覽器下，其執行上下文是XMLHttpRequest對象。故造成了我這次的“事故”。
