JS JSOP跨域请求实例详解

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下

在项目开发中遇到跨域的问题，一般都是通过JSONP来解决的。但是JSONP到底是个什么东西呢，实现的原理又是什么呢。在项目的空闲时间可以好好的来研究一下了。

1、什么是JSONP？

要了解JSONP，不得不提一下JSON，那么什么是JSON？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

JSONP的产生

1.众所周知，Ajax请求资源受同域的限制，不管是静态资源，动态页面，web服务都不行

2.同时我们发现web页面上调用JS文件时则不受跨域的影响（不仅如此，我们还发现凡是拥有‘src'这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>等）

3.可想而知，当前阶段如果想通过web端（ActiveX控件、服务器代理、HTML5的websocket等方式不算）跨域访问数据就只有一种可能，那就是服务端把数据装进JS格式的文件里，供客户端调用和处理

4.数据的传输，我们知道一种叫JSON的纯字符数据格式可以简洁的描述复杂的数据结构，而且还被JS原生支持，在客户端可以很容易的处理这种格式的数据

5.这样解决方案的一目了然了，web端通过和调用脚本一模一样的方式，来调用跨域服务器上动态生成的JS文件。服务器之所以要动态生成JS文件，目的在于获取客户端的回调函数名并把客户端需要的数据通过JSON（也可以是纯字符串）的格式传进去

6.在客户端对JS文件调用成功后，也就获取到了回调函数里的参数，剩下的就是对数据的处理了，这种方法和Ajax看起来很像，但是却并不一样（Jquery将JSONP和Ajax封装在一起，如果不了解的人会混为一谈）

7.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

好了，不知道大家对JSONP理解了没有，如果没有的话，鄙人就出来总结一下，说的不好，不要打我。

其实原理就是，客户端请求一个链接，并把需要的参数加上，callback表示是一个JSONP的请求（这个前端和后台可以自己统一），后台解析这个请求链接，发现是一个JSONP的请求，然后生成一个调用方法，并根据请求参数动态生成一个字符串（可以是JSON,也可以是纯字符串）塞进调用方法里，这样客户端就可以那到数据并做后续的处理了。

说了这么多，不上代码不是我的风格啊，上代码。。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

function test(data){ console.log(data) } var url="http://www.x.com/test?a=1&callback=test"//向x.com/test传递参数a值为1，并告诉他要调用的函数名是“test” //后台拦截到callback，知道要生成一个调用方法，方法名是test，并传递参数，后台处理生成如下（数据虚构） test("aaaaaa") test({a:1,b:2}) //然后前端通过script标签去访问并执行，上面的东西 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head，此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); //然后就会调用页面的test方法，这就是jsonp的实现原理。

关于Jquery中JSONP的现实

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$.ajax({ type: "GET", url: "http://x.d.cn/asych/adv.html?loc=8&callBack=?",//告诉后台这是一个jsonp请求，需要调用什么方法，如果为“？”，jq会帮你自动生成（如果使用jq一般都设置为“？”，这样才能在成功时触发jq的回调函数） type:"post",//jsonp只能发get请求，就算我设置请求类型为post dataType:"jsonp",//告诉jquery这是一个jsonp的数据，需要生成script标签来加载js data:{ a:"1" }, /*success: function (data) {//成功后jq会执行的方法（如果callback参数为“？”） $("body").append(data); },*/ error: function (XMLHttpRequest, textStatus, errorThrown) { //alert(errorThrown); } }).done(function(data){ $("body").append(data); });

看了上面的代码和注释，相信大家都明白了吧，虽然Jquery将JSONP封装到Ajax中，但是本质上是不同的。

Ajax的核心是通过XmlHttpRequest获取非本页内容，而JSONP的核心则是动态添加<script>标签来调用服务器提供的js脚本。

所以Ajax和JSONP的区别不在于是否跨域，Ajax通过服务端代理一样可以实现跨域，JSONP本身也不排斥同域数据的获取。

还有上面说到过，JSONP和Ajax的数据格式不一定要是JSON，也可以是纯字符串。

总而言之，JSONP不是Ajax的一个子集，即使Jquery将JSONP封装进Ajax，也不能改变这一点。