AJAX不能跨域访问是什么意思,我想没有亲自遇到这个问题的人,可能根本就不理解.现在我给出一个例子,让大家体会一下什么是跨域访问.这个页面就是一个HTML文件,源码我附文章后面了.
注:这个页面并不高深,例子只有一个HTML页面,没有引用什么特别的库之类的.例子的目的只是让对AJAX不能跨域访问有一个感性的认识.就好比,你如何告诉一个没见过汽车的人,告诉他什么是汽车,讲半天,还不如直接给个汽车给他看看,他就知道什么是汽车了.但你要他直接给一个清晰的定义,或者是让他明白汽车的动力学,这就是很难的了,也不是本文的目的.
下面这个简单的代码只要复制到一个本地html文件中即可,就可以把任何URL指定的网页显示出来[注1],但是同样的页面,你如果放到tomcat之类的容器下面,就无法打开,甚至通过网络邻居访问都不行.
分析1:为什么好好的页面却得不到期望的结果:
为什么JS语法没有什么问题,放在网络邻居与web容器中就不能正常运行了呢,这就是AJAX所说的不能跨域访问,因为浏览器你这个JS程序是来自容器,它就限制你只能正常访问同一容器里的的资源[注:2],比如你通过http://www.openj.cn访问到一个页面,那么这个页面的JS就只能访问openj.cn的资源,而不能访问www.baidu.com.
为什么IE在通过本地文件能正常运行这个页面的,我是在XP下测试的,可能IE把本地这个域处理成了一个特殊的域,从这个域得到的JS程序,权限可以略微放松些,这样可能易用性就会好些,要知道安全性与使用的方便性可是此消彼长的关系.所以IE选择了易用性,在安全问题上放了一个黄灯,为什么说是黄灯呢,因为它在运行这个页面时,IE会给出一个安全提示,告诉你这个页面存在风险.
分析2:为什么要限制AJAX跨域访问[注3］:
可以肯定的说是出于安全的需要,但我没有找到什么资料明确这个问题分析,我只能通过看其它资料来自己体会了,我自己发现的一个安全问题就是:
AJAX可能会把用户的cookie信息泄漏出去,比如我往别用户的Gmail信箱里面发嵌有JS脚本的邮件.这些脚本读取gmail.com域中的cookies信息,然后通过AJAX发送给我的个人网站,这样我的个人网站就可以得到这个用户的Gmail的cookies.我然后把它提取出来,我就可以不用密码来访问这个用户的Gmail邮箱了.
这个只是我能想到的,我想如果能够让AJAX能够跨域访问的话,肯定还有其它一些安全问题.
注
[1]；对这个测试页面好像只有在一种情况下才能正常执行：就是通过IE打开本地文件。如果用FireFox就算是通过本地文件打开它也不能正常运行。
[2]:为了把问题简单说明,我说了只能访问同一容器里面的资源,实际上是不精确的,真正的还是应该通过域来区分,同一个容器里面的资源也可能是指向不同的域.同一个域的各个资源也可能分布在不同的容器中.比如:tomcat中有好2个虚拟目录,你用不同的域名来指向这两个虚拟目录,这个容器中的两个虚拟目录就是不同的域了.不同容器的资源也可能属于同一个域,比如我申请一个域名:openj.cn,我设置 www.openj.cn指向www.baidu.com,而blog.openj.cn指向www.google.com。这样baidu与google的首页就都属于openj.cn这个域了.
[3]: 本文没有区分AJAX的跨域与JS的跨域，因为AJAX就是通过JS来发现请求的，它们实际上是一回事。
[4]: 在代码中，我定义了变量 var url = 'http://www.google.com'; 你可以把它修改为任何你能访问的地址，
[5]：本文的内容全是自己的瞎体会的，如果有什么不对的有高手发现了，希望大家能指出。这也是本文的主要目的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>AJAX跨域验证</TITLE>
<script>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function hello() {
var url = 'http://www.google.com';
createXMLHttpRequest();
xmlHttp.onreadystatechange = showResponse;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function showResponse(){
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById("result").setAttribute("value",xmlHttp.responseText) ;
}
}
}
</script>
</HEAD>
<BODY>
<input type="button" value="hello" onclick="hello()"><br/><br/>
<textarea id="result" name="result" cols=100 rows=100 ></textarea>
</BODY>
</HTML>