闭关纪要2.不同子域名之间Ajax访问跨域问题的解决
上次给我的闭关纪要开了一个头之后，我就一直继续闭关研究，虽然我研究的东西大多很有来头，而且我也预计将源码公开，可是都还没有一个完整的东西来给大家介绍，几天前，我在解决我的网站性能问题的时候突然有一个想法，能够解决我一直很想解决的子域名跨域的问题，觉得应该与大家分享一下，不知道有没有人用过。
问题描述如下：我个人使用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），完全可用！因此假如您已经理解我的意思，或者暂时不需要此技巧，可以不再向下看了，假如您想参考我的具体使用方法，可以向下看，说不定能对您有所启发。
先看看代理页面的代码吧：
<html>2
<head>3
<script language="javascript">
4
//本函数在页面加载的时候运行5
function onLoad()6
{
7
document.domain="dituren.cn"//设置自身的域8
var hash=location.hash;//父窗口会使用锚点参数传递一个回调函数名称过来9
if(hash&&hash.length>1)//如果回调函数名称存在10
{11
hash=hash.substring(1);12
parent[hash](self);//调用回调函数，通知父窗口代理已经准备好了13
}14
}15
//本函数会由父窗口调用，返回一个XMLHttpRequest对象给父窗口，剩下的操作父窗口自己完成16
function createHttpRequest()17
{18
if(window.XMLHttpRequest)19
{20
return new XMLHttpRequest();21
}22
else if(typeof(ActiveXObject)!="undefined")23
{24
return new ActiveXObject("Microsoft.XMLHTTP");25
}26
}27
</script>28
</head>29
<body onload="onLoad()"></body>30
</html>
代码不算复杂吧，这是一个静态文件现在被我部署到了http://51ditu.dituren.cn/51ditu/ajaxAgent.htm ，我的其它子域页面上假如需要调用http://51ditu.dituren.cn/ 上面的服务，可以采用类似于以下代码：
window.onAgentLoaded=function(win){window.agentWindow=win;}//设置回调函数，在被agent页面回调的时候设置window.agentWindow变量2
document.domain="dituren.cn";//设置自己的域3
document.write('<iframe src="http://51ditu.dituren.cn/51ditu/ajaxAgent.htm#K_CPoint_AgentLoaded" style="display:none;"></iframe>');//在页面上通过Ajax加载Agent并通过锚点将回调函数名称提供给Agent页面4
5
//页面上的其它程序通过调用此函数来获得访问ajax的request对象6
function createHttpRequest()7
{8
if(window.agentWindow){return window.agentWindow.createHttpRequest();}9
else10
{11
//假如调用服务的时候AjaxAgent还没有加载完成，这个时候怎么办？12
//我的逻辑是调用本域的，因为我的服务在每个域都有部署，只是为了性能才需要调用其它域的（另外的服务器）13
}14
}
上面的代码已经获取了一个HttpRequest对象，怎么使用就不用我在这里说明了，总之用这个方法实现了跨子域名的Ajax访问，这是我最高兴的。
一直以来，我都希望能够将我的页面部署在一个很稳定的服务器，而将一些附加的服务部署在另一个地方，因为这些附加的服务有些是很耗性能的，避免对主页面服务器产生比较大的影响，这次通过这个方法，我终于可以做到这个了。
这次网站从http://www.step1.cn/ 迁移到http://www.dituren.cn/ 一个很重要的事情就是域名的分拆，以前将很多的内容都部署在一个www域名下，现在，被我拆成了很多子域名，在后面，我会逐次的提到每个域名的作用和相关的核心技术。
posted on 2008-10-29 22:08 K_Reverter 阅读(4602) 评论(0) 编辑 收藏 举报
