Encapsulation orientée objet JavaScript des requêtes asynchrones 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 
}

La méthode d'appel est la suivante :

<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>

événement onreadystatechange
Chaque fois que la valeur readyState change, l'objet XMLHttpRequest déclenchera un événement readystatechange. Parmi eux, l'attribut onreadystatechange reçoit une valeur EventListener - indiquant à la méthode que l'objet sera activé chaque fois que la valeur readyState change.
Attribut ResponseText
Cet attribut ResponseText contient le contenu textuel de la réponse HTTP reçue par le client. Lorsque la valeur readyState est 0, 1 ou 2, ResponseText contient une chaîne vide. Lorsque la valeur readyState est 3 (réception), la réponse contient les informations de réponse inachevée du client. Lorsque readyState vaut 4 (chargé), le réponseText contient des informations de réponse complètes.
Attribut ResponseXML
Cet attribut ResponseXML est utilisé pour décrire la réponse XML lorsqu'une réponse HTTP complète est reçue (readyState est 4 à ce moment, l'en-tête Content-Type spécifie le type MIME (média) sous la forme text/) ; xml, application /xml ou se termine par xml. Si l’en-tête Content-Type ne contient pas l’un de ces types de média, la valeur de réponseXML est nulle. Chaque fois que la valeur readyState n’est pas 4, la valeur de réponseXML est également nulle.
En fait, la valeur de l'attribut ResponseXML est un objet de type interface document, utilisé pour décrire le document en cours d'analyse. Si le document ne peut pas être analysé (par exemple, si le document n'est pas bien formé ou si le codage de caractères correspondant du document n'est pas pris en charge), alors la valeur de réponseXML sera nulle.
Attribut de statut
Cet attribut de statut décrit le code de statut HTTP et son type est court. De plus, cet attribut d'état n'est disponible que lorsque la valeur readyState est 3 (réception) ou 4 (chargé). Tenter d'accéder à la valeur de status lorsque readyState est inférieur à 3 lèvera une exception.
Attribut StatusText
Cet attribut statusText décrit le texte du code d'état HTTP et n'est disponible que si la valeur readyState est 3 ou 4. Tenter d'accéder à la propriété statusText lorsque readyState est une autre valeur lèvera une exception.

Pour plus d'articles liés à l'encapsulation orientée objet par JavaScript des requêtes asynchrones XMLHttpRequest, veuillez faire attention au site Web PHP chinois !