在项目开发中遇到跨域的问题,一般都是通过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,也可以是纯字符串)塞进调用方法里,这样客户端就可以那到数据并做后续的处理了。
说了这么多,不上代码不是我的风格啊,上代码。。
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的现实
$.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,也不能改变这一点。