JavaScript Ajax Asynchronous

Synchronous calls are simple, but using asynchronous calls is the only way we're really used to. When using an asynchronous call, you need to trigger the ReadyStateChange event and then detect the ReadyState property. This property has five values:

value	status	description
0	uninitialized	has not called the Open () method
1	start
2		the Send () method has been called but has not accepted the response
accept	received partial response data
4	complete

Addevent (document, ' click ', function () {
var xhr = new Createxhr ();
Xhr.onreadystatechange = function () {
if (xhr.readystate = = 4) {
if (Xhr.status = = 200) {
alert (Xhr.responsetext);
} else {
Alert (' Data return failed! Status code: ' + xhr.status + ' status information: '
+ Xhr.statustext);
}
}
};
Xhr.open (' Get ', ' demo.php?rand= ' + math.random (), true);
Xhr.send (NULL);
});

PS: The Abort () method can be used to cancel an asynchronous request, and an error will be placed before the Send () method. You'll get a null value before you put it in the responsetext.

A Get and Post
In the process of providing a server request, there are two ways: get and post. In the process of using AJAX, get is used more frequently than post.
Before we get to the two types of requests, we'll take a look at the HTTP header information, which contains the response headers returned by the server and the request headers sent out by the client. We can get the response header information or set the request header information. We can view this information in the Firefox browser's firebug.
Use getResponseHeader () to get a single response header information
Alert (Xhr.getresponseheader (' Content-type '));

Use getAllResponseHeaders () to get the entire response header information
Alert (Xhr.getallresponseheaders ());

Use setRequestHeader () to set a single request header information
Xhr.setrequestheader (' MyHeader ', ' Lee '); After the open method, before the Send method

PS: We can only get the server back to return response header information, unable to get the request header information submitted to the server, the natural custom request header, is not available on the JavaScript side.

GET request
Get requests are the most common type of request and are most commonly used to query certain information to the server. If necessary, the query string parameter can be appended to the end of the URL for submission to the server.
Xhr.open (' Get ', ' demo.php?rand= ' + math.random () + ' &name=koo ', true);

The server receives the return response data by passing the key-value pair data on the URL after the question mark. The problem of special character Fu can be encoded with encodeuricomponent (), the return and reference of Chinese characters can be saved and set to Utf-8 format.
A generic URL-submission function
function Addurlparam (URL, name, value) {
url = = (Url.indexof ('? ') = =-1? '? ': ' & '); Determine whether the URL has an existing parameter
URL + encodeuricomponent (name) + ' = ' + encodeuricomponent (value);
alert (URL);
return URL;
}

PS: When there is no encodeURIComponent () method, in some special characters such as "&", there will be errors resulting in the inability to obtain.

POST request
Post requests can contain a lot of data, and many of the post transports we use when we use the form submission.
Xhr.open (' Post ', ' demo.php ', true);

The data that sends the POST request does not follow the URL's tail, but instead submits the data to the server through the Send () method.
Xhr.send (' name=lee&age=100 ');

In general, sending a POST request to a server requires special processing due to the resolution mechanism. Because post requests are different from Web form submissions, you need to use XHR to mimic form submission.
Xhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');

PS: In terms of performance, post requests consume a bit more than get requests, with the same data compared to twice times faster than the post.

JSON can also use Ajax to back-and-forth access.
var url = ' demo.json?rand= ' + math.random ();
var box = Json.parse (Xhr.responsetext);