用网络来解决XMLHTTPRequest对象的跨域通信

XMLHttpRequest对象（在IE中是XMLHTTP对象）在当今大多数扣人心弦的ajax应用中处于核心的地位。但事实上用这个对象写的客户端程序会受到浏览器跨域问题的影响。本篇指南用通俗易懂的语言为我们提供了一个解决问题的办法：像Yahoo! Web Service APIs那样利用代理服务器程序来转化你对服务器端的请求。本文主要分以下四个部分：1、为什么需要用代理；2、Yahoo! Web Services用php实现代理；3、其他的解决方案；4、更多的信息。

1、为什么需要用代理

所有的现代浏览器在网络传输中都会有一个安全的限制，包括xmlhttprequest的通信。这种安全限制可以防止脚本或者应用程序在两台不同的服务器之间进行通信（在IE中如果你根据自己的偏好关闭了这个选项则不受到这个问题的影响）。如果你的web应用程序和XML数据源直接来自同一台服务器是不会出现以上的问题。

但是如果你将web应用程序存放在一台服务器上而对另一台服务器进行数据请求，例如雅虎的Yahoo! Web Services，那么浏览器就会阻止这之间的数据通信。

有很多办法来解决这个问题，最常用的做法是对你的服务器安装一个代理程序。你通过代理程序和服务器进行通信而不是直接用XMLHTTPRequest对象和服务器通信。代理服务程序和服务器进行通信后再将数据返回给客户端应用程序。因为这时通信是在你和你的web服务器间进行的，而数据也来自你的web服务器，所以对浏览器器而言并没有什么好抱怨的。

从安全上考虑，对任何安装在你web服务器上的代理进行限制使是一个好主意。一个通过开放的网站的URL链接的代理是很容易被滥用的。限制代服务器的应用（尽管这很困难）可以阻止代理服务程序链接到其他你指定意外的服务器上。利用固定的URL链接到代理服务器本身或者仅提供有限的选择可以使代理除了你客户端应用外对其他其它的用户端的应用提供较少的支持。

2、雅虎Yahoo! Web Services的PHP代理程序

对于雅虎而言，我们JavaScript网络开发中心已经提供了一个用PHP脚本实现的简单代理服务的样品代码。你可以将代理程序安装在你任何合适的服务器上。（你的服务器必须能运行PHP程序）需要修改这个变量指向你将要使用的Yahoo! Web Services API 。这是雅虎搜索服务器所使用的域名。其他域名包括Yahoo! Local (http://local.yahooapis.com) 和Yahoo! Travel (http://api.travel.yahoo.com).

define (’HOSTNAME’, ‘http://search.yahooapis.com/’);

代理编码在一个叫HOSTNAME的全局变量中的Yahoo的Web服务站点的URL。这个域名由在服务器端的代理程序自己去添加。这个代码片段来自javascript开发中心一个更完整的XMLHttpRequest代码样本。


// The web services request minus the domain name
var path = 'VideoSearchService/V1/videoSearch?appid=YahooDemo&query=madonna&results=2';// The full path to the PHP proxy
var url = 'http://localhost/php_proxy_simple.php?yws_path=' + encodeURIComponent(path);
... // core xmlhttp code
xmlhttp.open('GET', url, true);

要注意的是，尽管这个例子用了HTTP GET方式进行请求，样本代码同样也支持POST方式的请求。

你可以通过修改代理程序对从服务器端请求过来的数据进行进一步的操作。比如只选出你感兴趣的元素或者将XML格式成为javascript更容易操控的格式。

3、其他的办法

除了在服务器和应用程序之间增加代理意外还有一些办法可以解决浏览器的跨域问题。

• 使用Apache的mod_rewrite或者mod_proxy机制把请求从你的服务器传递到其他的服务器，那么这样一来，在你的客户端代码中你仅仅发送你的请求就只当它实际就在你的服务器上一样。–这不会遇到任何浏览器的跨域问题。apache神奇地将这些请求转给了他们的服务器。

• 使用JSON的和动态<script>标签，而不是XML和XMLHttpRequest.你可以将向服务器段的请求直接写在动态脚本标签里从而绕开开浏览器的安全性问题。

4、更多信息

更多关于JavaScript, XMLHttpRequest, Yahoo! Web Services APIs 和其他javascript开发方面的话题请参阅雅虎开发中心，javascript开发中心。