Ajax+js realizes asynchronous interaction

This article shares with you the native javascriptmethods and codes for asynchronous interaction combined with ajax. It is very simple and practical. Friends in need can refer to it.

When it comes to asynchronous interaction, everyone will say ajax, as if the ajax technology has become synonymous with asynchronous interaction. Then we will study the core objects of ajax!

Using ajax to achieve asynchronous interaction is nothing more than 4 steps:

1. Create ajax core object

2. Establish a connection with the server

3. Send a request to the server

4. Receive the server response data

The seemingly mysterious asynchronous interaction. After clarifying these 4 steps, maybe Everyone already has a preliminary idea in their mind

First we create the core object of ajax. Due to browser compatibility issues, we must not consider its compatibility issues when creating the core ajax object, because in order to achieve asynchronous The subsequent steps of the interaction are based on whether the ajax core object was successfully created in the first step.

 function getXhr(){
      // 声明XMLHttpRequest对象
      var xhr = null;
      // 根据浏览器的不同情况进行创建
       if(window.XMLHttpRequest){
      // 表示除IE外的其他浏览器
           xhr = new XMLHttpRequest();
       }else{
         // 表示IE浏览器
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 // 创建核心对象
 var xhr = getXhr();

Through the above code, we have successfully created the ajax core object, which we save in In the variable xhr, the ajax core 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.

Explanation of formal parameters of the open method:

method represents the request method (get or post)

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

async is a Boolean value, indicating whether it is asynchronous, and the default is true. In the latest specification This item no longer needs to be filled in, because the official believes that using ajax is to achieve asynchronous.

xhr.open("get","01.php?user=xianfeng");//这是get方式请求数据
xhr.open("post","01.php");//这是以post方式请求数据

In the third step, we will send a request to the server and use the ajax core object to call send Method

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

xhr.send("user=xianfeng");//这是以post方式发送请求数据
xhr.send(null);//这是以get方式

The fourth step is to receive the data returned by the server response, and use the onreadystatechange event to monitor the communication status of the server. Obtain the current communication status of the server through the readyState attribute. Status obtains the status code , and uses the responseText attribute to receive the server response. data (here refers to text type string format data). Later, we will write XML format data and the famous json format data.

xhr.onreadystatechange = function(){
   　　　　　　　　　　　　　　　// 保证服务器端响应的数据发送完毕,保证这次请求必须是成功的
             　　　if(xhr.readyState == 4&&xhr.status == 200){
          　　　　　　// 接收服务器端的数据
          　　　　　　var data = xhr.responseText;
          　　　　　　 // 测试
          　　　　　　 console.log(data);
              　　 } 
             };

The above is the detailed content of Ajax+js realizes asynchronous interaction. For more information, please follow other related articles on the PHP Chinese website!