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;}}@elsexmlhttp = 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);elsethis.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屬性將引發一個異常。*/

轉載于:https://www.cnblogs.com/langlang/archive/2009/12/18/1627153.html

總結

以上是生活随笔為你收集整理的对XMLHttpRequest异步请求的面向对象封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。