JQuery Secrets Series: Ajax native JS Implementation of the detailed (recommended) _jquery

When it comes to Ajax, we need to know that two objects, XMLHttpRequest and ActiveXObject, provide full access to the HTTP protocol, including the ability to make POST and head requests and normal get requests. The response of the WEB server can be returned synchronously or asynchronously, and content can be returned as text or as a DOM document. XMLHttpRequest is basically standardized, compatible with most browsers ActiveXObject this is Microsoft's thing, so it is compatible with the IE version, we use only its XMLHTTP function.

For clarity and clarity of functionality, we've divided this Ajax code into 5 parts:

• Creation of objects

onreadystatechange Handle Handle

• Parameter Stitching

Get function implementation

Post function implementation

1. Creation of objects:

First, create the XMLHttp variable that is used as the XMLHttpRequest object. Set its value to null.

Create objects according to Web standards (Mozilla, Opera, and Safari): Xmlhttp=new XMLHttpRequest ()

Create objects in Microsoft's way, available in Internet Explorer 6 and higher: xmlhttp=new activexobject ("Msxml2.xmlhttp")

If you catch an error, try an older method (Internet Explorer 5.5): xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")

var xhrfactory = function () {
    this.init.apply (this, arguments);
   }
   Xhrfactory.prototype = {
    init:function () {
     this.xhr = This.create ();
    },
    create:function () {
     var x hr = NULL;
     try {
      if (window). XMLHttpRequest) {
       xhr = new XMLHttpRequest ();
      }
      else if (window. ActiveXObject) {
       xhr = new ActiveXObject ("Msxml2.xmlhttp");
      }
     catch (Err) {
      xhr = new ActiveXObject ("Microsoft.XMLHTTP");
     }
     Return XHR
    }
}

2.onreadystatechange handle:

Readystate:function (timeout,callback) {
     this.xhr.onreadystatechange = function () {
      if (this.readystate = = 4 &A mp;& This.status = =) {
       Callback (eval ("+ This.responsetext +"));
      }
      else {
       settimeout (function () {
        this.xhr.abort ();
       },!timeout? 15000:timeout);
      }
      
     }
    }

Here's a look at the ReadyState and status properties.

ReadyState:

1. Create a Mlhttp object
2. Open the connection to the server
3. Send Instructions
4. Wait to process the request result.

Status

200. Successful Request
400. Request Error ...
There are a lot of values, here will not be said.

Timeout parameter is the request expiration time
Callback parameter, the callback handles the returned data and converts it into an object.

3. Parameter stitching

Para:function (data) {
     var datastr = "";
     if (Data && Object.prototype.toString.call (data) = = "[Object]") {for
      (var i in data) {for
       (var i) = 0; i < length; i++) {
        Datastr + = i + "=" + Data[i] + "&"
       ;
      }
     }} return datastr;
    }

This is where the incoming object parameter is spliced into a character channeling, and the parameters are sent for the AJAX request.

4.Get Feature Implementation:

Get:function (URL, data, callback, async, timeout) {
     this.readystate (timeout, callback);
     var newurl = URL;
     var datastr = This.para (data);
     Newurl = URL + "?" + Datastr;
     This.xhr.open ("Get", Newurl,!async? true:async);
     This.xhr.send (null);
    }

Get requests, the parameters are sent directly to the URL, rather than sent inside the send, and the post method parameter is sent inside send.

5.Post function implementation

Post:function (URL, data, callback, async, timeout) {
     this.readystate (timeout, callback);
     var newurl = URL;
     var datastr = This.para (data);
     This.xhr.open ("Post", Newurl,!async? true:async);
     This.xhr.setRequestHeader ("Content-type", "x-www-form-urlencoded");
     This.xhr.send (!datastr null:datastr);
    }

Post this more than a piece of code: This.xhr.setRequestHeader ("Content-type", "x-www-form-urlencoded");

This code is actually a description of the entire send content as a whole encoding, get is a single parameter encoding stitching, which is the difference between post and get.

The method is invoked as follows:

var xhr = new Xhrfactory ();
   Xhr.post ("Test.ashx", NULL, function (data) {
    alert (data);
   });

The above jquery revealing series: Ajax native JS Implementation of the detailed (recommended) is a small set to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.