Shulou(Shulou.com)06/03 Report--

This article is about how to encapsulate javascript's asynchronous request to XMLHttpRequest by object-oriented encapsulation. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

The code is as follows:

Function CallBackObject ()

{

This.XmlHttp = this.GetHttpObject ()

}

CallBackObject.prototype.GetHttpObject = function () / / dynamically adds GetHttpObject common methods to the prototype of CallBackObject

{

/ / step 1: create a XMLHttpRequest object

/ / make compatibility judgment

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, and use the callback method to refresh the local page data when the server has finished processing the returned data.

/ / this callback method is actually called every time the value of the readyState property of the XMLHttpRequest object changes.

This.XmlHttp.onreadystatechange = function () {

/ / call different methods according to the value returned by XmlHttp.readyState.

OThis.ReadyStateChange ()

}

/ / step 3: set the appropriate parameters for interaction with the server

This.XmlHttp.open ('POST', URL)

This.XmlHttp.setRequestHeader ('Content-Type',' application/x-www-form-urlencoded')

/ / step 4: set up the data sent to the server and 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 completed, and also determine whether the server returns data correctly

/ / this.XmlHttp.readyState = = 0 initialization state. The XMLHttpRequest object has been created or reset by the abort () method.

If (this.XmlHttp.readyState = = 1) {

The / / open () method was called, but the send () method was not called. The request has not been sent yet.

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 was received.

This.OnLoaded ()

}

Else if (this.XmlHttp.readyState = = 3) {

/ / Receiving all response headers have been received. The responder started to receive but did not complete.

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 calling method is as follows:

The copy code is as follows:

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 ("success" + responseText)

}

Function Cbo_Error (status, statusText, responseText)

{

Alert (responseText)

}

Onreadystatechange event

Whenever the readyState value changes, the XMLHttpRequest object fires a readystatechange event. Where the onreadystatechange property receives an EventListener value-indicating to the method that the object will be activated whenever the readyState value changes.

ResponseText attribute

This responseText property contains the text content of the HTTP response received by the client. When the readyState value is 0, 1, or 2, responseText contains an empty string. When the readyState value is 3 (receiving), the response contains the response information that the client has not yet completed. When the readyState is 4 (loaded), the responseText contains the complete response information.

ResponseXML attribute

This responseXML property is used to describe the HTTP response when a complete XML response is received (readyState is 4); in this case, the Content-Type header specifies that the MIME (media) type is text/xml,application/xml or ends with + xml. If the Content-Type header does not contain one of these media types, the value of responseXML is null. Whenever the readyState value is not 4, the responseXML value is also null.

In fact, the responseXML attribute value is a document interface type object that describes the document being parsed. If the document cannot be parsed (for example, if the document is not well-formed or does not support the corresponding character encoding of the document), the value of responseXML will be null.

Status attribute

This status attribute describes the HTTP status code, and its type is short. Also, this status property is available only if the readyState value is 3 (receiving) or 4 (loaded). When the value of readyState is less than 3, an attempt to access the value of status will throw an exception.

StatusText attribute

This statusText attribute describes the text of the HTTP status code; it is only available if the readyState value is 3 or 4. Attempting to access the statusText property when readyState is another value throws an exception.

The above is how to implement the object-oriented encapsulation of javascript's XMLHttpRequest asynchronous request. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.