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

核心提示： 在 Web 页面中，各小部件具有如清单 6 所示的主干代码，使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(5)，清单 6. 各小部件的主干代码<divclass="widget">&l

在 Web 页面中，各小部件具有如清单 6 所示的主干代码。

清单 6. 各小部件的主干代码

<div　class="widget">　
　<div　class="widget-head">[WIDGET　HEADER]</div>　
　<div　class="widget-content"　id="[CONTENT　ID]">[WIDGET　CONTENT]</div>　
</div>　

每个小部件都是类类型为 widget 的一个 div 元素，具有头部（widget-head）和内容区（widget-content）。小部件的内容区由您的 JavaScript 代码填充，拉入 JSONP 数据并将其附加到小部件的内容部分。

构建 mashup Web 页面时，首先要定义三个小部件占位符：一个用于股票报价、一个用于纽约时报新闻、一个用于气象预报。如清单 7 所示。

清单 7. 小部件占位符

<div　class="widget">　
　<div　class="widget-head">Lastest　stock　quotes</div>　
　<div　class="widget-content"　id="quotes"></div>　
</div>　　
<div　class="widget">　
　<div　class="widget-head">NYT　news　headlines</div>　
　<div　class="widget-content"　id="headlines"></div>　
</div>　　
<div　class="widget">　
　<div　class="widget-head">Weather　for　Armonk　NY</div>　
　<div　class="widget-content"　id="weather">　</div>　
</div>　　

请注意，内容区保留为空，因为您要使用 JSONP，用动态数据填充内容区。很快您就会看到，jQuery 使得动态生成 HTML 片段变得极为简单。这些区域中的每一个都将由清单 8 所示的 jQuery 主干代码填充。

编缉推荐阅读以下文章

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