Using Ajax in native JavaScript for asynchronous communication

Ajax is the essence of the HTTP protocol based on the asynchronous way to communicate with the server, so-called asynchronous, refers to the execution of a program does not block the execution of other programs, the form of execution of the program does not depend on the program itself in the order of writing, the contrary is synchronous.

Here's a quick introduction to how to implement Ajax asynchronous communication using native JS

First step: Create an object that can implement an asynchronous request new XMLHttpRequest

var xhr=New  XMLHttpRequest (); Console.log (xhr.readystate); // at this point, the status code output is 0, which returns the current state of the XMLHTTP request, which confirms that the XMLHttpRequest object is created and is ready for uninitialized invocation of the Open () method. A value of 0 means that the object already exists, or the browser will error

Step two: Request message line Xhr.open (); Xhr.open ("Get", "07-register.php?name=" +name);

// The first parameter is passed in the request mode, Get/post, the second parameter is the path of PHP, if you use Get method request also need to write in the following parameters to be passed; Xhr.open ("Post", "07-register.php"); // The POST request is only a PHP path
Consolg.log (xhr.readystate);//This time the status code output is 1, indicating that data is being sent to the server

Step three: Request packet header Xhr.setrequestheader ();

The request header here does not need to be set in the GET request mode;

Xhr.setrquestheader (' Content-type ', ' application/x-www-from-urlencoded ')

Fourth step: Request newspaper style xhr.send ();

// GET request style notation xhr.send (null); // POST request stylistic notation xhr.send (' name ' =name)// parameter passed in parameter 

The above request steps have been completed and the next step is to listen to the server's response

Xhr.onreadystatechange=function() {console.log (xhr.readystate)/*at this point output 2 and then output 3, the value 2 indicates that the full response data has been received.
and prepare for the next phase of data parsing. State 3 This phase resolves the received server-side response data. That is, based on server-side response
The MIME type returned by the head converts the data to be accessed via the responsebody, ResponseText, or Responsexml properties
To prepare for the client call. State 3 indicates that data is being parsed*//*determines whether the current response is successful 1. The server responds 2. The result of the response is correct*/    if(xhr.status==200 && xhr.readystate==4) {console.log (xhr.readystate);/*This phase confirms that all data has been resolved
The parsing has been completed for the format available to the client. Value is4indicates that the data parsing is complete and can beXMLHttpRequestthe corresponding properties of the object are taken*/

var result=xhr.responsetext;                 // Get to Results             }}

The above is the simple Ajax request steps, if there are errors, please correct

Using Ajax in native JavaScript for asynchronous communication