Introduction to jQuery asynchronous object (XMLHttpRequest) _ javascript skills

The article divides jQuery asynchronous objects into five steps, which is very helpful for us to learn and remember. It is a very good article on learning jQuery asynchronous objects. We recommend it to you here. Let's take a look at the asynchronous object 5 callback.

This is a post request,

The Code is as follows:

// 1.00 create an asynchronous object
Var xhr = new XMLHttpRequest ();
// 2.0
Xhr. open ("post", url, params, true );
// 3.0 pass the parameter using the Formdata attribute
Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");
// 4.0 set the callback function
Xhr. onreadystatechange = function (){
If (xhr. readyState = 4 & xhr. status = 200 ){
Alert (xhr. responseText );
}
}
// 5.0 PASS Parameters
Xhr. send (params );

Encapsulate an asynchronous object with get requests

In the get request

Xhr. setRequestHeader ("If-Modified-Since", "0"); To clear the cache

And

The Code is as follows:

Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");

It is for Transmission Mode
In
You can get three methods for the type in, including application/x-www-form-urlencoded

The Code is as follows:

Var ajaxHelp = {
CreatXHR: function (){
// Create an asynchronous object
Var xhr = new XMLHttpRequest ();
Return xhr;
},
// Ajax get request
AjaxGet: function (url, callBack ){
This. AJaxCommon ("get", url, null, callBack );
},
// Ajax post request
AjaxPost: function (url, params, callBack ){
This. AJaxCommon ("post", url, params, callBack );
},
AJaxCommon: function (method, url, params, callBack ){
// 1.0
Var xhr = this. CreatXHR ();
// 2.0
Xhr. open (method, url, true );
// 3.0
If (method = "get "){
Xhr. setRequestHeader ("If-Modified-Since", "0 ");
} Else {
Xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");
}
// 4.0
Xhr. onreadystatechange = function (){
If (xhr. readyState = 4 & xhr. status = 200 ){
Var datas = JSON. parse (xhr. responseText );
// Execute the callback function
CallBack (datas );
}
}
// 5.0
Xhr. send (params );
}
};

Ps: In JQuery, there are asynchronous request methods such as $. ajax and $. get/$. Post. The previous package is no longer needed. Amount. Good luck. In fact, the underlying layer is also written like this. JQuery is designed to solve compatibility issues of various browsers.

The above is my understanding of jQuery asynchronous objects (XMLHttpRequest). If you have any omissions, please contact me and add me.