js之Ajax与跨域

Posted 2020-10-01

一、Ajax

        我们对Ajax一定不会陌生，异步发送请求获取数据，这是我们前端与后台服务器交互的重要的手段，那么对于ajax我们需要了解什么呢？

        我们手写一个ajax，这样就能够基本了解使用了ajax了。

 1 var xhr = new XMLHttpRequest(); // XMLHttpRequest是ajax最重要的api
 2 
 3 xhr.open("GET", "/admin/user");
 4 
 5 xhr.onreadystatechange = function() {
 6     if (xhr.readyState == 4 && xhr.status == 200) {
 7         console.log(xhr.responseText);
 8     }
 9 }
10 
11 xhr.send();

        这是一个最基本的一个ajax的流程，我们需要new一个XMLHttpRequest来进行操作，针对IE的有兼容性的操作，ActiveXObject()，这和W3C标准不一样，了解记住就行。

        使用open()方法去打开一个ajax请求，第一个参数是请求的方法，第二个参数是请求的地址，第三个请求是是否异步，默认为异步。接下来说一说代码中的那些状态码是代表什么当xhr.readyState变化的时候都会触发xhr.onreadystatechange。而readyState总共有5种状态：

1. 未初始化：就是还没有调用send方法，状态码为0
2. 载入：已经调用了send方法，正在发送，状态码为1
3. 完成：send已经执行了，已经接收到相应了，状态码为2
4. 解析：解析相应的内容，状态码为3
5. 全部完成：解析完成，可以在客户端调用了，状态码为4

        而status是http的状态码，相信大家都不会陌生，经常在浏览器会看见404的状态码，这就是这个状态码了。

1. 2xx：表示成功
2. 3xx：需要重定向
3. 4xx：客户端错误，比如404就是客户端请求错误，服务器没有这个东西
4. 5xx：这代表是服务器的错误

        以上就是关于ajax的基础的知识了。

二、跨域

        那么什么是跨域呢？其实我在工作中也会遇到跨域的问题，其实只要公司有一定的规模，那么跨域是不可避免的，那么什么是跨域，该怎么解决呢，下面我就来说说自己的理解。

        首先，我们要知道浏览器有同源策略，不允许ajax去访问其他域的接口，这也是浏览器出于安全性的考虑，那什么情况是跨域呢？下面我们来看例子：

1 http://www.link1.com/index.html
2 http://link2.com/a/ajaxsource?id=1234
3 
4 //  当我们在第一个页面发送ajax请求去访问第二个，这就不行，域名不同，浏览器限制不能去访问

        那么跨域的条件是什么，只要协议、端口、域名之中有一个不同那么就算是跨域。浏览器这么做确实能保证安全性，但是在实际的工作中，我们会有pc端移动端或者还有其他的域名，这时候我们需要用ajax去访问接口，问题就出现了，由于是不同的域名，这样的异步请求就会被视为跨域。那么我们要怎么去解决呢，在html中，我们对于资源的加载是可以跨域加载的，比如说img标签的资源下载，当然了还有script和link标签中对于资源的加载。

        img可以用与打点统计，在有些网站下面有个站长统计，这就是利用了img的加载策略。link和script可以使用CDN，这也是跨域。大家都了解的jsonp也是使用的script标签来进行跨域的。

        线面我们说一说JSONP的实现原理，我们将要请求的数据的地址变成一个js的文件，通过script标签去加载这个文件，这个js会返回一个函数比如说callback()，里面就是我们想要请求的数据。我么看一下代码:

1 //  在自己的代码中写一个函数，这个函数双方共同约定的名字，同时对方要同意你的跨域加载，
      你才能获取到数据
2 var callback = function(res) {
3     var data = res;
4 }
5 
6 //  使用script标签去获取数据
7 <script src="http://link1.com/user.js"></script>
8 //  我们接受的这个js会包含一个函数callback({name: "juke", age: 21})
9 //  返回的这个函数会去执行我们定义的函数，那么我们就拿到了他传给我们的参数，也就是我
      们想要获取到的数据

      同时还有一种跨域的策略是http的header，可以设置白名单，或者请求方法等等，有兴趣的可以去了解了解。