上次给我的闭关纪要开了一个头之后,我就一直继续闭关研究,虽然我研究的东西大多很有来头,而且我也预计将源码公开,可是都还没有一个完整的东西来给大家介绍,几天前,我在解决我的网站性能问题的时候突然有一个想法,能够解决我一直很想解决的子域名跨域的问题,觉得应该与大家分享一下,不知道有没有人用过。
问题描述如下:我个人使用Ajax的方式通常是调用类似Json或者Rest接口,这些接口都是通过Script标签传递数据,不过这样使用的问题在于只能通过异步来加载数据,很多时候会造成程序架构上的不便,远不如直接使用Xml或者文本文件的同步访问模式(XML Http Request)来的直接,可是如果用XML Http Request的模式,就会产生跨域问题,这样,必须要把页面和XML服务部署在同一个域名上,哪怕是同一个域名的子域名也不行。
假如我希望通过Ajax的模式,由http://www.dituren.cn/ 页面上的代码去访问http://51ditu.dituren.cn/ 上面的XML或者文本服务,有办法实现么?
或许你认为通过页面上设置document.domain可以解决,不过这是白费心机,我已经研究过了,这样是行不通的!在HTML页面上为什么可以呢?因为两个页面都可以这样设置域名:document.domain='dituren.cn';这样他们就是在同一个域了,可是页面去访问XML的时候,XML显然没有设置自己的domain的地方,因此就会产生跨域访问,用户得到一个“没有权限”的提示。
既然是这样,那么我想,为什么不在http://51ditu.dituren.cn/ 上面使用一个代理页面,设置自身的document.domain='dituren.cn',而www域下的网页通过Iframe加载这个页面,并且也设置自己的域,这样的话,这两个页面之间的交流是畅通的,而这个代理页面本身是在51ditu域下的,因此肯定可以访问本域的XML服务了。
以上想法经过我的测试(IE6,IE7,FF3),完全可用!因此假如您已经理解我的意思,或者暂时不需要此技巧,可以不再向下看了,假如您想参考我的具体使用方法,可以向下看,说不定能对您有所启发。
先看看代理页面的代码吧:
1
2
3 
4
//本函数在页面加载的时候运行 5
functiononLoad() 6

{ 7
document.domain="dituren.cn"//设置自身的域 8
varhash=location.hash;//父窗口会使用锚点参数传递一个回调函数名称过来 9
if(hash" src="http://img.558idc.com/uploadfile/allimg/0629/f14010f8a61051ec.jpg" align="top">
{ 11
hash=hash.substring(1); 12
parent[hash](self);//调用回调函数,通知父窗口代理已经准备好了 13
} 14
} 15
//本函数会由父窗口调用,返回一个XMLHttpRequest对象给父窗口,剩下的操作父窗口自己完成 16
functioncreateHttpRequest() 17

{ 18
if(window.XMLHttpRequest) 19

{ 20
returnnewXMLHttpRequest(); 21
} 22
elseif(typeof(ActiveXObject)!="undefined") 23

{ 24
returnnewActiveXObject("Microsoft.XMLHTTP"); 25
} 26
} 27
28
29
30
代码不算复杂吧,这是一个静态文件现在被我部署到了http://51ditu.dituren.cn/51ditu/ajaxAgent.htm,我的其它子域页面上假如需要调用http://51ditu.dituren.cn/上面的服务,可以采用类似于以下代码:
1
window.onAgentLoaded = function (win)
{window.agentWindow=win;} // 设置回调函数,在被agent页面回调的时候设置window.agentWindow变量 2
document.domain = " dituren.cn " ; // 设置自己的域 3
document.write( ' ' ); // 在页面上通过Ajax加载Agent并通过锚点将回调函数名称提供给Agent页面 4
5
// 页面上的其它程序通过调用此函数来获得访问ajax的request对象 6
function createHttpRequest() 7 
{ 8
if(window.agentWindow)
{returnwindow.agentWindow.createHttpRequest();} 9
else 10

{ 11
//假如调用服务的时候AjaxAgent还没有加载完成,这个时候怎么办? 12
//我的逻辑是调用本域的,因为我的服务在每个域都有部署,只是为了性能才需要调用其它域的(另外的服务器) 13
} 14
} 上面的代码已经获取了一个HttpRequest对象,怎么使用就不用我在这里说明了,总之用这个方法实现了跨子域名的Ajax访问,这是我最高兴的。
一直以来,我都希望能够将我的页面部署在一个很稳定的服务器,而将一些附加的服务部署在另一个地方,因为这些附加的服务有些是很耗性能的,避免对主页面服务器产生比较大的影响,这次通过这个方法,我终于可以做到这个了。
这次网站从http://www.step1.cn/ 迁移到http://www.dituren.cn/ 一个很重要的事情就是域名的分拆,以前将很多的内容都部署在一个www域名下,现在,被我拆成了很多子域名,在后面,我会逐次的提到每个域名的作用和相关的核心技术。
