ajax 跨域

guoyiqi

浏览: 1009791 次

最近访客更多访客>>

wry3407

zzc125

bingjava

秋天你慢慢来

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax json JavaScript Web 浏览器

使用动态的script标签发起Web Services请求

使用动态的script标签和特殊的与JSON相关的JavaScript类来轻松实现无XML的Web services。

从Ajax应用发起到第三方Web服务的请求是一种痛苦，但是新的Web服务减轻了这种痛苦，它提供了返回JSON格式[Hack #7]结果的选择以代替XML格式。事实上，如果你使用动态script标签方法发起Web服务请求，而且Web服务可让你指定一个JavaScript回调函数，你就可以以一种无缝的跨域跨浏览器的方式自由访问Web服务。

下面是你尝试这个动态的script标签请求所需要的：

l 我的JSONscriptRequest类

l 访问返回JSON格式结果并可让你指定回调函数的Web service

为创建JSONscriptRequest类，我提炼了大量已有的信息，然后调整其以满足上面的第二个要求。直到最近，要找到满足那个要求的Web service近乎不可能，除非你自己写一个。幸运的是，Yahoo!已经开始在它的许多Web service上提供其他的选择。特别地，Yahoo!的与很多搜索相关的Web service，以及它的geocoding、map image和traffic等Web service，现在可以返回封装在一个回调函数里的JSON值。

使用Geocoding Web Service

比起使用XMLHttpRequest对象和代理，这个东西算很容易的。JSONscript- Request类做了创建script标签的脏活；这个标签动态地发起实际的Web service请求。举个快速的例子，这里我将使用Yahoo!的Geocoding Web service，将一个邮编94107转化成一个经/纬对：

<html>

<body>

//包含JSONscriptRequest类

//定义回调函数

function getGeo(jsonData) {

alert('Latitude = ' + jsonData.ResultSet.Result[0].Latitude +

' Longitude = ' + jsonData.ResultSet.Result[0].Longitude);

bObj.removeScriptTag();

}

// web service 调用

var req = 'http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo

&output=json&callback=getGeo&location=94107';

//创建一个新的Request对象

bObj = new JSONscriptRequest(req);

//构建动态脚本标签

bObj.buildScriptTag();

//添加脚本标签到页面中

bObj.addScriptTag();

</script>

</body>

</html>

运行这个程序发起一个到Yahoo!的Geocoing Web service的请求，会弹出如图9-5所示的alert框。这个alert框显示了邮编94107的经度和纬度。

图9-5：从Yahoo的Geocoding Web service所得的坐标

Web service请示（上述script里的req变量）指出Web service应该返回JSON编码的数据(output=json)，而且数据应该被封装在一个名为getGeo()（callback=getGeo）的回调函数里。你可以剪切并粘贴代码中的URL到你的浏览器中，然后就会看到Web service的输出。输出如下：

getGeo({"ResultSet":{"Result":[{"precision":"zip","Latitude":"37.7668"

,"Longitude":"-122.3959","Address":"","City":"SAN

FRANCISCO","State":"CA","Zip":"94107","Country":"US"}]}});

这是一个有效的JavaScript语句，所以它可以是返回JavaScript的script标签的target（没有回调函数的原始JSON数据，不是有效的JavaScript语句，所以如果它作为script标签的target，那么就会载入失败）。作为比较，看一下这个调用的XML版本的输出（为这本书格式化过）：

<?xml version="1.0" encoding="UTF-8"?>

<ResultSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns=

"urn:yahoo:maps" xsi:schemaLocation=

"urn:yahoo:maps http://api.local.yahoo.com/MapsService/V1/GeocodeResponse.

xsd">

<City>SAN FRANCISCO</City><State>CA</State><Zip>94107</Zip>

</ResultSet>

JSONscriptRequest对象的buildScriptTag方法建立了如下的script标签：

"Latitude":"37.7668","Longitude":"-122.3959","Address":"","City":"SAN

FRANCISCO","State":"CA","Zip":"94107","Country":"US"}]}});"

type="text/javascript">

要实际执行Web service请求，script标签就要加到页面里去。addScriptTag方法将script标签附加到已经载入到你的浏览器窗口中的HTML页面里。这个动作引起了getGeo()函数的调用，同时JSON编码的数据被传送给这个函数。下面看看这个标签中最神奇的部分；它是使用JSON编码的数据而不是XML的副作用。当JSON编码的数据以字符串形式作为JavaScript函数的参数时，JavaScript解释器自动将JSON返回值转化成一个JavaScript对象。基本上，解析的步骤是自动完成的，你可以立即引用这些数据：

alert('Latitude = ' + jsonData.ResultSet.Result[0].Latitude +

' Longitude = ' + jsonData.ResultSet.Result[0].Longitude);

正反面

HTML script标签是自由访问基于浏览器的应用的最后边界。从你的角度看来，它可能是一个安全漏洞，或者是一个使富客户端更丰富的工具。然而，它最普遍的用处就是网络广告商使用它将多姿多彩的广告拉到你的网页中。

对于普通的Ajax或者Ajaj（Asynchronous JavaScript and JSON）开发者而言，动态script标签方法在某些场景下能使事情变得简单。然而，XMLHttpRequest对象仍然是更可靠的、灵活安全的请求机制（见表9-1）。

表9-1 XMLHttpRequest 与动态script标签对照表

XmlHttpRequest	Dynamic script tag
跨浏览器兼容性	No	Yes
强制的跨域浏览器安全	Yes	No
是否能接收HTTP状态码	Yes	No (fails on any HTTP status other than 200)
是否支持HTTP GET和POST	Yes	No (GET only)
能否发送/接收HTTP头	Yes	No
能否接收XML	Yes	Yes (but only embedded in a JavaScript statement)
能否接收JSON	Yes	Yes (but only embedded in a JavaScript statement)
是否提供同步和异步调用	Yes	No (asynchronous only)

script标签的主要优点在于它并不受Web浏览器跨域安全限制的束缚，以及比

XMLHttpRequest具备更好的浏览器兼容性。进一步来说，如果你的Web service碰巧提供了JSON输出以及一个回调函数，你可以从JavaScript应用中敏捷地访问Web service，而无需解析返回的数据。

在所有的最新浏览器中XMLHttpRequest都有效，但是IE的实现和其他主要浏览器稍微有所不同，从而需要一个兼容性层（例如Sarissa）来使其工作在所有浏览器上。XMLHttpRequest能接收原始的JSON数据，还可以接收XML、普通文本以及HTML。事实上，它能轻松地处理任何非二进制数据。它还能发送和接收独立的HTTP头部，可以执行HTTP GET和POST请求，同时支持同步和异步调用。一言以蔽之，如果你的Web service请求存在问题，譬如无效的XML或者一个服务器错误，XMLHttpRequest为程序员提供了解决这种情况的工具。

相比较而言，script标签提供很少的XMLHttpRequest能力。最值得注意的坏处是它不能优雅地处理错误。如果Web service返回无效的JavaScript语句给script标签，就会产生一个JavaScript错误。如果Web service返回封装在一个回调函数里的无效JSON数据，那么当无效的JSON数据被传给回调函数时会返回一个JavaScript错误。而且，如果你的Web service返回除200（成功）外的HTTP返回码，script标签会默默的失败。

事实上，script标签请求并不是在所有的浏览器上都以同一方式工作。事件处理机制（你如何等待标签来载入）有些不同。技术上来说，动态生成的script标签会异步载入，但是没有可靠的、跨平台的方式来等待script标签载入。微软的IE使用了这里描述的一个方法，而HTML4.0规范建议采用onload事件处理器（尽管它并不是在所有的浏览器上都可用）。

围绕script标签的安全问题也不能被忽视。下载到你的浏览器中的恶意脚本以与你页面中的其他脚本一样的权限级别运行。因此，恶意的脚本能够偷取你的cookies，或者滥用你在服务器端拥有的授权级别。这些恶意脚本能更轻易地使用script标签发送和接收偷来的数据。出于此原因，使用动态script标签方法的应用应该仔细检查。

有了这些缺点，程序员就不会一窝蜂地使用script标签来实现或重新实现Web service请求。然而它对于脚本应用来说仍然是一门有用的技术——可以轻易地从第三方检索非机密数据。

参考资料

JSONscriptRequest类：http://www.xml.com/2005/12/21/examples/jsr_class.zip；Yahoo! Web Services；Geocoding API：http://developer.yahoo.net/maps/rest/V1/ geocode.html。

配置Apache以处理跨域问题

配置Apache Web服务器使Apache模块能为Ajax域限制提供一个解决方案。

你也许已经知道，到目前为止，XMLHttpRequest不能自动跨域运行。例如，当你下载一个Web页面时，你不能使用Request对象对不同于那个Web页面所在域的其他域发起请求。幸运的是，有一个简单的解决方案能避免此限制——Apache Web服务器的mod_rewrite。“这个模块使用基于规则的重写引擎（基于一个正则表达式的解析器）来重写被请求的URL，”按照Apache的在线文档所说（可见http://httpd.apache.org/docs/1.3/- mod/mod_rewrite.html）。

跨域障碍

在我们阅读这个解决方案的描述之前，让我们来看看一系列示范性的函数，它们完成了XMLHttpRequest的相关工作：

function getXmlHttpObject(){

if (window.XMLHttpRequest)

return new XMLHttpRequest();

else if (window.ActiveXObject)

return new ActiveXObject("Microsoft.XMLHTTP");

else {

alert("XMLHttpRequest not supported!");

return null;

}

function handleHttpResponse() {

if (http.readyState == 4) {

results = http.responseText;

alert(results);

}

function doSomeStuff() {

var post_arg1 = document.my_form.post_arg1.value;

var post_arg2 = document.my_form.post_arg2.value;

var post_url = 'http://yahoo.com/form_do'

post_data = 'post_arg1=' + post_arg1 + '&post_arg2=' + post_arg2;

http.open("POST", post_url);

http.setRequestHeader('Content-Type',

'application/x-www-form-urlencoded; charset=UTF-8');

http.send(post_data);

http.onreadystatechange = handleHttpResponse;

return false;

}

var http = getXmlHttpObject();

你所见到的三个函数中的最后一个将被调用来执行HTTP请求。

现在，假设这个脚本在一个URL为http://premshree.org/form的HTML文件中。表单中的某些事件处理器（onBlur、onClick、onSubmit等）触发doSomeStuff()，它接下来发起一个请求到另一个域（yahoo.com）中的form_do。

注意包含表单和JavaScript的HTML文件域和执行动作（http://yahoo.com/ form_do）的文件域之间的不匹配之处。域的不匹配就是问题之源。

跨域的XMLHttpRequest工作

IE和基于Mozilla的浏览器处理跨域请求有所不同。你可以在IE中执行跨域请求；然而，这需要改变浏览器默认的安全设置，或者添加特定的主机到你的“信任主机”列表中。可见http://msdn.microsoft.com/msdnmag/issues/02/06/web/：

由于没有一种方法指定哪些页面应该信任其他页面来访问它们的数据，Internet Explorer简单地规定如果两个页面不在同一个域中，它们就不能通信。更确切地说，Zone Manager（可在IE设置的安全项里找到）允许用户设置一个页面可以访问另一个页面，但是如你所知，大多数用户并不做设定，而只是在弹出窗口时才设置。你可以建议用户将页面添加到信任站点区域，或者仅仅在对话框中点Yes……

另一方面，在Mozilla中有签名脚本的概念（可见http://www.mozilla.org/projects/- security/components/signed-scripts.html）。在基于Mozilla的浏览器中，根据包含在跨域请求中的不同域，你应该赋予一个或更多的UniversalBrowser权限。例如，如果你正从本地文件系统访问一个远程主机，也就是说从file://访问http://，你应该开启UniversalBrowserRead权限。

现实的情形是，跨域的XMLHttpRequest请求在你真正在乎的浏览器中并不能

按照你想要的运行方式工作（当然除非你足够疯狂，强迫天真的、信任你的用户处理诸如签名脚本以及信任主机这样的事情）。

存在解决方案吗

是的，感谢一些mod_rewrite的魔法。你所需要的就是RewriteRule指令。

需要对Apache配置文件做出一些配置变化（通常是httpd.conf）。下面就是包含的步骤：

1. 配置Apache，开启proxy：

./configure –enable-proxy

2. 确信开启了RewriteEngine：

RewriteEngine on

3. 添加以下规则：

RewriteRule ^/form_do$ http://yahoo.com/form_do [p]

这里你所见的P标志表示一个pass-through proxy。

提示：可见http://www.google.com/search?q=pass-through+ proxying。

现在，在JavaScript代码中不再请求http://yahoo.com/form_do，而是使用URL /form_do。请求代码如下所示：

var post_url = '/form_do';

就这样——你完成了！感谢Gopan以及http://t3.dotgnu.info为本hack提供了大量信息。

——Premshree Pillai

分享到：

Ajax Hacks ajax离线存储 | JasperReport+iReport进行java报表开发

2007-06-21 16:40
浏览 2714
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax 跨域

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax 跨域

评论

发表评论

相关推荐

最近访客更多访客>>