继续探讨javascript的跨域访问

 

最近在用js访问跨域资源，在这里探讨一下js的跨域访问

 

看了相关的博客和参考文章，并结合自己的使用，总结如下：

0，假设：

（1）站A.com和站B.com是异域的

A访问B

（2）aa.A.com和bb.A.com是站A下的两个子域，但他们俩也是异域

aa.A.com访问bb.A.com

 

1，最通用的解决方案：proxy。对于A访问B，需要在A的服务端设置一个代理proxy，由它来和B打交道，然后A站点页面的js访问本站服务器上的代理即可。这样的模式大致是:A客户端->A服务端->B服务端

Proxy方案优点是可以适用用于几乎所有的跨域访问，而且只需要要一个域中进行开发，另一个域可以提供任何类型格式的数据。缺点是这种方案经过了中间Proxy，所以延迟可能稍微大一点，并且会加重本域服务器的负荷，开发工作量也稍微大一点。

 

2，最简单也最常用的方式script标签，其大体模式如下：

 

即在头部动态生成一个script元素：

var scriptBlock = document.createElement("script");

scriptBlock.src = " http://www.B.com";  //B 即将要访问的站点
scriptBlock.type = "text/javascript";
scriptBlock.language = "javascript";
document.getElementsByTagName("head")[0].appendChild(scriptBlock);

 

因为浏览器不限制引入其他域的js文件，所以可以使用这样方法获取异域的数据，然后使用回调函数（callback）等来处理返回的数据。

 

下面一段代码是我在本域内访问gdata.youtube.com的一个例子。

 

('<script type="text/javascript" src=" http://gdata.youtube.com/feeds/users/' + username + '/uploads?alt=json-in-script&callback=youtube2&max-results=30&format=5"></script>')

 

注：这个例子是我想取回某个YouTube用户上传视频的请求连接，返回数据格式是json，然后用回调函数youtube2来处理返回的结果。

Script标签的方案可以说是非常简单的，代码量少，不过它对返回的数据格式要求有点严格，只能是Json格式数据（这一点还未考证，但可以想象返回的数据及格式是受异域限制的）,如果是其他格式的数据，那么这种方法就无能为力了。

 

3，隐藏iframe方式，它适用于同一父域下的子域访问问题。即对于假设2，aa.A.com访问bb.A.com。这里的解决方案是在aa域的页面里设置document.domain="A.com"，即设置为父域，然后将一个隐藏的iframe的src设置为要访问的页面，即bb域的页面。参考代码如下：

 

<script type="text/javascript" ><!--  
 Document.domain="A.com";  
 Var remoteHtml=document.getElementById("remoteHtml");  
 remoteHtml.src="bb.A.com/xxxx.htm";//这里访问域bb的链接  
 var document=remoteHtml.ContentDocument; //这里就可以使用document来操作域bb中页面xxx.htm的数据了  
// --></script> 
<iframe id="remoteHtml" src="" style="diapay:none"/>

 

隐藏iframe方式也很简单，它可以处理任何返回的数据格式，但它只适用在具有同一个父域下的跨域请求上，因为documen.domain只能设置为父域，而不能设置为其它域。

 

由于刚接触不久，阐述中可能会有不清楚和不正确之处，希望大家不吝指正。

参考：

1  http://blog.csdn.net/tongdoudpj/archive/2009/05/10/4166096.aspx

2 http://blog.csdn.net/lovingprince/archive/2008/09/20/2954675.aspx

3  http://www.cnblogs.com/passer/archive/2008/07/16/1243811.html