使用 web 代理实现 Ajax 跨域调用



http://www.oschina.net/translate/use-a-web-proxy-for-cross-domain-xmlhttprequest-calls

XMLHttpRequest对象(在IE中是XMLHTTP)处于当今最令人兴奋的AJAX Web应用程序的核心地位。但是实际上使用这个对象编写客户端web应用程序将会受到网络上web浏览器对跨域链接的限制。这个指南提供了对这个问题的简单描述,容易理解的语言还有一种可能的解决方案:一种web代理,可以中继转发网络请求,它来自于你的web服务器上的服务,比如yahoo的WebService的API。

  • 为什么你需要一个代理
  • Yahoo WebService 的 PHP 代理
  • 其他解决方案
  • 更多的信息

leoxu
leoxu
翻译于 4年前
1人顶
 翻译得不错哦!

你为什么需要一个代理

所有现代浏览器都在网络连接上添加了限制,这包括对于XMLHttpRequest的调用。这种限制阻止一段脚本或者应用程序在最初的页面之外,再向任何web服务器请求连接(如果配置[preferences]中的选项已经被开启,IE将会允许跨域的请求)。如果您的程序使用的web应用程序和XML数据都来自同一个服务器,那么您不会遇到这种限制。

使用 web 代理实现 Ajax 跨域调用_第1张图片

但是如果您的web应用程序来自一个web服务器,并且您让向另外一个服务器请求WebService数据——例如,对于Yahoo的WebService来说——浏览器会阻止链接被打开。这就糟糕了。

使用 web 代理实现 Ajax 跨域调用_第2张图片

leoxu
leoxu
翻译于 4年前
1人顶
 翻译得不错哦!

这个问题有很多中解决方案,但是最普遍被使用的一种是在你的web服务器上面安装一个代理。您向您web服务器的代理发出请求,而不是直接向WebService发出XMLHttpRequest调用请求。然后代理吧调用请求传递到WebService,随后向您的客户端应用程序传递返回数据。由于连接是由您的服务器发起的,而且数据返回也是来自于您的服务器,浏览器也就没什么好抱怨的了。

使用 web 代理实现 Ajax 跨域调用_第3张图片

处于安全方面的考虑,限制安装在您的web服务器的代理的使用是一个好主意。一个向任何web站点的URL传递连接的开放代理容易被滥用。尽管限制只从您自己的应用程序才能您的代理发起连接是困难的,您可以防止您的代理向除了您指定的服务器以外的其他服务器发起连接。硬编码要连接的URL到代理自身中,或者提供限制的选项。这就使得您的代理对除了您的客户端应用程序以外的其它用户更加封闭更加不可用。

leoxu
leoxu
翻译于 4年前
1人顶
 翻译得不错哦!

在Yahoo的开发者网络JavaScript Developer Center我们提供了使用PHP编写的一个simple web proxy示例代码,它使用了Yahoo搜索API的请求。您可以在您的web服务器中任何合适的位置安装这个代理(您的web服务器必须被设置成可以运行PHP)。

这个代理将Yahoo的WebService站点URL编码成一个称作HOSTNAME的全局变量。您需要修改这个变量以引用您将会使用的Yahoo的WebService API。它会是Yahoo搜索WebService的域(名);其他的(域)有Yahoo Local(http://local.yahooapis.com)和Yahoo Travel (http://api.travel.yahoo.com)

define ('HOSTNAME', 'http://search.yahooapis.com/');
leoxu
leoxu
翻译于 4年前
1人顶
 翻译得不错哦!

在您的客户端应用程序中使用PHP web代理,在你Javascript代码中请求的URL包含Yahoo WebService的路径,不包括域名。域名已经包括在了服务器端的代理自身之中。这段代码来自于我们的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请求,实例中的PHP web代理也能支持POST方式的请求。

你可以修改代理处理你以POST方式从服务器端请求到的数据,例如,剥离出你只感兴趣的元素或者将XML解析成一种你能方便的使用JavaScript处理的形式。

leoxu
leoxu
翻译于 4年前
1人顶
 翻译得不错哦!

其他解决方法

除了使用给一个web代理传递WebService的数据到您的应用程序,您还有一些其他选择:

使用apache的mod_rewrite或者mode_proxy从您的服务器传递请求到其他的服务器。在您的客户端代码中您只要使您的请求看上去是来自于您自己的服务器——从而不会让浏览器抱出了啥问题。然后Apache魔术般的为你执行了对其他服务器的请求。

使用JSON和动态

你可能感兴趣的:(Ajax,前端)