AJAX跨域调用相关知识-CORS和JSONP

一、什么是跨域

跨域问题产生的缘由，是因为浏览器的安全机制，JS只能访问与所在页面同一个域（相同协议、域名、端口）的内容。

可是咱们项目开发过程当中，常常会遇到在一个页面的JS代码中，须要经过AJAX去访问另外一个服务器并返回数据，这时候就会受到浏览器跨域的安全限制了。

 

这里要注意，若是只是经过AJAX向另外一个服务器发送请求而不要求数据返回，是不受跨域限制的。浏览器只是限制不能访问另外一个域的数据，即不能访问返回的数据，并不限制发送请求。

咱们接下来就为你们讲解最多见的跨域AJAX调用的解决方案，首先咱们先准备一个测试环境：

1. 一个能够正常启动的Tomcat，默认端口8080；
2. 下载示例代码包ajax-cors-jsonp.zip，解压到Tomcat的webapps下，示例代码包中有test-client和test-service两个文件夹，分别包含咱们示例的客户端和服务端代码；
3. 模拟一个多域环境，修改“C:\Windows\System32\drivers\etc\hosts”（若是文件不能编辑保存，须要在文件属性中去掉只读），在文件内容后面追加：

127.0.0.1       www.aaa.com
127.0.0.1       www.bbb.com

启动Tomcat后，在浏览器中，分别测试

http://www.aaa.com:8080/test-client/index.html

http://www.bbb.com:8080/test-client/index.html

两个页面是相同的，只是地址不一样，都是在点击按钮后经过AJAX去访问http://www.bbb.com:8080/test-service/add.jsp。可是从www.aaa.com:8080访问时就返回了error，即浏览器不容许在www.aaa.com:8080的页面中经过AJAX获取来自www.bbb.com:8080服务器的返回数据。

你们观察一下Tomcat控制台，会发现从www.aaa.com:8080访问时，虽然返回了错误，但服务端代码其实仍是执行了。这个现象验证了跨域是能够发请求的，可是浏览器出于安全的缘由不让咱们在JS中获取返回数据。

测试案例很简单，就是传入a=15&b=10两个参数，返回两个数据的和25，代码参见：

test-client/index.html

test-service/add.jsp

二、CORS方案

本节介绍的CORS（Cross-Origin Resource Sharing）方案是W3C在2014年正式推出的跨域访问方案，是真正的官方解决方案。这个方案的实现很是简单，只须要在服务端返回的头部信息中标明是否容许跨域访问，以及容许哪些域访问便可。

接下来咱们访问

http://www.aaa.com:8080/test-client/index_cors.html

成功了！！！咱们来看代码中有什么改变？

index_cors.html与index.html的差别仅是ajax调用的地址从add.jsp换成了add_cors.jsp，咱们再来看add.jsp和add_cors.jsp的区别，会发现只增长了一行代码：

