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

核心提示： 在 jQuery 中，典型的 YQL 服务调用如清单 2 所示，使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(4)，清单 2. jQuery 中典型的 YQL 调用jQuery.getJSON(yqlUrl,func

在 jQuery 中，典型的 YQL 服务调用如清单 2 所示。

清单 2. jQuery 中典型的 YQL 调用

jQuery.getJSON(yqlUrl,　function(data)　{　
//　data　is　the　JSON　response　
//　process　the　response　here　
});　

构建 mashup

您已经了解了如何通过 YQL 查询和获得 JSONP 响应，下面就可以开始构建 mashup Web 页面了。我们将开发一个带有三个小部件的 Web 页面，各个小部件分别从 Web 的不同部分获取内容，但使用的是相同的统一服务 —— 即 YQL。

第一个小部件是股票报价小部件，查询并检索 IBM®、Yahoo!、Google 和 Microsoft® 的最新股票报价。此查询的数据源是 Yahoo! Finance CSV 文件。清单 3 显示了第一个小部件的 YQL 代码。

清单 3. 第一个小部件（股票报价）的 YQL 代码

select　symbol,　price　from　csv　
　where　url='http://download.finance.yahoo.com/d/quotes.csv?　
　s=IBM,YHOO,GOOG,MSFT&f=sl1d1t1c1ohgv&e=.csv'　and　
　columns='symbol,price,date,time,change,col1,high,low,col2'　

第二个小部件显示纽约时报 RSS 提要的标题，通过清单 4 所示的 YQL 代码获取数据。

清单 4. 第二个小部件（RSS 提要）的 YQL 代码

select　title,　link　from　rss　
　where　url="http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"　

第三个也是最后一个小部件是气象预报小部件，如清单 5 所示，显示邮编 10504 地区的气象预报（纽约 Armonk）：

清单 5. 第三个小部件，气象预报

select　*　from　weather.forecast　where　location=10504

编缉推荐阅读以下文章

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