Simple asynchronous interaction and native programming of Ajax

Time:2020-10-13

When it comes to asynchronous interaction, people will say Ajax, as if Ajax technology has become synonymous with asynchronous interaction. Next, we will study the core object of Ajax!

There are four steps to realize asynchronous interaction with Ajax

1. Create Ajax core objects

2. Establish a connection with the server

3. Send the request to the server

4. Receive the data from the server

The seemingly mysterious asynchronous interaction may have a preliminary idea in your mind after making clear these four steps

firstWe create the Ajax core object. Because of the compatibility of the browser, we should not consider the compatibility of the Ajax core object when we create the Ajax core object, because to achieve asynchronous interaction, the later steps are based on whether the first step successfully creates the Ajax core object

function getXhr(){
//Declare the XMLHttpRequest object
var xhr = null;
//It is created according to the different conditions of the browser
if(window.XMLHttpRequest){
//Represents a browser other than ie
xhr = new XMLHttpRequest();
}else{
//Represents IE browser
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
//Create core objects
var xhr = getXhr();

Through the above code, we have successfully created the Ajax core object, which is stored in the variable XHR. The next mentioned Ajax core object will be replaced by XHR

Step twoIt is to establish a connection with the server and call the open (method, URL, async) method through the Ajax core object

The formal parameters of the open method are explained

Method indicates the request method (get or post)

URL represents the address of the PHP request (note that when the request type is get, the requested data will follow the URL address with a question mark, and a null value will be passed in the send method below)

Async is a Boolean value, indicating whether it is asynchronous or not. The default value is true. In the latest specification, this item is no longer needed to be filled in, because the official thinks that using Ajax is to achieve asynchronous

xhr.open ("get", "01. PHP? User = Xianfeng"); // this is the get method to request data 
xhr.open ("post", "01. PHP"); // this is a post request for data

Step threeWe will send a request to the server and use the Ajax core object to call the send method

In the post mode, the requested data will be sent to the server in the send method in the form of name = value, and the null value will be directly passed in the get mode

xhr.send ("user = Xianfeng"); // this is to send the request data in post mode 
xhr.send (null); // this is in get mode

Step 4After receiving the data from the server, the onreadystatechange event is used to monitor the communication status of the server. The current communication state of the server is obtained through the readyState attribute. The status code is obtained. The response text property is used to receive the data returned by the server response (here refers to the text type data in string format). After that, the XML format data and the famous JSON format data are written

xhr.onreadystatechange = function(){
               //Ensure that the server-side response of the data sent to ensure that the request must be successful
   if(xhr.readyState == 4&&xhr.status == 200){
      //Receive data from server
      var data = xhr.responseText;
       //Testing
       console.log(data);
   } 
};

PS: simple asynchronous interaction of Ajax

Ajax simple asynchronous interaction, you can start with get mode

Then, to create an asynchronous request between Ajax and server, you need to complete three

Step 1: create the XMLHttpRequest object

If ( window.XMLHttpRequest ){// for IE7 and above and standard browsers
var xhr=new XMLHttoRequest();
}else if(window.ActiveXObject){
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

Step 2. Register the callback function

xhr.onreadystatechange=callback;
perhaps xhr.onreadystatechange=function () {
//codes here 
}

Step 3. Set the connection information

xhr.open (“get”, URL, true) / / where true means asynchronous interaction

Step 4: send data

xhr.send(null);

Recommended Today

Practice of query operation of database table (Experiment 3)

Following the previous two experiments, this experiment is to master the use of select statements for various query operations: single table query, multi table connection and query, nested query, set query, to consolidate the database query operation.Now follow Xiaobian to practice together!Based on the data table (student, course, SC, teacher, TC) created and inserted in […]