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

核心提示： 那么，如果要构建 mashup 应该怎么办，使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(6)，是从第三方服务器收集内容，并在单一的 Web 页面中显示它们吗？答案很简单：您必须使用第三方 JSONP 服务，这种单端点 JSON

那么，如果要构建 mashup 应该怎么办，是从第三方服务器收集内容，并在单一的 Web 页面中显示它们吗？答案很简单：您必须使用第三方 JSONP 服务。这种服务并不少。

现成的 JSONP 服务

知道如何使用 JSONP 之后，可以开始使用一些现成的 JSONP Web 服务来构建应用程序和 mashup。下面为接下来的开发项目做准备。（提示：您可以复制特定的 URL 并将其粘贴到浏览器的地址栏，以检查生成的 JSONP 响应）。

Digg API：来自 Digg 的头条新闻：

http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript　
&callback=?　

Geonames API：邮编的位置信息：

http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr API：来自 Flickr 的最新猫图片：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any　
&format=json&jsoncallback=?　

Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：

http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza　
&zip=10504&results=2&output=json&callback=?　

重要提示

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

结束语

在该系列的第一篇文章中，我们讲解了如何结合使用 JSONP 和 jQuery 快速构建强大的 mashup。主要主题包括：

浏览器同源策略的限制以及解决办法

作为一种有效的跨域通信技术，JSONP 能够绕过当前浏览器的同源策略限制

JSONP 使 Web 应用程序开发人员能够快速构建 mashup

示例 JSONP 服务及其使用：Ticker 服务

本系列的下一篇文章将介绍 Yahoo! 查询语言（YQL），这种单端点 JSONP 服务允许您跨 Web 查询、过滤和合并数据。最后还使用 YQL 和 jQuery 构建 mashup 应用程序。

编缉推荐阅读以下文章

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