Ajax simple asynchronous interaction and Ajax native authoring _ajax related

When it comes to asynchronous interaction, you can say Ajax, as if the Ajax technology has become synonymous with asynchronous interaction. The following will study the core objects of Ajax!

Using AJAX to implement asynchronous interaction is nothing more than 4 steps:

1. Create Ajax Core Objects

2. Establish a connection with the server

3. Send a request to the server

4. Receive Server response data

Seemingly mysterious asynchronous interaction when it is clear that these 4 steps, perhaps in the minds of everyone already have a preliminary thinking

First We create Ajax core objects, and because of our browser compatibility issues we don't have to consider compatibility issues when we create Ajax core objects, because the next steps to implementing asynchronous interaction are based on the success of the first step in creating the Ajax core object.

function getxhr () {
//declaring XMLHttpRequest object
var xhr = null;
Create an if window, depending on the browser's situation
. XMLHttpRequest) {
//means other browsers other than IE
XHR = new XMLHttpRequest ();
} else{
//means IE browser
xhr = new ActiveXObject (' microsoft.xmlhttp ');
}
return xhr;
}
To create a core object

With the above code we have successfully created the Ajax core object, we save in the variable XHR, the next mentioned Ajax core objects will be replaced by XHR.

The second step is to establish a connection with the server and invoke the open (Method,url,async) method via the Ajax core object.

The formal parameter interpretation of the Open method:

Method represents the request (get or POST)

The URL represents the requested PHP address (note that when the request type is get, the requested data is followed by a question mark following the URL address, and the null value is passed in the Send method below)

Async is a Boolean value that indicates whether it is asynchronous, and the default is true. In the latest specification, this item is no longer required, because the authorities believe that using AJAX is to achieve asynchrony.

Xhr.open ("Get", "01.php?user=xianfeng");//This is the Get method request data 

In the third step we will send a request to the server using the Ajax core object to invoke the Send method

In the case of post, the requested data is sent to the server in Name=value form in the Send method, and the Get method passes directly to the null value

Xhr.send ("User=xianfeng");//This is sending the request data as Post 

Step Fourth the receiving server responds to the data and uses the onReadyStateChange event to listen for the communication status of the server. Gets the current communication state of the server side through the ReadyState property. Status Gets the state code, Use the ResponseText property to receive the data that the server responds to (in this case, the string format data of the text type). Later, write XML-formatted data and the well-known JSON format data.

Xhr.onreadystatechange = function () {
//Ensure that the server-side response data is sent over to ensure that the request must be successful
if (xhr.readystate = = 4&　　　　　　 &xhr.status = =
//Receive server-side data
var = xhr.responsetext;
Test
Console.log (data);
} 
};

Ps:ajax Simple Asynchronous interaction

Ajax simple asynchronous interaction, you can start with the Get method first

Then create an AJAX and server-side asynchronous request that needs to complete three

Step 1, XMLHttpRequest object creation

if (window. XMLHttpRequest) {//for IE7 above and Standard browser
var xhr=new xmlhttorequest ();
} else if (window. ActiveXObject) {
var xhr=new activexobject ("Microsoft.XMLHTTP");

Step 2, register the callback function

Xhr.onreadystatechange=callback;
or Xhr.onreadystatechange=function () {
//codes here 

Step 3, set the connection information

Xhr.open ("Get", url,true)//Where true is represented as asynchronous interaction

Step 4, send the data

Xhr.send (NULL);