今天在学习《Javascript DOM 编程艺术》中，跟着写了第七章的Ajax代码时发现怎么都出不来合理结果。
先看程序：
<!---HTML代码->
<html>
<head>
<meta charset="utf-8">
<title>Ajax</title>
</head>
<body>
<div id="new"></div>
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/getHttpObject.js"></script>
<script type="text/javascript" src="scripts/getNewContent.js"></script>
</body>
</html>
将其保存为ajax.html，并引入以下JS。
function getHTTPObject(){
if(typeof XMLHttpRequest=="undefined"){
XMLHttpRequest=function(){
try{
return new ActiveXObject("Msxml2.XMLHTT.6.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTT.3.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTT");
}catch(e){}
return false;
}
}
return new XMLHttpRequest();
}
function getNewContent(){
var request=getHTTPObject();
if(request){
request.open("GET","example.txt",true);
request.onreadystatechange=function(){
if(request.readyState==4){
var para=document.createElement("p");
var text=document.createTextNode(request.responseText);
para.appendchild(text);
document.getElementById("new").appendchild(para);
}
};
request.send(null);
}else{
alert("不好意思，你的浏览器不支持ajax");
}
}
addLoadEvent(getNewContent);
用浏览器打开ajax.html，发现毫无反应。尝试用几个alert()在js中查找问题。最终定位到
if(request.readyState==4)
这个地方始终进不去。
查找各种资料之后终于明白了，Ajax要基于http协议的，我在本地里并没有设置服务器又怎么会产生Ajax呢！ （哎，以前还搭过WAMP呢，怎么现在全忘了- -）
我用的是mac，mac自带apache，参照这篇博文开启apache服务器。
apache默认的网站根目录是/Library/WebServer/Documents，将之前写好的文件放在这个目录下，然后打开浏览器（我用的是chrome），输入localhost/ajax.html，成功！（直接在目录下打开ajax.html是不起作用的）
通过在function getNewContent()中设置alert(request.readyState)，还可以看到状态是不停更新的，所以这个函数应该是一直保持到http请求结束的。
折腾了我大半天的东西终于搞定- -也是因为自己对Ajax的概念不完全理解造成的吧。
继续前进！
网友评论