JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法。
getJSON的用法JQuery手册已经写得很详细,参考手册就可以了,很简单。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。
- 客户端传递的URL里要包含callback变量,以形如callback=?的形式结尾。(jquery会随机生成一个字符串替换?传递给服务端)
- 服务端获取客户端传递的callback的值callbackValue,和需要传递的json字符串构成 callbackValue.’(’.json.’)'传回给客户端(示例为PHP字符串连接方式,其他语言类似)
不出意外的话应该已经可以跨域读取了。
同时输出json数据时候{之前的是(
的中,由于安全的问题,浏览器默认是不支持跨域调用的。传统的方法,包括:(参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/)
Local proxy:Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).Flash:Remote host needs to deploy a crossdomain.xml file,Flash is relatively proprietary and opaque to use,requires learning a one-off moving target programming langage.Script tag:Difficult to know when the content is available,no standard methodology,can be considered a "security risk".以上方法都各有缺陷,都不是很好多解决方案。后来出现了一种叫JSON with Padding的技术,简称JSONP.(原理参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/),应 用JSONP可以实现JSON数据的跨域调用。非常的幸运,JQuery1.2以后支持JSONP的应用。下面侧重说明在JQuery中,Json的跨域调用。
应用JSONP实现Json数据跨域调用,需要端与客户端的合作完成。引用Jquery官方的例子,客户端掉用如下:
1 |
$.getJSON( " http://api.flickr.com/services/Feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=? " , |
2 | function (data){ |
3 | $.each(data.items,(i,item){ |
"<img/>"
).attr(
"src"
"#images"
);
5 | if( i == 3 ) return false ; |