javascript對XMLHttpRequest非同步請求的物件導向封裝

function CallBackObject() 
{ 
this.XmlHttp = this.GetHttpObject(); 
} 
CallBackObject.prototype.GetHttpObject = function() //动态为CallBackObject的原型添加了GetHttpObject共有方法 
{ 
//第一步：创建XMLHttpRequest对象 
//进行兼容性判断 
var xmlhttp; 
/*@cc_on 
@if (@_jscript_version >= 5) 
try { 
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
try { 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (E) { 
xmlhttp = false; 
} 
} 
@else 
xmlhttp = false; 
@end @*/ 
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
try { 
xmlhttp = new XMLHttpRequest(); 
} catch (e) { 
xmlhttp = false; 
} 
} 
return xmlhttp; 
} 
CallBackObject.prototype.DoCallBack = function(URL) 
{ 
if( this.XmlHttp ) 
{ 
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 ) 
{ 
var oThis = this; 
//第二步：注册回调方法，当服务器处理结束返回数据以后利用回调方法实现局部的页面刷新数据 
//这个回调方法实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用 
this.XmlHttp.onreadystatechange = function() { 
//根据XmlHttp.readyState返回值不同调用不同的方法。 
oThis.ReadyStateChange(); 
}; 
//第三步：设置和服务器交互的相应参数 
this.XmlHttp.open('POST', URL); 
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
//第四步：设置向服务器发送的数据，启动和服务器端交互 
this.XmlHttp.send(null); 
} 
} 
} 
CallBackObject.prototype.AbortCallBack = function() 
{ 
if( this.XmlHttp ) 
this.XmlHttp.abort(); 
} 
CallBackObject.prototype.ReadyStateChange = function() { 
//第五步：判断和服务器交互是否完成，还要判断服务器端是否正确返回数据 
//this.XmlHttp.readyState == 0初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 
if (this.XmlHttp.readyState == 1) { 
//open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 
this.OnLoading(); 
} 
else if (this.XmlHttp.readyState == 2) { 
//Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 
this.OnLoaded(); 
} 
else if (this.XmlHttp.readyState == 3) { 
//Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 
this.OnInteractive(); 
} 
else if (this.XmlHttp.readyState == 4) { 
//Loaded HTTP 响应已经完全接收。 
if (this.XmlHttp.status == 0) 
this.OnAbort(); 
else if (this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK") 
this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML); 
else 
this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText); 
} 
} 
CallBackObject.prototype.OnLoading = function() 
{ 
// Loading 
} 
CallBackObject.prototype.OnLoaded = function() 
{ 
// Loaded 
} 
CallBackObject.prototype.OnInteractive = function() 
{ 
// Interactive 
} 
CallBackObject.prototype.OnComplete = function(responseText, responseXml) 
{ 
// Complete 
} 
CallBackObject.prototype.OnAbort = function() 
{ 
// Abort 
} 
CallBackObject.prototype.OnError = function(status, statusText) 
{ 
// Error 
}

呼叫方法如下： 

<script type="text/javascript"> 
function createRequest() 
{ 
var name = escape(document.getElementById("name").value); 
var cbo = new CallBackObject(); 
cbo.OnComplete = Cbo_Complete; 
cbo.onError = Cbo_Error; 
cbo.OnLoaded = OnLoading; 
cbo.DoCallBack("AjaxTest.aspx?name=" + name); 
} 

function OnLoading() { 
alert("OnLoading " ); 
} 

function Cbo_Complete(responseText, responseXML) 
{ 
alert("成功 "+responseText); 
} 

function Cbo_Error(status, statusText, responseText) 
{ 
alert(responseText); 
} 
</script>

onreadystatechange事件 
　　無論readyState值何時改變，XMLHttpRequest物件都會激發一個readystatechange事件。其中，onreadystatechange屬性接收一個EventListener值-向該方法指示無論readyState值何時發生改變，該物件都會啟動。 
　　responseText屬性 
　　這個responseText屬性包含客戶端接收到的HTTP回應的文字內容。當readyState值為0、1或2時，responseText包含一個空字串。當readyState值為3(正在接收)時，回應中包含客戶端尚未完成的回應訊息。當readyState為4(已載入)時，該responseText包含完整的回應資訊。
　　responseXML屬性 
　　此responseXML屬性用於當接收到完整的HTTP響應時(readyState為4)描述XML響應；此時，Content-Type頭部指定MIME(媒體)類型為text/xml，application/xml或以+xml結尾。如果Content-Type頭部不包含這些媒體類型之一，那麼responseXML的值為null。無論何時，只要readyState值不為4，那麼該responseXML的值也為null。 
　　其實，這個responseXML屬性值是一個文檔介面類型的對象，用來描述被分析的文檔。如果文檔不能被分析(例如，如果文檔不是良構的或不支援文檔相應的字元編碼)，那麼responseXML的值將為null。 
　　status屬性 
　　這個status屬性描述了HTTP狀態碼，而且其類型為short。而且，只有當readyState值為3(正在接收)或4(已載入)時，這個status屬性才可用。當readyState的值小於3時試圖存取status的值將引發一個異常。 
　　statusText屬性 
　　這個statusText屬性描述了HTTP狀態代碼文字；並且僅當readyState值為3或4才可用。當readyState為其它值時試圖訪問statusText屬性將引發一個異常。

更多javascript對XMLHttpRequest異步請求的物件導向封裝相關文章請關注PHP中文網！