本文内容:
一、导言
二、XMLHttp+WebForm模式
二、XMLHttp+WebForm模式
三、XMLHttp+HttpHandler模式
四、ASP.NET 2.0/3.5回调模式
五、AJAX框架模式
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
一、导言
在这篇文章中，将介绍在ASP.NET环节下的几种常用的AJAX模式。例如：XMLHttpRequest+WebForms,XMLHttpRequest+HttpHandlers,CallBacks,以及使用AJAX框架等，下面将以示例结合的方式展开介绍这一系列常用模式。本文之后将提供示例代码下载。
二、XMLHttp+WebForm模式
在这篇文章中，将介绍在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对象
2
var
xmlHttp;
3
function
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
//
发起异步请求
21
function
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
//
回调处理函数
30
function
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对象
2
var
xmlHttp;3
function
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
//
发起异步请求
21
function
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
//
回调处理函数
30
function
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对象的方法，最后通过回调函数更新页面显示。
（2）、服务端
服务端就是一个WebForm，接受客户端传递的参数然后将其转化为大写后返回给客户端。
1
protected
void
Page_Load(
object
sender, EventArgs e)
2
{
3 if (!IsPostBack)
4 {
5 string name = Request.QueryString["name"];
6 Response.Write(name.ToUpper());
7 Response.Flush();
8 Response.End();
9 }
10}
protected
void
Page_Load(
object
sender, EventArgs e)2
{3
if (!IsPostBack)4
{5
string name = Request.QueryString["name"];6
Response.Write(name.ToUpper());7
Response.Flush();8
Response.End();9
}10
}
三、XMLHttp+HttpHandler模式
此模式和上一种形式上没有太大的差别，只是服务端的处理对象不同，一个是WebForm一个则是HttpHandler。在HttpHandler里通过Request对象获取请求的参数，然后通过Response对象将结果返回，是直接通过HttpHandler的ProcessRequest方法来处理的。OK，既然是这样，那么我们只需要在上一模式的基础上将请求Url修改为HttpHandler就OK了，如下：
1
public
class
AjaxHandler : IHttpHandler
2
{
3
4 public void ProcessRequest(HttpContext context)
5 {
6 context.Response.ContentType = "text/plain";
7 string name = context.Request.QueryString["name"];
8 context.Response.Write(name.ToUpper());
9 }
10
11 public bool IsReusable
12 {
13 get
14 {
15 return false;
16 }
17 }
18}
public
class
AjaxHandler : IHttpHandler2
{3
4
public void ProcessRequest(HttpContext context)5
{6
context.Response.ContentType = "text/plain";7
string name = context.Request.QueryString["name"];8
context.Response.Write(name.ToUpper());9
}10
11
public bool IsReusable12
{13
get14
{15
return false;16
}17
}18
}
四、ASP.NET 2.0/3.5回调模式
ASP.NET的回调，其实很好理解，就是使用ICallbackEventHandler接口，通过实现RaiseCallbackEvent()和GetCallbackResult()方法来实现回调，最后通过调用ClientScript.GetCallbackEventReference()方法实现Ajax效果。看看下面这个示例：
1
namespace
AjaxPattern._3
2
{
3 public partial class AjaxForm : System.Web.UI.Page,ICallbackEventHandler
4 {
5 protected void Page_Load(object sender, EventArgs e)
6 {
7
8 }
9
10 string text = string.Empty;
11
12 public string GetCallbackResult()
13 {
14 return text;
15 }
16
17 public void RaiseCallbackEvent(string eventArgument)
18 {
19 text = DateTime.Now.ToLocalTime().ToString();
20 }
21 }
22}
namespace
AjaxPattern._32
{3
public partial class AjaxForm : System.Web.UI.Page,ICallbackEventHandler4
{5
protected void Page_Load(object sender, EventArgs e)6
{7
8
}9
10
string text = string.Empty;11
12
public string GetCallbackResult()13
{14
return text;15
}16
17
public void RaiseCallbackEvent(string eventArgument)18
{19
text = DateTime.Now.ToLocalTime().ToString();20
}21
}22
}
上 面便是实现了ICallbackEventHandler，在RaiseCallbackEvent方法里将当前时间返回，客户端通过调用 ClientScript.GetCallbackEventReference()方法，来实现Ajax，客户端代码如下：
1
<
script type
=
"
text/javascript
"
>
2
function
receiveServerData(arg,context)
3
{
4 document.getElementById("result").innerHTML=arg;
5}
6
7
function
callServer(arg,context)
8
{
9 <%=ClientScript.GetCallbackEventReference(this,"arg","receiveServerData","context") %>;
10}
11
<
/
script>
<
script type
=
"
text/javascript
"
>
2
function
receiveServerData(arg,context)3
{4
document.getElementById("result").innerHTML=arg;5
}
6
7
function
callServer(arg,context)8
{9
<%=ClientScript.GetCallbackEventReference(this,"arg","receiveServerData","context") %>;10
}
11
<
/
script>
现在我们就可以通过调用callServer方法去回调服务端的方法了，html如下：
1
<
input
type
="button"
value
="Submit"
onclick
="callServer()"
/>
2 < hr />
3 < div id ="result" >
4
5 </ div >
2 < hr />
3 < div id ="result" >
4
5 </ div >
以上三种模式相比成型的AJAX框架来说使用起比较麻烦，没有框架那么直接，通过调用一个请求方法就搞定AJAX请求。不过各自也有各自的好处，在我们的实际开发中应该根据实际需求来选择适合自己的AJAX模式。
五、AJAX框架模式
此模式，顾名思义就是使用成型的AJAX框架来开发AJAX应用。如：JQuery,ASP.NET AJAX等等。具体的使用我在这里就不在做重复的示例和介绍了，有兴趣的朋友可以看看我写的其他有关AJAX框架的文章。
相关文章：
JavaScript与Web Service组合实现无刷新交互 ----使用ASP.NET AJAX
ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......) ----包括JQuery
ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......) ----包括JQuery
本文转自 beniao 51CTO博客，原文链接：http://blog.51cto.com/beniao/106631，如需转载请自行联系原作者
