ajax onreadystatechange狀態轉換函數研究

文章來源：Web開發網

w3dev.cn 

　　有些時候我們需要將ajax請求的功能打包成一個類庫方便調用，此時需要用到ajax的狀態轉換函數，對於執行onreadystatechange函數時，this對象到底是那個對象，不同瀏覽器的表現方式差異頗大。

　　下面未進行打包時狀態處理函數的測試，示例代碼如下
<div id="dvAjax"></div> <mce:script type="text/javascript"><!-- var xhr=window.XMLHttpRequest?new XMLHttpRequest():(window.ActiveXObject?new ActiveXObject('microsoft.xmlhttp'):false); if(!xhr)throw new Error('瀏覽器不支持Ajax'); xhr.open('GET','data.txt?_dc='+new Date().getTime(),true); function statechr(){ if(xhr.readyState==4){ alert( (this===xhr) +'/n'+ (this===window) +'/n'+(this===statechr) ) if(xhr.status==200||xhr.status==0)document.getElementById('dvAjax').innerHTML=xhr.responseText; else alert('發生錯誤！/nstatus='+xhr.status); } } xhr.onreadystatechange=statechr; xhr.send(null); // --></mce:script>

　　運行上面的代碼後，下面是不同瀏覽器的輸出，循序爲IE6,IE7,IE8,FF2,FF3.6,chrome4,opera9,safari3。
  

 

 

　　通過上圖可以看出，除了IE6下this==window對象，FF2下this爲狀態轉換函數，其他瀏覽器this對象都爲xhr對象本身。所以在進行打包時，得注意下狀態轉換函數this的指向問題。

　　當了解了onreadystatechange狀態轉換函數中this對象爲什麼時，我們就可以進行一些簡單的打包操作了。

　　打包後的簡單示例代碼如下。
<div id="dvAjax"></div> <mce:script type="text/javascript"><!-- function Ajax(url,method,params,callback){ this.url=url; this.method=method; this.callback=callback; this.async=typeof this.callback=='function'//根據回調函數判斷是同步或者異步，未傳遞callback時爲同步，本文討論的都是異步的，同步不在考慮範圍內 this.params=params;//params爲處理好後的鍵值對 } Ajax.prototype.getObject=function(){ var xhr=window.XMLHttpRequest?new XMLHttpRequest():(window.ActiveXObject?new ActiveXObject('microsoft.xmlhttp'):false); if(!xhr)throw new Error('瀏覽器不支持Ajax'); return xhr; } Ajax.prototype.statechr=function(){ //注意callServer中狀態轉換函數的添加方法，這種添加方法在IE6，FF2中不太符合閉包和繼承的精神，需要使用實例名稱來訪問，callServer中狀態轉換函數不推薦這樣來綁定 //爲了兼容IE6和FF2，不能使用this對象來訪問xhr對象，而且還需要調用回調函數，this指向並非ajax的實例對象，this對象指向參考第一個示例代碼的說明 if(xhr.ajax.readyState==4){ if(xhr.ajax.status==200)xhr.callback(xhr.ajax.responseText); else alert('發生錯誤/nstatus'+xhr.ajax.status); } } Ajax.prototype.callServer=function(){ this.ajax=this.getObject(); if(this.method.toLowerCase()=='get'){ this.url+='?'+this.params+(this.params==''?'':'&')+'_dc='+new Date().getTime(); this.params=null; } this.ajax.open(this.method,this.url,this.async); if(this.async){//爲異步時添加狀態轉換函數，添加此回調函數注意了，this對象指向問題和statechr狀態轉換函數的關係，這是第一種添加狀態轉換函數的方法，另外一種參考下面的【強烈推薦此方法】 this.ajax.onreadystatechange=this.statechr;//這樣來添加狀態轉換函數等同於上面的過程化的方法，this對象指向請考上面的方法 } this.ajax.send(this.params); if(!this.async)return this.ajax.responseText;//如果未傳遞迴調函數，則可以直接返回responseText } var xhr=new Ajax('data.txt','get','',function(responseText){document.getElementById('dvAjax').innerHTML=responseText;}); xhr.callServer(); // --></mce:script>

推薦的事件綁定方法

Ajax.prototype.statechr=function(){ //在所有瀏覽器下this對象爲Ajax類的實例，不是window，ajax對象本身和狀態轉換函數了 if(this.ajax.readyState==4){ if(this.ajax.status==200)this.callback(this.ajax.responseText); else alert('發生錯誤/nstatus'+this.ajax.status); } } Ajax.prototype.callServer=function(){ this.ajax=this.getObject(); if(this.method.toLowerCase()=='get'){ this.url+='?'+this.params+(this.params==''?'':'&')+'_dc='+new Date().getTime(); this.params=null; } this.ajax.open(this.method,this.url,this.async); //做個閉包，將this對象傳入，然後使用me調用statechr方法，這樣this就爲Ajax的實例對象了 if(this.async)this.ajax.onreadystatechange=(function(me){return function(){me.statechr();}})(this); this.ajax.send(this.params); if(!this.async)return this.ajax.responseText;//如果未傳遞迴調函數，則可以直接返回responseText }

 

ajax相關問題

ajax問題總結

ajax responseText -1072896748錯誤

ajax指定爲post但是未設置content-type或未指定鍵時時如何獲取提交的內容

firefox下XMLHttpRequest重用時nsIXMLHttpRequest.send發生錯誤的解決方案