Insert title here

深入浅析Jsonp解决ajax跨域问题一、介绍最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份，关键是我还看不懂，可能是能力问题吧，自己经过很多尝试，所以总结了一下，终究还是弄懂了皮毛。注意一点是，这里是用Jsonp解决ajax的跨域问题，具体的实现其实不是ajax。 1、同源策略浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(JavaScript、ActionScript)在没明确授权的情况下，不能读写对方的资源。 2、JSONP JSONP（JSON with Padding）是JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用 other（8888）项目中index.jsp如下：// 因为jsp实际就是servlet，这里就用jsp代替servlet演示。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here other domain 其实中上面看无非就是jsonp页面中点击按钮ajax去获取other页面中的数据。结果如下：chrome控制台 XMLHttpRequest cannot load http://localhost:8888/other/index.jsp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. 以上提示就是指跨域问题，不能从8080这个域去访问8888域的资源。 2、利用script标签去访问other域的js文件由于进入http://localhost:8080/jsonp/index.jsp，会立马弹出alert，表示引入的js文件自动执行了，跨域请求js成功。 2.3 同样的，直接引用，会立马执行立马的alert，那么在other.js中写函数，同样jsonp/index.jsp中也能调用到，这点就不演示了，项目开发中大多都是这样做的，页面与js/css分离。 2.4 另外说明一点，如果在other.js中有函数通过ajax调用8080中的东西，然后引入之后，调用这个函数，也是可以的，但是如果other.js中函数ajax调用8888的东西，引入之后，调用这个函数，同样是跨域的。 3、script实现跨域请求 3.1 简单模拟服务器返回数据将jsonp/index.jsp改成如下：这里注意引入的other.js的位置，是在函数getResult之后的，如果在它之前的话，会提示函数不存在。js加载顺序是从上开始，在之前调用没创建的，不能成功。注意这里是指引入的js文件，如果是同一个js文件或者当前页面的js中，先执行调用，然后再写函数也是没有问题的，但是如果先执行调用引入js文件中的函数，然后再引入js文件，就会提示函数不存在。然后other.js getResult({"result":"this is other domain's data"}); 也就是在jsonp/index.jsp页面写好函数，然后引入其他域的js传入参数去调用这个函数，这里的参数你可以先看做是其他域服务器的接口返回的数据。刷新页面，效果当然是弹出alert框，this is other domain's data 3.2 模拟接口访问看到这里，你会不会还是想不懂，上面js弄啥的，传个死的数据，有什么实际意义吗？，其实script的src不仅可以接js的地址，还可以接servlet的地址，也就是http接口地址，所以接下来，懒得写servlet，这里还是写jsp当做接口，在other项目中新建other.jsp页面，内容如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String params = request.getParameter("params"); out.println("ajax cross success,the server receive params :"+params); %> 内容很简单，也就是接受一个params的参数，然后返回数据给调用者。我们在jsonp/index.jsp中加上看到这个地址，你是不是很熟悉，不熟悉的证明你用servlet用蠢了，jsp也是servlet，流程就是页面一加载的时候，script标签就会去发送请求，然后返回数据。那么我们刷新页面，看看效果。 Uncaught SyntaxError: Unexpected identifier 报错了，如上，然后代码有问题？No，点击错误，你会看到请求的东西也打印出来了，就是提示错误，表示这个东西浏览器不认识，其实是script不认识啦。还不明白，那么你去页面加上如下内容，你看报不报错！！肯定报错那么js不能解析，我们换一种思路，要是我们输出的是JSON字符串或者调用当前页面函数的字符串了，类似于3.1中返回的getResult({“result”:”this is other domain's data”}); 所以改造一下，把other.jsp中的内容改成 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String params = request.getParameter("params"); //out.println("ajax cross success,the server receive params :"+params); out.println("getResult({'result':'"+params+"'})"); %> 别忘了，之前jsonp/index.jsp中我们定义了，那么加入引用之后，依然记得getResult函数与引入函数的先后顺序问题。刷新页面，发现大工告成。至此，大部分原理已经讲完了，还有一个问题，这里服务器返回的是getResult（xxx），其中这里的xxx可以当做是经过接口的很多处理，然后塞进去的值，但是这个getResult这个函数名，调用方与其他域服务器这一方怎么约定这个名字是一致的了，况且很多公司自己做服务的，别的公司的开发人员去调用，难道每个人都去那么公司去约定调用函数的名字？怎么可能，所以有人就想出来了一种解决方案，当然不是我~~，其实也很简单啦，也就是把回调的函数名字也一起传过去不就行了，所以代码如下： other.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String params = request.getParameter("params"); String callback = request.getParameter("callback"); // 经过该接口一系列操作，然后得到data，将data返回给调用者 String data = "{'result':'"+params+"'}"; out.println(callback + "("+data+")"); %> 代码很简单，也就是传递一个回调函数的参数名，然后经过该接口一系列操作，将返回数据，塞到回调函数里面，调用端的函数就得到了该接口的数据，也就是类似于ajax中succsss：function(data)，然后处理data一样，这里的success回调函数，相当于上面的getResult函数。当然你也可以写的优雅一点，比如： function CreateScript(src) { $(" 这里的jsonCallback，回调函数设置为getResult，那么返回后会先调用getResult函数中的代码，再调用success函数中的代码，一般情况下，不用定义getResult函数，同样jsonCallback不需要设置，那么就只执行success中的代码，也就跟平时的ajax一样用啦。所以实际工作用法如下： function jsonp_fun(){ $.ajax({ url:'http://localhost:8888/other/other.jsp', type:'post', data:{'params':'fromjsonp'}, dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) success: function(data){ alert("through jsonp,receive data from other domain : "+data.result); }, error: function(){ alert('fail'); } }); } <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String params = request.getParameter("params"); String callback = request.getParameter("callback"); // 经过该接口一系列操作，然后得到data，将data返回给调用者 String data = "{\"result\":\""+params+"\"}"; out.println(callback + "("+data+")"); %> 这里没有指定jsonpCallback，实际上jquery底层拼装了一个函数名，当然生成函数规则就没研究了。补充： 1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装； 2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加