今天在學(xué)習(xí)《Javascript DOM 編程藝術(shù)》中疏唾,跟著寫(xiě)了第七章的Ajax代碼時(shí)發(fā)現(xiàn)怎么都出不來(lái)合理結(jié)果。
先看程序:
<!---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);
用瀏覽器打開(kāi)ajax.html冒嫡,發(fā)現(xiàn)毫無(wú)反應(yīng)拇勃。嘗試用幾個(gè)alert()在js中查找問(wèn)題。最終定位到
if(request.readyState==4)
這個(gè)地方始終進(jìn)不去孝凌。
查找各種資料之后終于明白了方咆,Ajax要基于http協(xié)議的,我在本地里并沒(méi)有設(shè)置服務(wù)器又怎么會(huì)產(chǎn)生Ajax呢蟀架! (哎瓣赂,以前還搭過(guò)WAMP呢,怎么現(xiàn)在全忘了- -)
我用的是mac片拍,mac自帶apache煌集,參照這篇博文開(kāi)啟apache服務(wù)器。
apache默認(rèn)的網(wǎng)站根目錄是/Library/WebServer/Documents捌省,將之前寫(xiě)好的文件放在這個(gè)目錄下苫纤,然后打開(kāi)瀏覽器(我用的是chrome),輸入localhost/ajax.html,成功7矫妗(直接在目錄下打開(kāi)ajax.html是不起作用的)
通過(guò)在function getNewContent()中設(shè)置alert(request.readyState)放钦,還可以看到狀態(tài)是不停更新的,所以這個(gè)函數(shù)應(yīng)該是一直保持到http請(qǐng)求結(jié)束的恭金。
折騰了我大半天的東西終于搞定- -也是因?yàn)樽约簩?duì)Ajax的概念不完全理解造成的吧操禀。
繼續(xù)前進(jìn)!