response.setHeader(“Access-Control-Allow-Origin”, “http://www.aaa.com:8080”);

若是不限定跨域访问的地址，能够把域名部分设置为*：

response.setHeader(“Access-Control-Allow-Origin”, “*”);

小结：

CORS方案实现很是简单，只要服务在头部标明容许跨域访问便可。可是这个方案因为推出时间较晚，因此IE9及如下浏览器并无支持这个机制。

IE9及如下浏览器在安全设置里控制是否容许跨域数据访问：

默认是上面的选项是禁用的，须要手动启用。同时，因为jQuery自动判断并认为当前浏览器不支持跨域，因此咱们还须要用一行代码让jquery支持跨域ajax：

$.support.cors = true;

三、JSONP方案

JSONP并非一个官方协议，其本质上是一种巧妙的跨域获取JSON数据的编程技巧。

咱们首先来看实现，JSONP在实现上要比CORS稍微麻烦一点点，先后端要有点配合。

首先运行http://www.aaa.com:8080/test-client/index_jsonp.html，这个页面里面AJAX后端请求换成了add_jsonp.jsp。

接下来咱们先解析代码：

index_jsonp.html中，咱们在$.ajax的参数上有点变化：

1. type改为了get，JSONP只支持get请求，这个参数在JSONP场景下实际上是能够忽略的，即便改为post，也会依然按get模式；
2. dataType改为了jsonp，这个参数标明要采用JSONP方式进行调用；
3. jsonp: “x5callback”，这个参数实际上是一个约定的参数名，用于后端按照这个参数名获取一个回调函数名；
4. jsonpCallback：这个参数用来指定上面那个参数对应的回调函数名，若是不指定，jQuery会自动生成一个随机的函数名。

add_jsonp.jsp中，咱们在最后数据返回部分作了一点处理：

1. 首先咱们按照约定的参数名，获取回调函数名；
   String callbackName = request.getParameter(“x5callback”);
2. 返回的内容格式也再也不仅是一个JSON数据，而是一个JS的函数调用形式：回调函数名(JSON数据)
   String jsonpResult = String.format(“%s(%s)”, callbackName, jsonResult);

先后端须要作的工做就是这么多，可是这时候初学者必定以为有点迷惑了，这个回调函数名究竟是干什么用的？咱们并无定义什么回调函数啊？它是怎么工做的呢？

咱们简单的加一个调试很快就能够解开这个疑惑，在add_jsonp.jsp最终返回的数据中加一个debugger：

String jsonpResult = String.format(“debugger;%s(%s)”, callbackName, jsonResult);

接下来咱们F12启动浏览器开发者工具，点击按钮后就会进入JS调试。

这时候咱们看到返回的是一个JS函数的调用，函数名是随机的，函数的参数就是那个咱们构造的JSON。接下来，咱们在控制台输入window.函数名，会发现这个函数是真实存在的！！！

这是怎么回事呢？？？原来jQuery所谓的JSONP模式，实际上是动态建立了一个<script>标签，标签的src属性指向一个URL（http://www.bbb.com:8080/test-service/add_jsonp.jsp?x5callback=jQuery18203749695811420679_1439276096319&a=15&b=10&_=1439276101932），这个URL里面除了包含咱们的a和b两个参数，还包含一个x5callback参数，参数的值就是那个随机的函数名。这个script标签动态插入到当前页面后，天然就会将咱们返回的内容当作JS加载到当前页面（这里咱们返回的是JS，浏览器是不阻止的哦，页面能够从任何域加载JS脚本）：

debugger;jQuery18203749695811420679_1439276096319({“sum”: 25})

加载后，按照JS的特性，这些代码会当即执行。而jQuery在这个以前已经动态建立了一个以随机函数名为名称的全局函数，用于接收返回数据，再日后jQuery经过一系列的逻辑代码最终把返回值给到了咱们的success回调函数中。

有关jQuery动态建立<script>相关的逻辑，你们能够在咱们案例自带的jquery-1.8.2.js的8270行加上断点进行跟踪。

小结：

JSONP是以动态建立script标签为基础的一种编程技巧，来实现跨域获取JSON数据。

支持目前全部浏览器，只是在实现方式上须要先后端代码有一点约定配合。

可是，要注意因为JSONP是以script标签的src属性加载的，所以参数会收到URL长度的限制，只能适用于传入参数内容很少的场景。

四、总结

CORS方案实现简单，同时支持GET和POST请求，可是不支持IE9及如下浏览器。这时看官要问了，这么多浏览器不支持，这技术怎么用啊？手机啊！目前市面上全部的手机浏览器是所有支持CORS的，若是是为手机提供跨域服务CORS就够了。

JSONP方案实现须要先后端配合，支持GET请求，支持全部浏览器，只是传入的参数内容受限于URL长度限制。

 

下载资源：ajax-cors-jsonp.zip

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其余app 开发相关文章：http://doc.wex5.com/?p=3443