一目了然:jsonp详解

相信大家用json的比较多，但是我从来没有机会用jsonp，但是我经常看到JSONP是“用于跨域的”，我从来不知道它是什么。今天终于想通了。让我们来看看jsonp是什么。

同一原产地政策

首先，出于安全考虑，浏览器具有同源策略机制，防止从一个来源加载的文档或脚本获取或设置从另一个来源加载的文档的属性。我好像不知道是什么意思，只是练习一下。

1.随意创建两个网页

一个端口是2698，另一个是2701，根据定义，这两个端口的来源不同。

2.使用jQuery发起来自不同来源的请求，在端口为2698的网页上添加一个按钮，点击事件向端口为2701的域随机发起两个请求。复制代码如下： $(' # getotherdomain ings ')。单击(function () {$)。get(' http://localhost 33602701/scripts/jquery-1 . 4 . 4 . min . js '，函数(数据){console.log(数据)。

$.get(' http://localhost :2701/home/index '，function(data){ console . log(data)})})按照同源策略，显然是悲剧的。浏览器将阻止该请求，并且根本不会启动它。(访问控制-允许-来源不允许)

好吧，原来jsonp就是为了解决这个问题。

脚本标签的跨域能力。不知道你知不知道CDN，比如微软CDN。使用它，我们的网页无法提供jQuery。微软网站帮助我们提供：复制代码如下： script src=' http :3358 Ajax . aspnetcdn.com/Ajax/jQuery/jQuery-1 . 8 . 0 . js ' type=' text/JavaScript '/script。使用端口2698返回我们的网页。上面，我们在Click事件中有一对端口2701复制的代码如下：脚本类型=' text/JavaScript ' src=' http :3358 localhost :2701/scripts/jquery-1 . 4 . 4 . min . js '/脚本当然是200，OK

也是端口2698的网页发起了对域2701的请求，并在脚本中设置了scr属性的OK。另一种方式是悲剧。利用脚本的跨域能力，这是jsonp的基础。

使用脚本从不同的来源获取json。既然叫jsonp，显然目的是json，是跨域获取。根据上面的分析，很容易想到：用js构造一个脚本标签，将json url分配给脚本的scr属性，将这个脚本插入dom，让浏览器获取。练习：复制代码如下：函数创建脚本(src) {$ ('script//script ')。attr ('src '，src)。appendo(' body ')}添加一个button事件进行测试：复制代码如下： $ ('# getotherdomainjson ')。单击(function () {$)。get(' http://localhost 33602701/home/some JSON '，函数(数据){ 0

首先第一个浏览器的Url，http://localhost :2701/home/some json确实有一个JSON，在2698网页上用脚本标签请求这个2701的Url也是200OK的，但是有报道说底部js语法错误。最初，在加载脚本标记后，响应将立即作为js执行。显然，{'email' :' [email protected]'，'备注' : '我来自远东' }都不是合法的js语句。

通过脚本获取外来jsonp

显然，将上面的json放入回调方法是最简单的方法。比如，变成这样：

如果有jsoncallback的方法，那么jsoncallback({ ' email ' : '[email protected]'，'备注' : '我来自远东' })就是合法的js语句。

因为服务器不知道客户端的回调是什么，所以硬代码不可能是jsonpcallback，所以需要一个QueryString让客户端告诉服务器回调方法是什么。当然，QueryString的关键要符合服务器的协议，上面是“回调”。

添加回调函数：复制代码代码如下：函数JSON回调(JSON){控制台。日志(JSON)}把前面的方法稍微改改参数：复制代码代码如下： $(' # getjsonbyhand ').单击(function(){ Createscript(' http://localhost :2701/home/somejsonp？回调=jsoncallback ')})

2000好的，服务器返回jsoncallback({ ' Email ' : '[Email protected]'，' remote ' : '我来自遥远的东方'}),我们也写了jsonpcallback方法，当然会执行好的顺利获得了json。没错，到这里就是jsonp的全部。

利用jQuery获取jsonp上面的方式中，又要插入脚本标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp:复制代码代码如下： $(' # getjsonbyjquery ').单击(函数(){ $).Ajax({ URL : ' http://localhost :2701/home/somejsonp '、dataType: 'jsonp '、jsonp: 'callback '、success:函数（数据){ console.log(数据)} })})得到的结果跟上面类似。

总结

一句话就是利用脚本标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。复制代码代码如下： JSON back({ ' Email ' : '[Email protected]'，' remote ' : '我来自遥远的东方'})

模拟数字音乐制碟原生js:复制代码代码如下：按钮id=' BTN '点击/按钮脚本类型='文本/JavaScript '函数$(str){返回文档。getelementbyid(str)}函数创建脚本(src){ var Scrip=document。创建元素(“脚本”)；Scrip.src=srcdocument。尸体。appendchild(脚本)；}函数jsoncallback(JSON){控制台。日志(JSON)；//对象{ email='中国，email2='中国222'} } $('btn ').onclick=function(){ create script(' http://localhost :51335/some JSON？回调=jsoncallback ')}/脚本