上次给我的闭关纪要开了一个头之后,我就一直继续闭关研究,虽然我研究的东西大多很有来头,而且我也预计将源码公开,可是都还没有一个完整的东西来给大家介绍,几天前,我在解决我的网站性能问题的时候突然有一个想法,能够解决我一直很想解决的子域名跨域的问题,觉得应该与大家分享一下,不知道有没有人用过。
问题描述如下:我个人使用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








































代码不算复杂吧,这是一个静态文件现在被我部署到了http://51ditu.dituren.cn/51ditu/ajaxAgent.htm,我的其它子域页面上假如需要调用http://51ditu.dituren.cn/上面的服务,可以采用类似于以下代码:
1





















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