使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup

核心提示： 清单 8. jQuery 主干代码$.getJSON(yqlUrl,function(data){//loopthroughtheitems$.each(data.query.results.[ITEMNAME],function(index,item){//processeachitemher

清单 8. jQuery 主干代码

$.getJSON(yqlUrl,　function(data){　
　//　loop　through　the　items　
　$.each(data.query.results.[ITEM　NAME],　function(index,　item){　
　　//　process　each　item　here　
　　//　generate　HTML　to　append　to　the　widget's　content　area　
　});　
});　

清单 8 所示的代码向 yqlUrl（您必须提供）发出 GET 请求，并拉取 JSONP 响应。JSONP 响应到达之后（我们称之为 data），您就可以遍历结果项，逐个加以处理。[ITEM NAME] 是占位符，代表结果项数组，根据数据源的不同，该数组可能具有不同的名称。使用上文提到的 YQL 控制台查看得到的响应，确定正确的响应结构。

第一个小部件

清单 9 展示了填充股票报价小部件内容的第一个 jQuery 代码段：

清单 9. 第一个小部件的 JavaScript 代码

var　yqlUrl1=　"http://query.yahooapis.com/v1/public/yql?q=　
　select%20symbol%2C%20price%20from%20csv%20　
　where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes.csv%3F　
　s%3DIBM%2CYHOO%2CGOOG%2CMSFT%26f%3Dsl1d1t1c1ohgv%26e%3D.csv'%20and%20　
　columns%3D'symbol%2Cprice%2Cdate%2Ctime%2Cchange%2Ccol1%2Chigh%2Clow%2Ccol2'　
　&format=json&callback=?";　
$.getJSON(yqlUrl1,　function(data){　
　$.each(data.query.results.row,　function(index,　item){　
　　$('#quotes')　
　　.append(　
　　　$('<p/>')　
　　　　.append($('<span　class="left"/>').text(item.symbol))　
　　　　.append($('<span　class="right"/>').text('$'+item.price))　
　　　);　
　　});　
});　

编缉推荐阅读以下文章

• 使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup