jquery结合JSONP教程—明河谈jquery

发布于,归属于jquery教程3个座位已被强势霸占! 共有897人围观    

今天群里的布川せ酷子童鞋向偶询问在juqery下jsonp的问题,借此机会写个关于jquery结合jsonp的教程。

1、什么是jsonp?

Ajax技术现在非常的盛行,但javascript的跨域问题一直是个问题,而jsonp的出现算是比较好的解决方案。

关于jsonp最详细的介绍请看:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

jsonp的基础知识上面这个页面已经非常详细了,不再重复。接下来重要演示jquery下jsonp的使用。

2、jquery与jsonp

jquery已经可以完美的使用jsonp,而且一如既往的便利。

$.getJSON()

这是最关键的函数,返回json数据,与其他的ajax门面函数类似,比如$.get(),$.getScript()等,但有个非常不一样的地方。来看下面代码

  1. jQuery.getJSON("http://api.zuosa.com/statuses/public_timeline.json?callback=?", function(data) {
  2.     alert(data);
  3. });

这里我使用微博做啥网的一个API,public_timeline.json返回json数据。
这里留意的是callback=?,非常关键的点,jQuery 自动将 ? 替换为要调用的生成函数名,所以callback相当于一个接口,是解决跨域的关键。后面的?是必须的。
运行后如图:

那么实际返回的json数据是什么情况呢?请看下面的截图:

数据太多了,可以运行下demo然后用firebug查看。
现在的firebug可以查看格式化的json数据,效果如下:

点击进去后可以查看的到详细的单条json数据,如下:

实际过程就是这么简单,可以在回调函数中对数据进行操作。
我在demo页面里面输出了,一个列表,有兴趣的可以参考下代码。

点此下载

关于服务器端生成jsonp请看,IBM那个介绍页面。

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

3个座位已被强势霸占!

  1. hiro

    公司的项目中已经使用到了

  2. 残梦

    请问,我要是想跨域读取XML 可以用这个吗

    明河回复于 2011年04月25日 10:08

    你好,跨域读取XML,需要通过代理php把xml读到同域下,然后该域页面读取这个代理php的内容。除了这个办法,目前没有其他好的方式。