练习AJAX时遇到的跨域问题

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2015-06-28 11:57:57　-　阅:　-　评:0　-　积分:0

最近在w3school上看关于AJAX的教程，然后就着手跟着实例进行练习，练习过程中发现一些问题，然后就有了这篇文章。

这个问题是在AJAX XHR中，也就是GET请求的那个案例。当我在dw中码完提示的源码后直接用浏览器打开了页面，然后点击“请求数据”按钮时没有反应，审查后才看到有报错，如图：

案例源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX练习</title>
<script type="text/javascript">
var iable=new XMLHttpRequest();
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){
　　//ie7+
　　xmlhttp=new XMLHttpRequest();
　　}else{
　　　//ie7-
　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　}
xmlhttp.onreadystatechange=function()
　{
　if (xmlhttp.readyState==4 && xmlhttp.status==200)
　　{
　　　document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
　　}
　}
xmlhttp.open("GET","demo_get.asp?t="+ Math.random(),true);
xmlhttp.send();
};
</script>
</head>
<body>
<h2>ajax</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

上图中这里有两处错误，在群内询问后才得知：这个AJAX请求页面的地址不能以file:///开头。于是我将.asp放到了我的Apache环境中，再运行时发现又报错了，如图：

修改源码:

xmlhttp.open("GET","http://127.0.0.1:809/web/ajax/demo_get.asp?t="+ Math.random(),true);

这回报错是由于这个跨域引起的，最简单的方法就是：将1-0.html页面也放到环境中，然后以http://127.这样打开页面。此时再点击请求数据按钮时就可以显示内容了，如图： AJAX请求练习

通过修改命名行标记的方法也是可以的，(注：需要先关闭当前浏览器所有页面。)复制浏览器快捷方式--属性--目标后面添加一串代码： --disable-web-security(注：空格要保留)，如图：这样再打开新建的浏览器时会看到提示：，此时再直接打开刚才的页面就可以了。(注：此方法参照于：http://www.exp99.com/jswz/f2e/1415609654_115.html)

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2015-06-28/283.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！