学习《Javascript DOM 编程艺术》Ajax走的一处弯路

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,079评论 25 709
  • 前言 归根结底,代码都是思想和概念的体现。没人能把一种程序设计语言的所有语法和关键字都记住,可以查阅参考书来解决。...
    朱细细阅读 8,139评论 4 14
  • 我是美术专业学生,每天画速写,素描,水彩,突然有天看绘画书,发现刮画很吸引,于是我也试画了几幅画,希望各位喜欢,以...
    千语沫阅读 4,583评论 0 0
  • 《飞狐外传》中最打动人心、最让人难忘的不是胡斐、苗人凤、赵半山等人的侠义情怀、高强武艺,不是胡斐与赵半山,与苗人凤...
    颓然书生阅读 3,720评论 1 16

友情链接更多精彩内容