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,也可以是纯字符串)塞进调用方法里,这样客户端就可以那到数据并做后续的处理了。
说了这么多,不上代码不是我的风格啊,上代码。。
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,也不能改变这一点。
以上所述是小编给大家介绍的JS JSOP跨域请求实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框2016-01-01
最新评论