JavaScript is related to the object-oriented encapsulation _ajax of XMLHttpRequest asynchronous requests

Source: Internet
Author: User
Copy Code code as follows:

function Callbackobject ()
{
This. XmlHttp = this. Gethttpobject ();
}
CallBackObject.prototype.GetHttpObject = function ()///Dynamic Callbackobject for prototype added Gethttpobject common method
{
First step: Create a XMLHttpRequest Object
Make compatibility judgments
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 Two: Register the callback method, and use the callback method to implement local page refresh data after the server processing end returns data
This callback method is actually invoked every time the value of the ReadyState property of the XMLHttpRequest object is changed
This. Xmlhttp.onreadystatechange = function () {
Different methods are invoked depending on the xmlhttp.readystate return value.
Othis.readystatechange ();
};
Step three: Set the corresponding parameters for the server interaction
This. Xmlhttp.open (' POST ', URL);
This. Xmlhttp.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Step Fourth: Set up data sent to the server, start and server-side interaction
This. Xmlhttp.send (NULL);
}
}
}
CallBackObject.prototype.AbortCallBack = function ()
{
if (this. XmlHttp)
This. Xmlhttp.abort ();
}
CallBackObject.prototype.ReadyStateChange = function () {
Fifth step: Determine whether the server interaction is complete, but also to determine whether the server side of the correct return of data
This. Xmlhttp.readystate = = 0 initialization state. The XMLHttpRequest object has been created or has been reset by the Abort () method.
if (this. Xmlhttp.readystate = = 1) {
The open () method was invoked, but the Send () method was not invoked. The request has not been sent yet.
This. Onloading ();
}
else if (this. Xmlhttp.readystate = = 2) {
The Send () method has been invoked and the HTTP request has been sent to the WEB server. The response was not received.
This. OnLoaded ();
}
else if (this. Xmlhttp.readystate = = 3) {
Receiving all response headers have been received. The response body began 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 = && 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 method is invoked as follows:
Copy Code code 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 Events
The XMLHttpRequest object fires a ReadyStateChange event regardless of when the readystate value changes. Where the onReadyStateChange property receives a EventListener value-indicates to the method that the object will be activated regardless of when the readystate value has changed.
ResponseText Property
This ResponseText property contains the textual content of the HTTP response received by the client. When the readystate value is 0, 1, or 2 o'clock, ResponseText contains an empty string. When the readystate value is 3 (receiving), the response contains response information that the client has not yet completed. When ReadyState is 4 (loaded), the responsetext contains the complete response information.
Responsexml Property
This Responsexml property is used to describe an XML response when a full HTTP response is received (readystate 4), at which point the Content-type header specifies a MIME (media) type of text/xml,application/xml or A + The end of XML. If the Content-type header does not contain one of these media types, then the Responsexml value is null. Whenever the readystate value is not 4, the value of the responsexml is also null.
In fact, this Responsexml property value is an object of a document interface type that describes the parsed document. 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), then the value of Responsexml will be null.
Status Property
This status property describes the HTTP status code, and its type is short. Also, this status property is available only if the ReadyState value is 3 (in the receiving) or 4 (loaded). An exception is thrown when a value of readystate is less than 3 o'clock attempting to access the status.
StatusText Property
This statustext property describes the HTTP status code text and is only available if the ReadyState value is 3 or 4. An exception is thrown when an attempt is made to access the StatusText property when ReadyState is another value.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.