Page 82 - JavaScript修炼之道

72 第五部分 服务器端技术

任务 32 跨域“Ajax”（方法收集 2）

除了前一个任务中的方法，还有几种后台访问其他域名的远程内容的办法。初学者可以用可
靠的JSON-P。有一种JSON-P的有趣用法可用来访问大量的服务、API和内容，这就是Yahoo!提供
的YQL服务。YQL允许你读（有时还可以写）一些数据表，它们可以映射到你能想象的所有可能
的资源：著名的网站和各种服务（包括搜索、地图、地理定位、社交网络、Flickr、音乐库、天
②
③
气、feed 、微格式 等）。要是你还没玩过这些的话，现在赶紧去看看吧。
①
YQL提供两个巨大的“数据库表”，分别叫做html和htmlpost（后者是由Chris Heilmann提供的
社区维护的表，因此它完胜前者），可以任意访问资源，然后得到其原始HTML响应。它们允许你
把数据GET或者POST到一个返回HTML的资源，甚至还可以通过XPath 选择器把内容提取出来。
④
此外，还有另一种非常好的办法—— CSSHttpRequest。不过，它需要服务器端的配合。这
⑤
得靠data：可以先把内容放在URI Scheme 里，然后再放在特定名称的CSS规则中。因为CSS文
件不受同源策略的限制，所以这能管用。有个很小的开源库提供了CSSHttpRequest这个
⑥
JavaScript对象，以及Ruby、Python和PHP的服务器端代码（很容易移植到其他语言中） 。你可
⑦
以通过网络获取更多细节 。
你可以用本书代码库中这个任务的示例代码来试试上面提到的所有远程访问的办法。
另外，再概述一下两种我有意没放在前面的办法，这样你就不会说我忘了它们。第一个方法
是使用Flash桥。虽然这种方法需要服务器端提供某种形式的CORS信息，但有一个称为flXHR的
库，使得这个操作变得相当容易。不过，Flash正巧是我不怎么喜欢的私有技术，就算不考虑这一
点，仅仅为跨域远程访问就载入Flash也可以说是“杀鸡用牛刀”了。

最后，你也可以利用一个“Web的bug”，即利用普通的<img>标签（把你的脚本代码放在里
面）在动态选中的图片上进行服务器端调用。不过问题在于，你只能基于图片的长和宽这两个数
来传递响应信息，而且要在图片载入之后检测出原来的图片大小是相当麻烦的。考虑到其响应数
据如此有限，还得要克服那么多的困难，我就不用这个办法了。
——————————
① 网站提供更新信息的接口，常见的feed格式有RSS、Atom两种。详见wiki: http://zh.wikipedia.org/wiki/消息来源。
中文译名有消息源、订阅源、网源等。本译文保留原单词。*
② 一种对Web数据添加人机可读的语义标记的开放方法。详见wiki: http://zh.wikipedia.org/wiki/微格式。*
③ 参见http://developer.yahoo.com/yql/。
④ XML路径语言（XML Path Language），用“/A/B/C”这种写法来定位XML文档结点。*
⑤ URI Scheme是指URI的格式，写法是 <scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]，比如在
http://163.com/ 这个URI中，http属于<scheme name>，//163.com/ 属于< hierarchical part >。*
⑥ 客户端只需调用CSSHttpRequest.get(url, callback)，服务器端返回注6中那样的CSS编码，之后<data>会传
给callback这个函数。*
⑦ 参见http://nb.io/hacks/csshttprequest。