Asynchronous interaction with Ajax + js and Asynchronous interaction with ajaxjs

Asynchronous interaction with Ajax + js and Asynchronous interaction with ajaxjs

Once we mention Asynchronous interaction, we will say ajax, as if ajax technology has become synonymous with Asynchronous interaction. Next we will study the core object of ajax!

Using ajax to Implement Asynchronous interaction is nothing more than four 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

The seemingly mysterious Asynchronous interaction may have come up with a preliminary idea in your mind after making these four steps clear.

First, we create the core object of ajax. Due to browser compatibility, we should not consider compatibility issues when creating the core object of ajax, because the subsequent steps to Implement Asynchronous interaction are based on whether the core ajax object is successfully created in step 1.

Function getXhr () {// declare the XMLHttpRequest object var xhr = null; // create if (window. XMLHttpRequest) {// indicates xhr = new XMLHttpRequest ();} else {// indicates IE xhr = new ActiveXObject ('Microsoft. XMLHttp ');} return xhr;} // create the core object var xhr = getXhr ();

Through the above Code, we have successfully created the core ajax object, and saved it in the variable xhr. The core ajax objects mentioned next will be replaced by xhr.

The second step is to establish a connection with the server and call the open (method, url, async) method through the ajax core object.

Parameters of the open method:

Method indicates the Request method (get or post)

Url indicates the php address of the request (note that when the request type is get, the requested data will follow the url address with a question mark, and the null value will be passed in the following send method)

Async is a Boolean value indicating whether it is asynchronous. The default value is true. In the latest specification, this item is no longer required, because it is officially believed that ajax is used to implement Asynchronization.

Xhr. open ("get", "01.php? User = xianfeng "); // This is the get request data xhr. open (" post "," 01.php"); // this is the post request data

Step 3: send a request to the server and call the send method using the ajax core object.

If the post method is used, the requested data is put in the form of name = value and sent to the server in the send method. The get method directly imports the null value.

Xhr. send ("user = xianfeng"); // This is the request data sent in post mode xhr. send (null); // This is in get Mode

Step 4: receive the data returned from the server and use the onreadystatechange event to monitor the communication status of the server. get the current communication status of the server through the readyState attribute. status to obtain the status code. The responseText attribute is used to receive the data returned by the server (in this case, the data in the text string format ). write the XML format data and the well-known json format data later.

Xhr. onreadystatechange = function () {// ensure that the server sends the response data and the request must be successful if (xhr. readyState = 4 & xhr. status = 200) {// receives data from the server var data = xhr. responseText; // test console. log (data );}};

Articles you may be interested in:

• Example of interaction between Ajax asynchronous transmission and PHP
• Simple asynchronous Ajax interaction and native Ajax writing