发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态,XMLHttpRequest对象提供了on
on
ajaxObj=createAjaxObject();
var url="/MyTodoes/FetchText?id="+id;
ajaxObj.open("Get",url,true);
ajaxObj.on
ajaxObj.send(null);
on
通常在事件中判断readyState的值是在请求完毕时才做处理,如:
function changeTabCallBack(){
if(ajaxObj.readyState==4){
// 下一步验证
}
}
Status存储了服务器端返回的Http请求响应代码,它表示请求的处理结果,常见响应代码的含义如右。
在Ajax开发中,最常用就是200这个响应码,代码如下:
function changeTabCallBack(){
if(ajaxObj.readyState==4){
if(ajaxObj.status==200){
// 服务端返回了正确数据,开始响应处理
}
}
}
Http状态码 含义
200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误
在编写Ajax方法的时候,我们经常会写上类似于这样的代码:
<script type="text/javas
var xmlHttp;
//创建一个XmlHttpRequeset对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//开始一个请求
function startRequest(){
createXMLHttpRequest();
xmlHttp.on
xmlHttp.open("GET", "SimpleRespose.xml", true);
xmlHttp.Send(null);
}
function handlestatechange(){
if(xmlHttp.readyState == 4){//描述一种"已加载"状态;此时,响应已经被完全接收。
if(xmlHttp.status == 200){//200表示成功收到
alert("The Server Replied with:" + xmlHttp.responseText)
}
}
}
</script>
第一次阅读这段代码的时候,我就感到了一点点不对劲,但是说不出来什么地方不对劲。随着对Ajax代码的进一步了解,这种感觉时刻伴随着我。
后来,我知道了这种感觉来自于什么地方。
看看startRequest函数。我们发现xmlHttp.on
后来我用window.alert跟踪xmlHttp.readystate的变化,发现于原来它运行的机制是这样的。首先创建一个xmlHttpRequest的对象之后xmlHttp.readyState的值是0了,然后xmlHttp.on
浏览器因为不能真正地像面向对象那么编程,所以找了个折衷的办法,但是这个办法看起来不伦不类,想了半天,再跟一个同学一起讨论,才得出这样的一个结果。
on
函数是具有执行特定功能的子程序,编译后,它的执行代码分配在代码段,而其参数及变量则在堆栈段,因而主程序调用函数时,实际上就是将程序执行地址转移为函数在代码段的入口地址去执行,即每个函数都有一个在代码段的确定入口地址,依此程序执行,当遇到返回指令时(表示该程序结束),程序便返回到该函数调用者的断点程序处,又继续执行,既然函数有确定的入口地址(实际上函数名就
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" οnclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>