您的位置：首页 > 理论基础 > 计算机网络

ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)

2009-05-21 01:41 776 查看

本文示例源代码或素材下载

　　AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术.

　　AJAX技术是纯客户端技术,任何客户端框架(如:Microsoft AJAX Library,Prototype,JQuery等)可以与任何服务器技术配合.在ASP.NET MVC P5中也对AJAX技术进行了整合.本文将以ASP.NET MVC中的AJAX应用为主题介绍下AJAX技术与ASP.NET MVC的整合应用.

　　在此我希望在阅读本文的你应该对AJAX技术的数据传输模式比较清楚,详细可以查看我之前写的两篇关于AJAX的数据传输模式的文章:探索AJAX中的消息传输模式(一)　　探索AJAX中的消息传输模式(二)

　　一、实现原理分析

　　在ASP.NET MVC中,每一个请求(Request)都将会被Route到控制器(Controller)下的一个具体的行为(Action)来处理.那么,如果说我们需要在ASP.NET MVC中使用AJAX,只需要在Action方法中完成业务逻辑,并把需要回传的数据写回到Response中,在客户端就可以通过JavaScript来处理这些回传数据.

　　对的,以上思路是完全可行的,ASP.NET MVC的每个Action就相当于Java Web MVC框架的Struts里的Servliet一样,是完全可以通过Request请求和Response来响应请求的.

　　我们可以先做个测试,建立一个ASP.NET MVC应用程序,Views里新建立Ajax目录,以及新建一Controller(AjaxController),并提供一个Action方法AjaxServer,该方法需要接受一个参数,然后将参数传转换为大写后放入Response流.

　　OK,现在启动项目并通过访问:http://localhost:2832/Ajax/AjaxServer?str=abcdefg查看运行结果,页面上输出了ABCDEFG,这正是我们想要的效果,证明上面的思路是正确的.那好,下面我就用一个简单的Ajax请求来实现在ASP.NET MVC中最简单的AJAX应用.

二、在ASP.NET MVC中最简单的AJAX应用

　　这个应用示例将使用最原始的XMLHttpRequest对象来完成。如下示例代码：

1<script type="text/javascript">
2　　var xmlHttp;
3　　function createXMLHttpRequest()
4　　{
5　　　　if(window.ActiveXObject)
6　　　　{
7　　　　　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
8　　　　}
9　　　　else if(window.XMLHttpRequest)
10　　　　{
11　　　　　　xmlHttp = new XMLHttpRequest();
12　　　　}
13　　}
14　　
15　　//处理方法
16　　function AjaxRequest()
17　　{
18　　　　createXMLHttpRequest();
19　　　　var url= "Ajax/AjaxServer?str="+document.getElementById("txt").value;
20　　　　xmlHttp.open("GET",url,true);
21　　　　xmlHttp.onreadystatechange=onSuccessCallBack;
22　　　　xmlHttp.send(null);
23　　}
24　　
25　　//回调方法
26　　function onSuccessCallBack()
27　　{
28　　　　if(xmlHttp.readyState==4)　 //4代表
29　　　　{
30　　　　　　if(xmlHttp.status==200)
31　　　　　　{
32　　　　　　　　document.getElementById("result").innerHTML=xmlHttp.responseText;
33　　　　　　}
34　　　　}
35　　}
36</script>

　　这个示例很简单，就是通过之前做测试的Action方法，使用XMLHttpRequest直接发起请求，将页面文本框里输入的字符传递到ASP.NET MVC的Action，然后将回传的结果显示在页面上的一个div里。 Html的代码如下：

1 <input type="text" id="txt" /><br />
2 <input type="button" value="Ajax Request" onclick="AjaxRequest();" />
3 <hr />
4 <div id="result"></div>

　　OK,我们使用XMLHttpRequest的AJAX应用可以实现,那么如果需要将上面的应用示例转化为如Microsoft AJAX Library,Prototype,JQuery等类似的框架上同样也是如鱼得水,复杂的数据同样可以将起序列化为JSON或是XML后进行传输.

　　三、在ASP.NET MVC中使用Microsoft AJAX Library

　　上面介绍了使用XMLHttpRequest对象来完成AJAX应用，下面我们来看看怎么在ASP.NET MVC中使用Microsoft AJAX Library.首先建立一新的ASP.NET MVC页面MsAjaxLibrary.aspx，并在控制器里加入相应的Action方法：

1public ActionResult MsAjaxLibrary()
2{
3　　return View();
4}

　　OK，现在我们需要将Microsoft AJAX Library引入页面：

1<head runat="server">
2　　<title></title>
3　　<script type="text/javascript" src="http://www.cnblogs.com/Content/MicrosoftAjax.js"></script>
4</head>

　　有了上面的准备，下面就可以编写客户端JavaScript来进行AJAX请求了，这里我们将使用Microsoft AJAX Library的Sys.Net.WebRequest类来完成AJAX调用.AJAX服务端将继续使用本文之前的Action方法（AjaxServer）做为服务器来进行请求调用。完整的JS代码如下：

1<script type="text/javascript">
2function AjaxRequest()
3{
4　　//请求地址
5　　var url= "AjaxServer?str="+$get("txt").value;
6　　
7　　var wRequest =　new Sys.Net.WebRequest();
8　　wRequest.set_url(url);
9　　wRequest.set_httpVerb("POST");
10　　wRequest.add_completed(OnSuccessCallBack);
11　　$get("result").innerText="";
12　　wRequest.invoke();
13}
14
15function OnSuccessCallBack(executor, e)
16{　　　　
17　　// responseAvailable - 请求是否成功完成
18　　if(executor.get_responseAvailable())
19　　{
20　　　　if (document.all)
21　　　　　　$get("result").innerText+=executor.get_responseData();
22　　}
23　　else
24　　{
25　　　　if (executor.get_timedOut())
26　　　　{
27　　　　　　alert("超时");
28　　　　}
29　　　　else if (executor.get_aborted())
30　　　　{
31　　　　　　alert("请求被终止");
32　　　　}
33　　}
34}
35</script>

　　OK，现在我们在客户端通过一个按扭来执行请求，并将响应的结果放置在一个叫result的div容器里。

1请输入英文字母：<input id="txt" type="text" />
2<input id="btnRequest" type="button" value="Request" onclick="AjaxRequest();" />
3<hr />
4<div id="result"></div>

　　程序运行结果如下：

　　关于ASP.NET MVC与JQuery、ExtJS等其他的框架的集成使用这里就不在介绍了，有兴趣的朋友可以查看相关资料了解。本文作为ASP.NET MVC和AJAX技术整合使用的基础性文章，希望能对学习在ASP.NET MVC中使用AJAX的朋友起到入门的帮助，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航