Having been used to Ajax requests written by others, I suddenly want to write one myself. Because of this idea, I went to look up the information and finally figured out the steps of the original request for ajax. I would like to share with you here.

If you want to make a request to the server, you must first have an object that can request the server, just as you must first have a Date object to get the time. The object of ajax request is:

var xhr=new XMLHttpRequest();

With the xhr object, the background can be requested in a certain step. The steps requested are as follows:

//Step 1: Call the open() method, which has three parameters: 1. The way the request is GET or POST,2. The path url of the request, 3. Synchronization or asynchronization
xhr.open("GET","xuyuechao.com?id=1","false")
//It's important to note that the open() method does not actually send requests, but only initiates a request for sending, which you can understand as initializing the request parameters.

//Step 2: Call the send() method. It has one parameter, that is, the data transmitted. Usually, the data requested by GET is written on the URL. The GET method mostly transmits a null (for some browsers, this parameter is necessary, if it is not transmitted, it will cause errors). If it is a POST request, it needs to transmit data in JSON format.
xhr.send(null);

//Step 3: Judge the result of the request. Here is the synchronous request, so write it down in code order.
//responseText: All the data returned is here
//status: The state of the response
//statusText: The corresponding status statement (200 indicates the status of the successful request)
if(xhr.status>=200&xhr.status<300||xhr.status===304){
    console.log(xhr.responseText);
}else{
    console.log("request fail",xhr.status);
}

So far a simple synchronous request has been completed, but usually we use asynchronous requests. What is the difference between the use of asynchronous requests and synchronous requests? Look down, please.

Since it's an asynchronous request, you need to know what state it's in, and if you don't know what state it's in, how to know if the asynchronous request is over. The XMLHttpRequest object gives us a way to get this value, readyState, which corresponds to the following states:
0: Initialized, not yet called the open() method
1: Start, but no send() method is called
2: Send, but no response was received
3: Acceptance, partial response data has been received
4: Completed, has received all the data, and can be used by the client.

You must want to ask me how I know the readyState state has changed. The omnipotent XMLHttpRequest object has long thought of calling onreadystatehange() every time the readyState state has changed.

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    console.log(xhr.readyState);
}
xhr.open("GET","xuyuechao.com?id=1",true);
xhr.send(null);
//The console prints 0,1,2,3,4 in turn. In actual use, you just need to focus on the completion of the status 4 request.
//So the onreadystatechange method is usually written as follows:
xhr.onreadystatechange=function(){
    if(xhr.status===200&&xhr.readyState===4){
        console.log("Complete the request and perform the relevant operations");
    }
}
//Note that the onreadystatechange method does not use this object because there are some browsers that will report errors, whereas direct use of xml objects will not be the case, which is a compatible way of writing.

In the process of requesting, you may find that the request takes too long to interrupt. At this time, the omnipotent XMLHttpRequest object also provides you with the corresponding method:

//The setTimeOut method can be used to achieve the maximum allowable request time, but there are related methods in the specification of XMLHttpRequest2 to implement timeout requests.
xhr.abort();

There is no specific POST, not POST is not unimportant, but POST is implemented in the same way as GET. Just change the first parameter of open() method to POST and send() method to the parameter you want to pass.
The advantages and disadvantages of GET and POST are as follows:
GET:
Lack of: clear text transmission, insecurity, size limitations
Excellent: Fast speed
POST:
Excellent: High security, no size limitation
Lack: Slow speed

One of the main limitations of implementing ajax communication through XML is the cross-domain security policy. In order to implement cross-domain requests, several methods can be used:

Method 1: CORS (mainstream cross-domain approach)
That is to add: Access-Control-Allow-Origin:*(* denotes the domain name that allows cross-domain, * identifies that all content can be cross-domain, often used for static resource loading)
Method 2: Image PING
Method 3: JSONP