不用AJAX框架实现AJAX效果

AJAX( Asynchronous JavaScript and XML),即：javascript和XML;

　　是一种进行页面局部异步处理数据的技术，用AJAX向服务器发送请求和获取服务器返回的数据并且更新到界面中，不是整个页面的刷新，而是HTML页面中使用JAVASCRIPT创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据，就像WebClient一样（向服务器发出请求，WebClient wc=new Webclient(); string str=wc.DownLoadString("GetServerTime.ashx"); $("#textbox1").val(s); ），在页面中由XMLHTTPRequest来发布Http请求和获得服务器的返回数据；XMLHTTPRequest是AJAX的核心；

Example 1:

　　1、首先建立一个ashx页面（一般处理程序），在该页面中把当前最新的时间用字符串的形式直接打印到页面上；

View Code

 1     public void ProcessRequest(HttpContext context)
 2   　　　　      {
 3     　　　　        context.Response.ContentType = "text/plain";
 4     　　　　        //context.Response.Write("Hello World");
 5      　　　　       context.Response.Write(DateTime.Now);
 6     　　　　    }
 7 
 8     　　         public bool IsReusable
 9      　　       {
10       　　          get
11       　　         {
12       　　              return false;
13        　   　     }
14 
15 　　      　　}

　　　　2、在建立一个html页面进行测试

　　　　　　　a、添加一个文本框

 <input id="txtId" type="text" />

　　　　　　　b、添加一个按钮，当按钮按下的时候向服务器发出请求，将服务器返回的数据添加到上面的文本框中；

   <input id="btnId" type="button" value="确定" οnclick="btnclick();" />

　　　　　　　c、不用任何的AJAX的框架完成ajax的请求；添加如下代码：

View Code

 1 <script type="text/javascript">
 2 
 3      　　　　　　　　   function btnclick() {
 4           
 5      　　　　　　　　　　     //创建一个xmlhttp对象，相当于WebClient
 6         　　　　　　　　　　    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 7             
 8           　　　　　　　　　　  if (!xmlHttp) {
 9            　　　　　　　　　　　　     alert("初始化XMLHTTP时异常！");
10          　　　　　　　　　　　　       return false;
11       　　　　　　　　　　　      }
12 
13           　　　　　　　　　　  //准备向服务器页面  Handler1.ashx 发出  post  请求
14           　　　　　　　　　　  xmlHttp.open("post", "Handler1.ashx?f=" + new Date, false); //为了避免缓存后面以当前时间做变化实现数据的缓存现象
15           　　　　　　　　　　　  //注册事件，用一个匿名的函数来响应
16           　　　　　　　　　　  xmlHttp.onreadystatechange = function() {
17             
18         　　　　　　　　　　    //readyState表示XMLHttpRequest对象的处理状态：
19 　　　　　　　　　　　　　　//0:XMLHttpRequest对象还没有完成初始化。
20 　　　　　　　　　　　　　　//1:XMLHttpRequest对象开始发送请求。
21 　　　　　　　　　　　　　　//2:XMLHttpRequest对象的请求发送完成。
22 　　　　　　　　　　　　　　//3:XMLHttpRequest对象开始读取服务器的响应。
23 　　　　　　　　　　　　　　//4:XMLHttpRequest对象读取服务器响应结束
24           　　　　　　　　　　  if (xmlHttp.readyState == 4) {
25              　　　　　　　　　  //如果状态码为200，表示成功；300表示重定向，400表示权限问题， 500表示错误；
26             　　　　　　　　　　　　  if (xmlHttp.status == 200) {
27                       　　　　　　　　  //responseText属性为服务器返回的文本
28                       　　　　　　　　　　　　  document.getElementById("txtId").value = xmlHttp.responseText;
29                  　　　　　　　　　　　   }
30                　　　　　　　　　　     else {
31                   　　　　　　　　　　　　     alert("AJAX服务器返回错误");
32                　　　　　　　　　　　　     }
33               　　　　　　　　　　  }
34          　　　　　　　　　　   }
35            　　　　　　　　　　 //向服务器发送请求
36      　　　　　　     　　　　  xmlHttp.send();
37      　　　　　　　  　　 }
38    　　　　　　　　 </script>