简介
符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数,这个函数允许客户端的Javascript
发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量,他们都利用Ajax来聚合不同来源的信息。
理解同源策略的限制
同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久
从Netscape Navigator 2.0时代就开始了。
解决这个限制的一个相对简单的办法就是在服务器端发送请求,服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。
另一个办法就是使用框架(frames),将第三方站点的资源包含进来,但是包含进来的资源同样要受到同源策略的限制。
有一个很巧妙的办法就是在页面中使用动态代码元素,代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候,同源策略就不会起到限制。但是如果代码试图下载文件的时候
执行还是会失败,幸运的是,我们可以使用JSON(JavaScript Object Notation)来改进这个应用。
JSON和JSONP
与XML相比,JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。
例如一个ticker对象
var ticker = {symbol:'IBM',price:100}
而JSON串就是 {symbol:'IBM',price:100}
这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据,但是我们的目的并不是这个。
通过使我们的函数能够加载动态的JSON数据,我们就能够处理动态的数据,这项技术叫做 Dynamic Javascript Insertion。
我们看下面的例子
index.html中
<script type="text/javascript">
function showPrice(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
}
var url = "ticker.js"; //Outer JS URL
var script = document.createElement('script');
script.setAttribute('src', url);
//load javascript
document.getElementsByTagName('head')[0].appendChild(script);
</script>
ticker.js中
var data = {symbol:'IBM', price:100};
showPrice(data);
上面的代码通过动态加入Javascript代码,来执行函数加载数据。
正如之前提到过的,同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码,来执行在他们代码中的JSON数据。
这就是JSONP(JSON with Padding)。注意,使用这种方法时,你必须在页面中定义回调函数,就像上例中的showPrice一样。
我们通常所说的JSONP服务(远程JSON服务),实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。
然后执行这个函数,处理JSON数据,并显示在客户页面上。
JQuery的JSONP支持
从JQery 1.2以后,就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称,你就可以用下面的形式来就加载JSON数据。
url?callback=?
示例:
jQuery.getJSON(url + "&callbak=?", function(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
});
jquery会在window对象中加载一个全局的函数,当代码插入时函数执行,执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下
那么他就会像正常的Ajax请求一样工作。
上例中我们在动态插入到页面的代码中使用了静态的json数据,虽然完成了依次JSONP返回,但仍不是JSONP服务,因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法
服务器端使用PHP。
首先我们来定义接口的规范,就像这样:http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是请求条件,callback是回调函数名称。
在页面文件中,我们使用JQuery的支持:
//JQuery JSONP Support
var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";
jQuery.getJSON(url, function(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
});
在suggest.php中
$jsondata = "{symbol:'IBM', price:120}";
echo $_GET['callback'].'('.$jsondata.')';
现在,如果我们想制作一些mashup,或者将第三方的资源整合到一个页面中,我们就很容易想到JSONP的解决方法了。
现有的JSONP服务
既然我们已经知道如何使用JSONP,那么我们也就可以使用一些现有的JSONP服务了,下面是一些例子:
Digg API:http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
Geonames API:http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr
API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
注意:
JSONP是一个非常强大的构建mashp的方法,可是不是一个解决跨域访问问题的万能药。它也有一些缺点
第一也是最重要的:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求
另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。
[参考资料]
1、Cross-domain communication with jsonp http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
分享到:
相关推荐
ajax跨域请求,jquery.jsonp插件
jquery-jsonp插件
jQuery-JSONP jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 ... 例如,从 2.3.0 版本开始,$.jsonp() 在与 jQuery 1.5+ 结合使用时会返回一个 prom
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON...
终于找到了一个好用的jquery-jsonp插件,可以完美的支持jsonp请求。可以完美的支持jsonp请求。
主要介绍了jQuery使用jsonp实现百度搜索,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
jQuery+JSONP+artDialog 实现虾米音乐的检索、选取和播放
主要介绍了jQuery中JSONP的两种实现方式详解的相关资料,需要的朋友可以参考下
跨域,就是在一个域中访问另一个域的数据。 如果只是加载另一个域的内容,而不需要访问其中的数据的话,跨域是很简单的,比如使用iframe。但如果需要从另一个域加载并使用这些数据的话,就会比较麻烦。为了安全性,...
NULL 博文链接:https://bijian1013.iteye.com/blog/2179338
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
一个jquery文件,适合学习参考应用jquery轻量级
本文将给您介绍如何使用getJSON来实现异步跨域提交表单
主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下
php if (isset($_GET[‘jsonpcallback’])){ echo $_GET[‘jsonpcallback’].”([{id:1,name:’aaaa1′},{id:2,name:’bbbb2′}])”; exit; } ?> <html> [removed][removed] [removed] $(function(){ $....
jQuery-JSONP是一个支持 JSONP 调用的 jQuery 插件,使用它是因为它支持出错时的 ajax 回调,而 jQuery 的 $.ajax 不支持,我们已经在实际项目中使用,在开始使用时遇到了2个问题,在这里记录并分享一下。
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript callback...下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料,需要的朋友可以参考下。