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 응답이 수신될 때(readyState가 4임) XML 응답을 설명하는 데 사용되며, Content-Type 헤더는 MIME(미디어) 유형을 text/로 지정합니다. xml, 애플리케이션 /xml 또는 +xml로 끝납니다. Content-Type 헤더에 이러한 미디어 유형 중 하나가 포함되어 있지 않으면 responseXML 값은 null입니다. ReadyState 값이 4가 아닐 때마다 responseXML의 값도 null입니다.
실제로 responseXML 속성 값은 분석 중인 문서를 설명하는 데 사용되는 문서 인터페이스 유형의 개체입니다. 문서를 구문 분석할 수 없는 경우(예: 문서의 형식이 올바르지 않거나 문서의 해당 문자 인코딩을 지원하지 않는 경우) responseXML 값은 null이 됩니다.
상태 속성
이 상태 속성은 HTTP 상태 코드를 설명하며 유형이 짧습니다. 또한 이 상태 속성은 ReadyState 값이 3(수신) 또는 4(로드됨)인 경우에만 사용할 수 있습니다. ReadyState가 3보다 작은 경우 상태 값에 액세스하려고 하면 예외가 발생합니다.
StatusText 속성
이 statusText 속성은 HTTP 상태 코드 텍스트를 설명하며 ReadyState 값이 3 또는 4인 경우에만 사용할 수 있습니다. ReadyState가 다른 값일 때 statusText 속성에 액세스하려고 하면 예외가 발생합니다.

JavaScript의 XMLHttpRequest 비동기 요청에 대한 객체 지향 캡슐화와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!