上次给我的闭关纪要开了一个头之后,我就一直继续闭关研究,虽然我研究的东西大多很有来头,而且我也预计将源码公开,可是都还没有一个完整的东西来给大家介绍,几天前,我在解决我的网站性能问题的时候突然有一个想法,能够解决我一直很想解决的子域名跨域的问题,觉得应该与大家分享一下,不知道有没有人用过。
问题描述如下:我个人使用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//本函数在页面加载的时候运行 5functiononLoad() 6{ 7document.domain="dituren.cn"//设置自身的域 8varhash=location.hash;//父窗口会使用锚点参数传递一个回调函数名称过来 9if(hash" src="http://img.558idc.com/uploadfile/allimg/0629/f14010f8a61051ec.jpg" align="top">{ 11hash=hash.substring(1); 12parent[hash](self);//调用回调函数,通知父窗口代理已经准备好了 13} 14} 15//本函数会由父窗口调用,返回一个XMLHttpRequest对象给父窗口,剩下的操作父窗口自己完成 16functioncreateHttpRequest() 17{ 18if(window.XMLHttpRequest) 19{ 20returnnewXMLHttpRequest(); 21} 22elseif(typeof(ActiveXObject)!="undefined") 23{ 24returnnewActiveXObject("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 { 8if(window.agentWindow){returnwindow.agentWindow.createHttpRequest();} 9else 10{ 11//假如调用服务的时候AjaxAgent还没有加载完成,这个时候怎么办? 12//我的逻辑是调用本域的,因为我的服务在每个域都有部署,只是为了性能才需要调用其它域的(另外的服务器) 13} 14}上面的代码已经获取了一个HttpRequest对象,怎么使用就不用我在这里说明了,总之用这个方法实现了跨子域名的Ajax访问,这是我最高兴的。
一直以来,我都希望能够将我的页面部署在一个很稳定的服务器,而将一些附加的服务部署在另一个地方,因为这些附加的服务有些是很耗性能的,避免对主页面服务器产生比较大的影响,这次通过这个方法,我终于可以做到这个了。
这次网站从http://www.step1.cn/ 迁移到http://www.dituren.cn/ 一个很重要的事情就是域名的分拆,以前将很多的内容都部署在一个www域名下,现在,被我拆成了很多子域名,在后面,我会逐次的提到每个域名的作用和相关的核心技术。