Ajax实现原理

Ajax的工作

Ajax直觉认识：我们发送一个请求，但是这个请求比较特殊它是异步的，也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件，这个事件会监控我们发送请求的状态，并且每次状态改变都会触发，所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端的后服务器端根据相应的请求返回对应的信息，这个返回信息我们可以取得并且是异步得到，不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件，我们就可以在那里首先做好在得到返回信息要做的处理（当然如果失败也会有相应的状态我们也会做出相应的处理），我们在处理中得到返回信息通过javascript在客户端做相应操作

 即可。

 

Ajax核心

 —XMLHttpRequest上面我们大概感受了一下Ajax的过程，我们发现发送异步请求才是核心，事实上它就是XMLHttpRequest，整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心，可以根据不同状态执行不同操作，其实它就是XMLHttpRequest的方法onreadystatechange，它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢？它就是XMLHttpRequest的另一个方法responseText（当然还有responseXML）。(⊙o⊙)哦，我们还没有说发送给谁以及执行发送操作，这两个就是XMLHttpRequest的open和send方法。Y(^o^)Y，其他的当然还有了，我们直接列出来吧：

 

XMLHttpRequest对象属性readyState请求状态，开始请求时值为0直到请求完成这个值增长到4responseText目前为止接收到的响应体,readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体responseXML服务器端相应，解析为xml并作为Document对象返回status服务器端返回的状态码，=200成功，=404表示“NotFound”statusText用名称表示的服务器端返回状态，对于“OK”为200，“NotFound”为400方法setRequestHeader()向一个打开但是未发生的请求设置头信息

 

open()          初始化请求参数但是不发送

 

send()          发送

 

Http            请求

 

abort()        取消当前相应

 

getAllResponseHeaders()把http        相应头作为未解析的字符串返回

 

getResponseHeader()        返回http相应头的值

 

事件句柄  onreadystatechange

 

每次readyState改变时调用该事件句柄，但是当readyState=3

 

有可能调用多次代码实现ajax.js

 

文件代码，也是我们说的主要内容，是一个javascript文件，所有的Ajax操作都在这里：

 

viewplaincopytoclipboardprint?

1.//与服务器通信

2.functiontalktoServer(url){3.varreq=newXMLHTTPRequst();4.varcallbackHandler=getReadyStateHandler(req);5.req.onreadystatechange=callbackHandler;6.req.open("POST",url,true);7.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");8.vartestmsg=document.getElementById("testmsg");9.varmsg_value=testmsg.value;10.req.send("msg="+msg_value);11.}12.//创建XMLHTTP对象13.functionnewXMLHTTPRequst(){14.varxmlreq=false;15.if(window.XMLHttpRequest){16.xmlreq=newXMLHttpRequest();17.}elseif(window.ActiveXobject){18.try{19.xmlreq=newActiveXObject("Msxm12.XMLHTTP");20.}catch(e1){

 

21.try

 

{22.xmlreq=new

 

ActiveXObject("Microsoft.XMLHTTP");23.}catch(e2)

 

{

 

24.25.

 

}26.

 

}27.

 

}28.return

 

xmlreq;29.

 

}30.//

 

服务器回调函数31.functiongetReadyStateHandler(req)

 

{32.returnfunction()

 

{33.if(req.readyState==4)

 

{34.if(req.status==200)

 

{35.varmsg_display=

 

document.getElementById("msg_display");36.msg_display.innerHTML=

 

req.responseText;37.}else

 

{38.varhellomsg=

 

document.getElementById("hellomsg");39.hellomsg.innerHTML="ERROR"+

 

req.status;40.

 

}41.

 

}42.

 

}43.

 

}//

 

与服务器通信functiontalktoServer(url)

 

{varreq=

 

newXMLHTTPRequst();varcallbackHandler=

 

getReadyStateHandler(req);req.onreadystatechange=

 

callbackHandler;req.open("POST",url,

 

true);req.setRequestHeader("Content-Type","

 

application/x-www-form-urlencoded");vartestmsg=document.getElementById("

 

testmsg");varmsg_value=

 

testmsg.value;req.send("msg="+msg_value);

 

}//创建XMLHTTP

 

对象functionnewXMLHTTPRequst()

 

{varxmlreq=

 

false;if(window.XMLHttpRequest)

 

{xmlreq=new

 

XMLHttpRequest();}elseif(window.ActiveXobject)

 

{

 

try{xmlreq=new

 

ActiveXObject("Msxm12.XMLHTTP");}catch(e1)

 

{try

 

{xmlreq=newActiveXObject("Microsoft.XMLHTTP"

 

);}catch(e2)

 

{

 

}

 

}

 

}return

 

xmlreq;

 

}//

 

服务器回调函数functiongetReadyStateHandler(req)

 

{returnfunction()

 

{if(req.readyState==4)

 

{if(req.status==200)

 

{varmsg_display=document.getElementById("msg_display"

 

);msg_display.innerHTML=

 

req.responseText;}else

 

{varhellomsg=document.getElementById("hellomsg"

 

);hellomsg.innerHTML="ERROR"+

 

req.status;

 

}

 

}

 

}

 

}其他相关的代码也贴出来吧，这样才能正确执行

 

使用ajax.js代码的页面代码，也就是Default.aspx

 

前台代码：viewplaincopyto

 

clipboardprint?1.<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="myFirst._Default"%

 

>2.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

 

>3.<htmlxmlns="http://www.w3.org/1999/xhtml"

 

>4.<headrunat="server"

 

>5.

 

<title></title>6.<mce:scripttype="text/javascript"src="js/ajax.js"mce_src="js/ajax.js"

 

></mce:script>7.

 

</head>8.

 

<body>9.<formid="form1"runat="server"

 

>10.

 

<div>11.<inputid="testmsg"type="text"value="helloworld"

 

/>12.<inputid="Button1"type="button"value="button"onclick="talktoServer('Ajax.aspx')"

 

/>13.<divid="msg_display"style="height:50px;"

 

>14.

 

</div>15.在此提醒大家，他对应的异步请求页一定不能有form标签，否之就只有将显示信息的div放到此页的form

 

外了16.，原因很简单：返回信息中有form，在此也显示的时候就造成了form嵌套，不允

 

许！！！17.

 

</div>18.

 

</form>19.

 

</body>20.

 

</html><%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="myFirst._Default"

 

%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">