Implement ajax method to send asynchronous requests

This time I will bring you the implementation of ajax sending asynchronous request method , what are the precautions for implementing ajax sending asynchronous request, the following is a practical case, let's take a look.

ajax sends an asynchronous request for your reference. The specific content is as follows

First step(Get XMLHttpRequest)

Ajax actually only needs to learn one object: XMLHttpRequest. If you master it, you have mastered ajax!!!

1. Get XMLHttpRequest

Most browsers support:var xmlHttp=new XMLHttpRequest();
IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
IE5.0 and earlier versions of IE:var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

2. Write a function that creates an XMLHttpRequest object

function createXMLHttpRequest(){
     try{
     return new XMLHttpRequest();
     } catch(e){
     try{
     return new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){
     try{
      return new ActiveXObject(“Microsoft.XMLHTTP”);
     }catch(e){
       alert(“哥们儿,你用的是什么浏览器啊?”);
       throw e;
    }
    }
     } 
}

Step 2(Open the connection to the server)

xmlHttp.open(): used to open a connection with the server, it requires three parameters:

Request method: can be GET or POST
Requested URL: Specify the server-side resource, for example:/day23_1/AServlet
Whether the request is asynchronous: If true, it means sending an asynchronous request, otherwise it is synchronous ask

xmlHttp.open("GET","/day23_1/AServlet",true); //For example

Step Three(Send Request)

xmlHttp.send(null): If not given, some browsers may not be able to send!

Parameter: It is the request body content! If it is a GET request, null must be given.
If it is a POST request, as follows

xmlHttp.send(“username=zhangSan&password=123”);

the fourth step:

Register a listener on an event of the xmlHttp object: onreadystatechange
The xmlHttp object has a total of 5 states

0: Initialization is not completed, the XMLHttpRequest object has only been created, and the open() method has not been called.
1: The request has started, the open() method has been called, but the send() method has not been called.
2: Request Sending completion status, the send() method has been called
3: Start reading the server response
4: End of reading the server response (usually we only care about the last status!!!)

Get the status of xmlHttp object

var state = xmlHttp.readyState;//可能是0、1、2、3、4

Get the status code of the server response (200: Success, 304: Status has not changed, 404 500: Server error)

var status=xmlHttp.status;//例如200、404、500

Get the content of the server response

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!

So the listener should be written like this

xmlHttp.onreadystatechange = function(){
  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){
  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of using vue-cli sass

How to create a countdown function for Date objects

The above is the detailed content of Implement ajax method to send asynchronous requests. For more information, please follow other related articles on the PHP Chinese website!