综述ASP.NET下的AJAX模式

综述ASP.NET下的AJAX模式2011-08-08 博客园 Bēniaǒ本文内容:

一、导言

二、XMLHttp+WebForm模式

三、XMLHttp+HttpHandler模式

四、ASP.NET 2.0/3.5回调模式

五、AJAX框架模式

一、导言

在这篇文章中，将介绍在ASP.NET环节下的几种常用的AJAX模式。例如： XMLHttpRequest+WebForms,XMLHttpRequest+HttpHandlers,CallBacks,以及使用AJAX框架等，下面将以示例结合的方式展开介绍这一系列常用模式。本文之后将提供示例代码下载。

二、XMLHttp+WebForm模式

或许大家都比较清楚的记得，XMLHttp+WebForm模式是ASP.NET下最原始的AJAX模式。在这种模式下，是通过JavaScript去操作XMLHttpRequest对象，发送异步请求到服务器端的WEB窗体的形式。另一方面，在服务端创建WEB窗体可以直接用来接受XMLHTTP的请求。以此，浏览器的XMLHttpRequest对象便成了服务器端和客户端的一种良好的沟通方式。

在这一节将结合一个简单的示例来介绍，希望能够帮助大家更直观的理解XMLHttp+WebForm模式的这种 AJAX模式。

（1）、客户端

客户端里创建XMLHttpRequest对象以及发起异步请求我们将其JavaScript封装在一个Ajax.js文件里。这样部分方法可以达到重用，在Ajax.js里有三个方法，newXmlHttpReqeust,sendRequest和 onSuccessCallBack方法，详细如下：

1//创建XMLHttpRequest对象
2var xmlHttp;
3function newXMLHttpRequest（） {
4
5  if （window.XMLHttpRequest） {
6    xmlHttp = new XMLHttpRequest（）;
7  } else if （window.ActiveXObject） {
8    try {
9      xmlHttp = new ActiveXObject（"Msxml2.XMLHTTP"）;
10    } catch （e1） {
11      try {
12        xmlHttp = new ActiveXObject（"Microsoft.XMLHTTP"）;
13      } catch （e2） {
14      }
15    }
16   }
17    return xmlHttp;
18}
19
20//发起异步请求
21function sendRequest（）{
22  newXMLHttpRequest（）;
23  var url="AjaxForm.aspx？name="+document.getElementById（"txtName"）.value;
24   xmlHttp.open（"GET",url,true）;
25  xmlHttp.onreadystatechange=onSuccessCallBack;
26  xmlHttp.send（null）;
27}
28
29//回调处理函数
30function onSuccessCallBack（）{
31  if （xmlHttp.readyState == 4）
32  {
33    if （xmlHttp.status == 200）
34    {
35      document.getElementById（"result"）.innerHTML = xmlHttp.responseText;
36    }
37    else
38    {
39      document.getElementById（"result"）.innerHTML=result.status;
40    }
41  }
42}

客户端调用异步发起请求前首先执行创建XmlHttpRequest对象的方法，最后通过回调函数更新页面显示。