Ajax实现原理

csstome

浏览: 1521188 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

wangyy

ChangingWay

yadgen

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2009)

社区版块

存档分类

当下盛行的Ajax

现在Ajax框架数不胜数，Ajax的功能也太庞大的以至于它连它的父辈Javascript都带动起来了，记得我最初接触web的时候Javascript还没到达有现在的高度，如今随着客户提醒越来越重要，很多软件开发并不仅仅停留在功能实现的要求上，而是更注重交互、分享和互动（这也是web2.0的目标）。其实这也是完全正确的，毕竟那种仅仅赋予功能的东西我们不能满足了，例如你买东西还想要挑好看的呢，何况软件开发呢。回到正题，Ajax框架我还是赞成使用的，毕竟自己来实现效率太慢了，像目前优秀的javascript框架jQuery就不得不令人赞赏，而且它也是越来越受欢迎，连微软都在Asp.Net MVC框架中自带了jQuery。但是我觉还是有必要了解Ajax的本质的，这样你才能运用自如。

Ajax 的工作

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

Ajax 核心—XMLHttpRequest

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

XMLHttpRequest 对象
属性
readyState	请求状态，开始请求时值为0直到请求完成这个值增长到4
responseText	目前为止接收到的响应体,readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体
responseXML	服务器端相应，解析为xml并作为Document对象返回
status	服务器端返回的状态码，=200成功，=404表示“Not Found”
statusText	用名称表示的服务器端返回状态，对于“OK”为200，“Not Found”为400
方法
setRequestHeader()	向一个打开但是未发生的请求设置头信息
open()	初始化请求参数但是不发送
send()	发送Http请求
abort()	取消当前相应
getAllResponseHeaders()	把http相应头作为未解析的字符串返回
getResponseHeader()	返回http相应头的值
事件句柄
onreadystatechange	每次readyState改变时调用该事件句柄，但是当readyState=3有可能调用多次

代码实现

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

//与服务器通信 function talktoServer(url) { var req = newXMLHTTPRequst(); var callbackHandler = getReadyStateHandler(req); req.onreadystatechange = callbackHandler; req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var testmsg = document.getElementById("testmsg"); var msg_value = testmsg.value; req.send("msg="+msg_value); } //创建XMLHTTP对象 function newXMLHTTPRequst() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXobject) { try{ xmlreq=new ActiveXObject("Msxm12.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } return xmlreq; } //服务器回调函数 function getReadyStateHandler(req) { return function() { if (req.readyState == 4) { if (req.status == 200) { var msg_display = document.getElementById("msg_display"); msg_display.innerHTML = req.responseText; } else { var hellomsg = document.getElementById("hellomsg"); hellomsg.innerHTML = "ERROR" + req.status; } } } }

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

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="myFirst._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <mce:script type="text/javascript" src="js/ajax.js" mce_src="js/ajax.js"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <input id="testmsg" type="text" value="helloworld" /> <input id="Button1" type="button" value="button" onclick="talktoServer('Ajax.aspx')" /> <div id="msg_display" style="height:50px;"> </div> 在此提醒大家，他对应的异步请求页一定不能有form标签，否之就只有将显示信息的div放到此页的form外了，原因很简单：返回信息中有form，在此也显示的时候就造成了form嵌套，不允许！！！ </div> </form> </body> </html>

Ajax.aspx的后台代码，也就是处理XMLHttpRequest请求的页面后台代码（其对应的前台需要去掉form标签）：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace myFirst { public partial class Ajax : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string str = "服务器ajax.aspx得到了您输入的信息" + Request["msg"] + "<br/>您的ip地址是："; str += Request.UserHostAddress; str += "<br/>当前服务器时间："; str += DateTime.Now.ToLocalTime(); Response.Write(str); } } }

从代码我们看出：首先我们创建一个 XMLHttpRequest 对象（由于浏览器不同需要相应判断处理），设置相应的请求信息（通过open来做，例如请求地址等设置）；然后我们绑定 onreadystatechange 事件，在这个事件中我们根据服务器返回状态的不同来做出不同处理，这其中主要是请求成功后接收相应的返回值来通过 javascript 对客户端做出相应操作（我们只是使显示有关信息）；最后我们发送这个请求（通过send方法）。

总结

通过上面说明和代码实现我们发现事实上整个 Ajax 的无刷新功能就是利用 XMLHttpRequest 的异步请求来完成的。关键就是我们了解XMLHttpRequest的相关成员信息。当然，我们上面说实际开发中如果在手动写这些代码就太不划算了，我们可以选择合适的框架来进行 Ajax开发。OK，就到这里吧！

分享到：