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

核心提示： 清单 11 所示代码首先拉取 NYT RSS 提要的 title 和 link 元素，随后将包括正文链接的 p 元素附加到小部件的内容区，使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(8)，最终得到的内容区 HTML

清单 11 所示代码首先拉取 NYT RSS 提要的 title 和 link 元素。随后将包括正文链接的 p 元素附加到小部件的内容区。最终得到的内容区 HTML 代码如清单 12 所示。

清单 12. 第二个小部件的 HTML 代码

<div　id="headlines"　class="widget-content">　
　<p>　
　　<a　target="_blank"　href="http://www.nytimes.com/2009/02/19/business/19housing.html　
　　?partner=rss&emc=rss">Obama　Unveils　$75　Billion　Plan　to　Fight　Home　Foreclosures</a>　
　</p>　
　<p>　
　　<a　target="_blank"　href="http://www.nytimes.com/2009/02/19/business/economy/19fed.html　
　　?partner=rss&emc=rss">Fed　Offers　Bleak　Economic　Outlook</a>　
　</p>　
　...　
</div>　

第三个小部件

第三个小部件与前两个差别不大。但需要将 item.description 元素直接附加到内容区，因为其中包含的已经是 HTML 格式的数据。

清单 13. 第三个小部件的 JavaScript 代码

var　yqlUrl3=　"http://query.yahooapis.com/v1/public/yql?q=　
　select%20*%20from%20weather.forecast%20where%20location%3D10504&　
　format=json&callback=?";　
$.getJSON(yqlUrl3,　function(data){　
　$.each(data.query.results.channel,　function(index,　item){　
　　$('#weather')　
　　.append($('<p/>').html(item.description));　
　});　
});　

考虑到完整性，我们在清单 14 中整合了上述所有内容（除了用于确定小部件样式的 CSS）。

编缉推荐阅读以下文章

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