XMLHttpRequest 非同期リクエストの JavaScript オブジェクト指向カプセル化

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 応答を受信したときの XML 応答を記述するために使用されます (readyState が 4)。このとき、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 (ロード済み) の場合にのみ使用できます。 readyState が 3 未満のときにステータス値にアクセスしようとすると、例外がスローされます。
statusText 属性
この statusText 属性は HTTP ステータス コード テキストを記述し、readyState 値が 3 または 4 の場合にのみ使用できます。 readyState が他の値の場合に statusText プロパティにアクセスしようとすると、例外がスローされます。

XMLHttpRequest 非同期リクエストの JavaScript のオブジェクト指向カプセル化に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。