Front-end work series----ajax request and cross-domain request

I was used to the ajax requests written by others, and suddenly wanted to write one myself. Because of this idea, I went to check the information, and finally figured out the steps of the ajax native request. Hereby share with you

If you want to initiate 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 the ajax request is:

var xhr=new XMLHttpRequest();

After you have the xhr object, you can make a request to the background according to certain steps. The steps to request are as follows:

//第一步：调用open()方法,他有三个参数，1.请求的方式GET或POST,2.请求的路径url，3.同步还是异步
xhr.open("GET","xuyuechao.com?id=1","false")
//需要注意的是open()方法并不会真正的发送请求，而只是启动一个请求以备发送，你可以理解为初始化了一下请求参数

//第二步:调用send()方法,他有一个参数，就是传输的数据，通常GET请求的数据都是写在URL上的，GET方法多多是传一个null（对于有些浏览器这个参数是必须的，如果不传会报错）,如果是POST请求需要传一个JSON格式的数据进来
xhr.send(null);

//第三步:判断请求的结果，此处是同步请求所以按照代码顺序接着往下写即可
//responseText:返回的数据全部在这里
//status:响应的状态
//statusText:相应的状态说明(200表示请求成功的状态)
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 is done, but we usually use asynchronous requests. What is the difference between the use of asynchronous requests and synchronous requests? Please read below:

Since it is an asynchronous request, you need to know what state it has reached. If you don't know what state it has reached, how do you know if the asynchronous request is over? The XMLHttpRequest object has prepared a method for us to obtain this value, readyState, and the corresponding states of the value are:
0: Not initialized, the open() method has not been called yet
1: Started, but the send() method has not been called
2: Sent, but not yet called Response received
3: Accepted, part of the response data has been received
4: Completed, all data has been received, and can be used by the client

You must want to ask how I know the state of readyState has changed. The omnipotent XMLHttpRequest object has already given you an idea. Whenever the state of readyState changes, the method onreadystatehange() will be called once.

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    console.log(xhr.readyState);
}
xhr.open("GET","xuyuechao.com?id=1",true);
xhr.send(null);
//控制台依次打印0,1,2,3,4。实际使用中你只需要关注状态4请求完成时就可以了
//因此对于onreadystatechange方法的写法通常是：
xhr.onreadystatechange=function(){
    if(xhr.status===200&&xhr.readyState===4){
        console.log("请求完成请执行相关操作");
    }
}
//请注意onreadystatechange方法中没有使用this对象是因为在有些浏览器中会报错，而直接使用xml对象就不会有这种情况，是一种兼容性的写法

In the process of requesting, you may find that the request time is too long and you want to interrupt it. At this time, the almighty XMLHttpRequest object also provides you with corresponding methods:

//可以配合setTimeOut方法实现最多允许请求的时长，不过在XMLHttpRequest2的规范中有了相关的方法来实现超时请求
xhr.abort();

There is no specific POST here, it is not that POST is unimportant, but the way POST is implemented is basically the same as GET. You only need to change the first parameter of the open() method to the parameters in the POST and send() methods. The parameters you want to pass can be.
The advantages and disadvantages of the GET and POST methods are as follows:
GET:
lack: clear text transmission, insecure, with size restrictions
Excellent : fast speed
POST:
excellent: high security, no size limit
lack : slow speed

A major limitation of implementing ajax communication through XML is cross-domain security policy. In order to implement cross-domain requests, the following methods can be used:

Method 1: CORS (mainstream cross-domain method)
is to add in the header information of the request: Access-Control-Allow-Origin: * (* indicates a domain name that allows cross-domain, * indicates that all content can be cross-domain, Commonly used for static resource loading)
Method 2: Image PING
Method 3: JSONP

If you like, I can pay attention to my public number - noisy diary: