前端干活系列----ajax请求和跨域请求

Posted 2021-04-15 吵吵日记

用习惯了别人写的ajax请求，突然就想自己也写一个。因为有了这种想法，我就去查资料，总算是弄清楚了ajax原生请求的步骤。特此跟大家分享一下

你要想对服务器发起一个请求你必须要先有一个能够请求服务器的对象，正如你获取时间必须先有一个Date对象一样。ajax请求的对象是：

var xhr=new XMLHttpRequest();

有了xhr对象之后按照一定的步骤就可以对后台进行请求了。请求的步骤如下：

//第一步：调用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);
}

到此一个简单的同步请求就搞定了，但是平常我们使用的都是异步请求，那异步请求的使用跟同步请求有什么区别呢？请接着往下看：

既然是异步请求，就需要用知道当前到了什么状态，如果不知道到了什么状态那如何知道异步请求结束了是不是。XMLHttpRequest对象中给我们准备了获取这个值的方法,readyState,值对应的状态分别是: 
0:未初始化，尚未调用open()方法 
1:启动,但未调用send()方法 
2:发送,但未接收到响应 
3:接受,已经接受到部分响应数据 
4:完成,已经接收到全部数据,而且可以再客户端使用了

你肯定想问我怎么知道readyState状态发生了变化呢，万能的XMLHttpRequest对象早就给你想到了，每当readyState状态发生改变的时候就会调用一次onreadystatehange()这个方法

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对象就不会有这种情况，是一种兼容性的写法

你在请求的过程中可能发现请求的时间太长了，想中断，这个时候万能的XMLHttpRequest对象也给你提供了相应的方法：

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

这里没有具体的将POST，并不是POST不重要，而是POST实现的方式跟GET基本一样，只需要将open()方法的第一个参数改成POST和send()方法中的参数变成你想要传递的参数即可。 
GET跟POST方式的优缺点如下： 
GET： 
缺：明文传递，不安全，切有大小限制 
优：速度快速 
POST： 
优：安全性高，无大小限制 
缺：速度慢

通过XML实现ajax通信有一个主要的限制就是跨域安全策略，而为了实现跨域请求，可以使用一下几种方法：

方法一：CORS（主流的跨域方法） 
就是在请求的头部信息中添加：Access-Control-Allow-Origin:*（*表示允许跨域的域名，*标识所有的内容都可以实现跨域,常用于静态资源加载） 
方法二：图像PING 
方法三：JSONP