js之Ajax与跨域

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之Ajax与跨域相关的知识,希望对你有一定的参考价值。

一、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,可以设置白名单,或者请求方法等等,有兴趣的可以去了解了解。



以上是关于js之Ajax与跨域的主要内容,如果未能解决你的问题,请参考以下文章

ajax与跨域

进阶 | 一份详细的AJAX与跨域处理讲解

ajax(同源与跨域)

AJAX 与跨域通信:AJAX 与同源策略

nodejs之mock与跨域代理的三两事

同源与跨域JSONP(函数封装)CORS