原文：http://www.blogjava.net/itspy/archive/2007/02/11/99262.html
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>
分享到：
相关推荐
本示例“demo跨域ajax_DEMO_ajax跨域”着重解决C#后端与JavaScript前端之间的跨域限制。这里我们将深入探讨什么是跨域、为何会产生跨域问题以及如何通过C#和Ajax实现跨域通信。 首先，我们需要了解什么是跨域。根据...
**jQuery实现Ajax跨域访问** 在Web开发中，由于同源策略的限制，JavaScript通常只能对同一域名下的资源进行操作。然而，有时我们需要从不同源获取数据，这就是跨域访问的需求。jQuery通过Ajax提供了跨域请求的能力...
在现代Web应用开发中，数据共享和跨域访问是常见的需求。Spring Boot作为一个轻量级的框架，提供了方便快捷的方式来实现这些功能。本教程将详细讲解如何在Spring Boot项目中利用Redis来存储和共享Session，并解决...
标题中的“在Firefox中通过AJAX跨域访问Web资源”是指使用Asynchronous JavaScript and XML (AJAX)技术在Mozilla Firefox浏览器中实现跨域数据请求。跨域是由于浏览器的同源策略（Same-origin policy）限制，它阻止...
- 在压缩包文件"kuayu2"中可能包含的源码示例或其他工具，可以帮助你实践和理解上述方法。 总之，解决Ajax跨域问题需要对同源策略有深入理解，并灵活运用JSONP、CORS、代理服务器等技术。在实际操作中，根据项目...
源码学习是提升编程技能的重要途径，通过分析和理解【迈云Ajax跨域类v1.0.0】的源代码，我们可以深入理解跨域请求的工作原理以及如何利用JavaScript进行实现。源码可能包括了对XMLHttpRequest对象或Fetch API的封装...
《疯狂Ajax讲义源码2.rar》是一...在提供的源码文件07和06中，可能包含了示例代码、练习项目或者讲解Ajax相关技术的应用案例。通过深入研究这些源码，可以更好地理解和掌握Ajax的实际运用，进一步提升你的Web开发技能。
它允许网页在不重新加载整个页面的情况下更新部分内容，从而提供更流畅、更快捷的用户体验。 **2. XMLHttpRequest对象** AJAX的核心是XMLHttpRequest（XHR）对象，这是JavaScript内置的对象，用于在后台与服务器...
6. **跨域问题**：Ajax请求受到同源策略限制，讲义会介绍如何通过JSONP或CORS解决跨域访问的问题。 7. **Error Handling**：错误处理是任何编程中的重要部分，讲义将阐述如何处理Ajax请求可能出现的错误，并给出...
在提供的压缩包文件中，有三个文件0508、0506、0504，它们可能是包含Ajax示例代码的文件。这些文件可能展示了如何使用XMLHttpRequest或jQuery发起Ajax请求，以及如何处理返回的数据。通过阅读和分析这些代码，你可以...
- **跨域问题**：由于同源策略限制，Ajax请求通常只能访问同源资源。为解决此问题，可以使用CORS（跨源资源共享）或者JSONP（JSON with Padding）。 - **兼容性问题**：老版本的IE浏览器不支持XMLHttpRequest，需要...
6. **示例代码**：在JSP页面中，可能的jQuery AJAX代码示例如下： ```javascript <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function() { $("#submit").click...
总的来说，这个Ajax帮助文档与源码合辑是一份全面的学习资料，无论你是初学者还是有经验的开发者，都能从中受益，提升你的Ajax技术和Web应用开发能力。通过深入学习和实践，你可以创建出更高效、更互动的网页应用。
本资源包提供了8个源码示例，旨在帮助开发者快速掌握文件上传和下载的实现方式。下面，我们将深入探讨这些知识点。 1. **文件上传**： - **HTTP协议中的multipart/form-data**：在HTML表单中，文件上传通常使用`...
`ch09`和`ch10`可能讲解了如何通过JSONP、CORS等方法解决跨域访问的问题。 7. **Ajax的局限性和优化** 虽然Ajax带来了许多好处，但也有其局限性，比如搜索引擎优化问题和浏览器兼容性问题。这部分内容可能在压缩包...
6. **跨域问题**：由于同源策略的限制，Ajax请求通常只能访问同一域名下的资源。了解CORS（跨源资源共享）和JSONP（JSON with Padding）机制，可以解决跨域问题。 7. **jQuery和Ajax**：jQuery库简化了Ajax操作，...
《疯狂Ajax讲义 第三版》是一本深入探讨Ajax技术的专业书籍，其源码提供了丰富的实践示例，帮助读者理解并掌握Ajax的核心概念和技术。在第十章中，我们预计会学习到Ajax技术在实际项目中的高级应用和技巧。Ajax，...
2. **安全问题**：由于Ajax请求是同源策略限制的，不能跨域访问，这限制了其使用范围。 3. **SEO难题**：搜索引擎爬虫无法执行JavaScript，可能会导致部分Ajax加载的内容无法被索引。 **学习Ajax的关键点**： 1. **...
1. **CORS**：由于跨域问题，DWR需要开启CORS（Cross-Origin Resource Sharing）来允许不同源的请求。在`web.xml`中，你可能需要配置CORS过滤器以允许Ajax请求。 2. **JSON**：DWR默认使用JSON（JavaScript Object ...
使用 迈云 Ajax 类可以无刷新 发送 GET 或 POST 请求，通过放置安全策略文件可以跨域访问网站，获取内容，... 迈云 AJAX 类操作简单，并含有完整的API参考文档和使用示例，方便快速了解 迈云 AJAX 类的访问和跨域访问。