今天在学习《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的概念不完全理解造成的吧。
继续前进!