Object-oriented encapsulation of XMLHttpRequest asynchronous requests by javascript

Copy codeThe Code is as follows:
Function CallBackObject ()
{
This. XmlHttp = this. GetHttpObject ();
}
CallBackObject. prototype. GetHttpObject = function () // Add the GetHttpObject common method to the CallBackObject prototype dynamically.
{
// Step 1: Create an XMLHttpRequest object
// Determine compatibility
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;
// Step 2: register the callback method. After the server finishes processing and returns data, use the callback method to refresh data on a local page.
// This callback method is called every time the value of the readyState attribute of the XMLHttpRequest object changes.
This. XmlHttp. onreadystatechange = function (){
// Call different methods based on the returned values of XmlHttp. readyState.
OThis. ReadyStateChange ();
};
// Step 3: set parameters for interaction with the server
This. XmlHttp. open ('post', URL );
This. XmlHttp. setRequestHeader ('content-type', 'application/x-www-form-urlencoded ');
// Step 4: Set the data sent to the server to start interaction with the server.
This. XmlHttp. send (null );
}
}
}
CallBackObject. prototype. AbortCallBack = function ()
{
If (this. XmlHttp)
This. XmlHttp. abort ();
}
CallBackObject. prototype. ReadyStateChange = function (){
// Step 5: Determine whether the interaction with the server is complete and whether the server returns data correctly
// This. XmlHttp. readyState = 0 initialization status. The XMLHttpRequest object has been created or reset by the abort () method.
If (this. XmlHttp. readyState = 1 ){
// The open () method has been called, but the send () method has not been called. The request has not been sent.
This. OnLoading ();
}
Else if (this. XmlHttp. readyState = 2 ){
// The Send () method has been called and the HTTP request has been sent to the Web server. No response is received.
This. OnLoaded ();
}
Else if (this. XmlHttp. readyState = 3 ){
// All the Response Headers of the processing ing have been received. The response body starts receiving but is not completed.
This. OnInteractive ();
}
Else if (this. XmlHttp. readyState = 4 ){
// The Loaded HTTP response has been fully received.
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
}


The call method is as follows:
Copy codeThe Code is as follows:
<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 ("successful" + responseText );
}

Function Cbo_Error (status, statusText, responseText)
{
Alert (responseText );
}
</Script>

Onreadystatechange event
No matter when the value of readyState changes, the XMLHttpRequest object will trigger a readystatechange event. The onreadystatechange property receives an EventListener value-instructs the method that the object will be activated no matter when the value of readyState changes.
ResponseText attributes
This responseText property contains the text content of the HTTP response received by the client. When the value of readyState is 0, 1, or 2, responseText contains an empty string. When the value of readyState is 3 (receiving), the response contains the uncompleted response information from the client. When readyState is 4 (loaded), The responseText contains the complete response information.
ResponseXML attributes
This responseXML attribute is used to describe the XML response when a complete HTTP response is received (readyState is 4). In this case, the Content-Type Header specifies that the MIME (media) Type is text/xml, application/xml may end with + xml. If the Content-Type Header does not contain any of these media types, the responseXML value is null. Whenever the value of readyState is not 4, the value of responseXML is also null.
In fact, this responseXML property value is a document interface type object used to describe the document to be analyzed. If the document cannot be analyzed (for example, if the document is not a good structure or does not support the corresponding character encoding of the document), the value of responseXML is null.
Status attribute
This status attribute describes the HTTP status code and its type is short. This status attribute is available only when the readyState value is 3 (receiving) or 4 (loaded. When the value of readyState is less than 3, an exception is thrown when you try to access the value of status.
StatusText attributes
This statusText attribute describes the HTTP status code text, and is available only when the readyState value is 3 or 4. When readyState is another value, an exception occurs when you attempt to access the statusText attribute.