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

核心提示： 如何为第一个小部件获得经过合理加密的 URL？查看 YQL 控制台时，您会在屏幕右上角看到一个标题为 “The Rest query” 的部分，使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(7

如何为第一个小部件获得经过合理加密的 URL？查看 YQL 控制台时，您会在屏幕右上角看到一个标题为 “The Rest query” 的部分。成功测试 YQL 语句后，应复制此处的查询字符串，并将其作为 getJSON() 函数的第一个参数。

股票报价小部件会遍历结果项，将包含两个 span 元素的 p 元素附加到由 id #quotes 标识的 div 元素中。最终得到的内容区 HTML 代码如清单 10 所示。

清单 10. 第一个小部件的 HTML 代码

　<div　id="quotes"　class="widget-content">　
　<p>　
　　<span　class="left">"IBM"</span>　
　　<span　class="right">$91.51</span>　
　</p>　
　<p>　
　　<span　class="left">"YHOO"</span>　
　　<span　class="right">$12.22</span>　
　</p>　
　<p>　
　　<span　class="left">"GOOG"</span>　
　　<span　class="right">$353.11</span>　
　</p>　
　<p>　
　　<span　class="left">"MSFT"</span>　
　　<span　class="right">$18.12</span>　
　</p>　
</div>　

第二个小部件

完成第一个小部件后，继续处理第二个。

清单 11. 第二个小部件的 JavaScript 代码

var　yqlUrl2=　"http://query.yahooapis.com/v1/public/yql?q=　
　select%20title%2C%20link%20from%20rss%20　
　where%20url%3D%22http%3A%2F%2Fwww.nytimes.com%2Fservices%2Fxml%2Frss%2Fnyt%2F　
　HomePage.xml%22&format=json&callback=?";　
$.getJSON(yqlUrl2,　function(data){　
　$.each(data.query.results.item,　function(index,　item){　
　　$("<a　href='"　+　item.link　+　"'　target="_blank\"/>")　
　　.html(item.title)　
　　.appendTo($('#headlines'))　
　　.wrap('<p/>');　
　});　
});　

编缉推荐阅读以下文章

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