使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)
简介
在本系列的第 1 部分中，我们介绍了 JSONP 是一种有效的跨域通信技术，允许您绕过当前浏览器带来的同源策略限制。我们为您展示了如何利用 jQeury 的本地 JSONP 支持，从称为 JSONP 服务的第三方服务收集 JSON 格式的内容。这篇文章将介绍 Yahoo! 查询语言（YQL），这种单端点的 JSONP 服务允许您查询、过滤和合并来自不同数据源的数据。
此外，本文还会为您介绍如何构建一个 mashup 应用程序的 jQuery 实现，该应用程序可收集股票报价、纽约时报?RSS 提要和气象预报数据，并将其显示在一个 Web 页面中。
将 Web 作为数据库
Web 上有许多结构化数据，通过多种多样的 Web 服务或 API 公开给开发人员。这些服务需要您进行访问和查询，随后以非标准化的方式解析结果。每种服务都有自己的访问 URL 以及描述如何查询和理解结果的文档。可将 YQL 视为一种标准的方法，查询由不同 URL 的不同服务提供的数据。YQL 提供了单端点服务，允许您在 Web 上过滤和合并数据，而不必处理各种服务的特质。
YQL 基本上就是一种基于 SQL 的查询语言，允许以标准的方式从多个服务中查询和检索结构化数据。但 YQL 也是一种由 Yahoo! 托管的查询引擎，在 REST 端点公开。YQL 使用人们熟悉的表格与行的关系数据库模型。但数据在内部是以 XML 的形式解释和结构化的。如果底层数据源未提供 XML 数据，YQL 会进行转换。它以 XML 或 JSON 的形式返回响应（您可在调用服务时指定）。此外，如果您向服务请求 JSON 数据，还可指定回调函数。这使 YQL 服务成为了一种 JSONP 服务，最重要的是：它为众多 Web 服务引入了自动化 JSONP 支持。
YQL 可理解和支持的数据源包括：RSS、Atom、JSON、XML、CSV、HTML、Flickr、Yahoo! Finance、Weather 等。由于 YQL 也支持外部数据源（Yahoo! 以外的数据源），因而就有了构建 mashup 应用程序的无限种可能性。可以说，它在单独一个界面内将 Web 与您的应用程序相连。
?上文已经提到过，YQL 是一种类似于 SQL 的语言，可在 Web 中查询结构化数据。因此，SELECT?是 YQL 语句中的主要动词。其语法也与 SQL 极为相似：
上面的查询会返回类似于清单 1 的 JSON 响应（忽略所返回的关于查询的元数据）。
清单 1. JSON 查询响应?回页首
使用 jQuery 查询 YQL
典型 YQL?
GET?请求形式如下：回页首构建 mashup
您已经了解了如何通过 YQL 查询和获得 JSONP 响应，下面就可以开始构建 mashup Web 页面了。我们将开发一个带有三个小部件的 Web 页面，各个小部件分别从 Web 的不同部分获取内容，但使用的是相同的统一服务 —— 即 YQL。
第一个小部件是股票报价小部件，查询并检索 IBM?、Yahoo!、Google 和 Microsoft? 的最新股票报价。此查询的数据源是 Yahoo! Finance CSV 文件。清单 3 显示了第一个小部件的 YQL 代码。
清单 3. 第一个小部件（股票报价）的 YQL 代码每个小部件都是类类型为?
widget?的一个?div?元素，具有头部（widget-head）和内容区（widget-content）。小部件的内容区由您的 JavaScript 代码填充，拉入 JSONP 数据并将其附加到小部件的内容部分。构建 mashup Web 页面时，首先要定义三个小部件占位符：一个用于股票报价、一个用于纽约时报新闻、一个用于气象预报。如清单 7 所示。
清单 7. 小部件占位符请注意，内容区保留为空，因为您要使用 JSONP，用动态数据填充内容区。很快您就会看到，jQuery 使得动态生成 HTML 片段变得极为简单。这些区域中的每一个都将由清单 8 所示的 jQuery 主干代码填充。
清单 8. jQuery 主干代码第一个小部件清单 9 展示了填充股票报价小部件内容的第一个 jQuery 代码段：
清单 9. 第一个小部件的 JavaScript 代码第二个小部件完成第一个小部件后，继续处理第二个。
清单 11. 第二个小部件的 JavaScript 代码清单 11 所示代码首先拉取 NYT RSS 提要的?
title?和?link?元素。随后将包括正文链接的?p?元素附加到小部件的内容区。最终得到的内容区 HTML 代码如清单 12 所示。
清单 12. 第二个小部件的 HTML 代码第三个小部件
第三个小部件与前两个差别不大。但需要将?
item.description?元素直接附加到内容区，因为其中包含的已经是 HTML 格式的数据。
清单 13. 第三个小部件的 JavaScript 代码图 3 展示了在撰写本文时所得到的 Web 页面屏幕快照。
图 3. 示例 mashup 页面?
回页首
结束语
YQL 是一种强大的服务，使您可在无需利用服务器端代理的前提下实现客户端 mashup。与其 JSONP 支持和 jQuery 相结合，YQL 允许您通过一个统一的界面访问 Web 上的结构化数据。在这篇文章中，您了解了如何使用 jQuery 和 YQL，通过短短几行代码构建一个 mashup Web 页面。您可在此代码的基础上加以改进完善。下面是一些提示：
?