In-depth understanding of the five steps of ajax asynchronous requests (detailed code)

In front-end work, ajax is often used. In fact, many people only know that ajax is an asynchronous request and do not know how to use it. What are its basic steps and what is the ajax request process? Next, this article will introduce to you the Ajax request steps and the detailed code of the Ajax request steps. Interested friends can take a look.

AJAX (Asynchronous JavaScript and XML): refers to a web development technology for creating interactive web applications. By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of the web page can be updated without reloading the entire web page.

1. Create xmlHttpRequest object

All modern browsers (IE7, Firefox, Chrome, Safari and Opera) support the XMLHttpRequest object, while IE5 and IE6 use ActiveXObject.

    if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest(); 
      if(xmlHttp.overrideMimeType){
        xmlHttp.overrideMimeType("text/xml");
      }
   }else if(window.ActiveXobject){
       var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0; i<activeName.length; i++){
          try{
              xmlHttp = new ActiveXobject(activeName[i]);
             break;
          }catch(e){
          }
       }     
   }
   if(!xmlHttp){
      alert("创建xmlhttprequest对象失败");
   }else{    
   }

2. Set the callback function

   xmlHttp.onreadystatechange= callback;
   function callback(){}

3. Use the OPEN method to establish a connection with the server xmlHttp.open("get","ajax ?name=" name,true)

In this step, pay attention to setting the HTTP request method (post/get). If it is POST method, pay attention to setting the request header information xmlHttp.setRequestHeader("Content-Type","application /x-www-form-urlencoded")

4. Send data to the server

  xmlHttp.send(null);

If it is POST, it will not be empty

5. Process different response states in the callback function

 if(xmlHttp.readyState == 4){
      //判断交互是否成功
      if(xmlHttp.status == 200){
        //获取服务器返回的数据
        //获取纯文本数据
        var responseText =xmlHttp.responseText;
       document.getElementById("info").innerHTML = responseText;
      }
  }

##readyState attribute: Indicates the current stage of the request/response process

0: Not initialized. The open() method has not been called yet.

1: Start. The open() method has been called, but the send() method has not yet been called.
2: Send. The send() method has been called, but the response has not been received.
3: Receive. Partial response data has been received.
4: Complete. All response data has been received and is ready for use on the client.

Only after the XMLHttpRequest object has completed the above five steps, the data returned from the server can be obtained.

status attribute: response HTTP status code

200: response successful
301: permanent redirection/permanent transfer
302: temporary redirection/temporary transfer
304: this time Obtaining the content is to read the data in the cache
400: Request parameter error
401: No permission to access
404: The accessed resource does not exist

# Summary: The above introduces the five steps of Ajax request and the detailed code. It may seem difficult to those who have not been in contact with it. It doesn’t matter. After reading it, try it more and you will understand it slowly. I hope it can help you!

The above is the detailed content of In-depth understanding of the five steps of ajax asynchronous requests (detailed code). For more information, please follow other related articles on the PHP Chinese website!