Ajax实现原理

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操作都在这里：

view plaincopy to clipboardprint?

1.   //与服务器通信   

2.   function talktoServer(url) {  

3.       var req = newXMLHTTPRequst();  

4.       var callbackHandler = getReadyStateHandler(req);  

5.       req.onreadystatechange = callbackHandler;  

6.       req.open("POST", url, true);  

7.       req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  

8.       var testmsg = document.getElementById("testmsg");  

9.       var msg_value = testmsg.value;  

10.      req.send("msg="+msg_value);  

11.  }  

12.  //创建XMLHTTP对象   

13.  function newXMLHTTPRequst() {  

14.      var xmlreq = false;  

15.      if (window.XMLHttpRequest) {  

16.          xmlreq = new XMLHttpRequest();  

17.      } else if (window.ActiveXobject) {  

18.          try{  

19.              xmlreq=new ActiveXObject("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.  function getReadyStateHandler(req) {  

32.      return function() {  

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

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

35.                  var msg_display = document.getElementById("msg_display");  

36.                  msg_display.innerHTML = req.responseText;  

37.              } else {  

38.                  var hellomsg = document.getElementById("hellomsg");  

39.                  hellomsg.innerHTML = "ERROR" + req.status;  

40.              }  

41.          }  

42.      }  

43.  }  

 

//与服务器通信

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前台代码：

view plaincopy to clipboardprint?

1.   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="myFirst._Default" %>  

2.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

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

4.   <head runat="server">  

5.       <title></title>  

6.       <mce:script type="text/javascript" src="js/ajax.js" mce_src="js/ajax.js"></mce:script>  

7.   </head>  

8.   <body>  

9.       <form id="form1" runat="server">  

10.      <div>  

11.          <input id="testmsg" type="text" value="helloworld" />  

12.          <input id="Button1" type="button" value="button" οnclick="talktoServer('Ajax.aspx')" />  

13.          <div id="msg_display" style="height:50px;">  

14.          </div>  

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

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

17.      </div>  

18.      </form>  

19.  </body>  

20.  </html>  

 

<%@ 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" οnclick="talktoServer('Ajax.aspx')" />

        <div id="msg_display" style="height:50px;">

        </div>

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

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

    </div>

    </form>

</body>

</html>

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

view plaincopy to clipboardprint?

1.   using System;  

2.   using System.Collections.Generic;  

3.   using System.Linq;  

4.   using System.Web;  

5.   using System.Web.UI;  

6.   using System.Web.UI.WebControls;  

7.   namespace myFirst  

8.   {  

9.       public partial class Ajax : System.Web.UI.Page  

10.      {  

11.          protected void Page_Load(object sender, EventArgs e)  

12.          {  

13.              string str = "服务器ajax.aspx得到了您输入的信息" + Request["msg"] + "<br/>您的ip地址是：";  

14.              str += Request.UserHostAddress;  

15.              str += "<br/>当前服务器时间：";  

16.              str += DateTime.Now.ToLocalTime();  

17.              Response.Write(str);  

18.          }  

19.      }  

20.  }  

 

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的相关成员信息。