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

本文介绍如何在ASP.NET MVC中使用AJAX技术提升用户体验,包括使用原生XMLHttpRequest及Microsoft AJAX Library实现异步数据交换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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对象来完成。如下示例代码:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 < scripttype = " text/javascript " >
2 var xmlHttp;
3 function createXMLHttpRequest()
4 {
5if(window.ActiveXObject)
6{
7xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
8}

9elseif(window.XMLHttpRequest)
10{
11xmlHttp=newXMLHttpRequest();
12}

13}

14
15 // 处理方法
16 function AjaxRequest()
17 {
18createXMLHttpRequest();
19varurl="Ajax/AjaxServer?str="+document.getElementById("txt").value;
20xmlHttp.open("GET",url,true);
21xmlHttp.onreadystatechange=onSuccessCallBack;
22xmlHttp.send(null);
23}

24
25 // 回调方法
26 function onSuccessCallBack()
27 {
28if(xmlHttp.readyState==4)//4代表
29{
30if(xmlHttp.status==200)
31{
32document.getElementById("result").innerHTML=xmlHttp.responseText;
33}

34}

35}

36 < / script>

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

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 < input type ="text" id ="txt" />< br />
2 < input type ="button" value ="AjaxRequest" 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方法:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 public ActionResultMsAjaxLibrary()
2 {
3returnView();
4}

OK,现在我们需要将Microsoft AJAX Library引入页面:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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代码如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 < scripttype = " text/javascript " >
2 function AjaxRequest()
3 {
4//请求地址
5varurl="AjaxServer?str="+$get("txt").value;
6
7varwRequest=newSys.Net.WebRequest();
8wRequest.set_url(url);
9wRequest.set_httpVerb("POST");
10wRequest.add_completed(OnSuccessCallBack);
11$get("result").innerText="";
12wRequest.invoke();
13}

14
15 function OnSuccessCallBack(executor,e)
16 {
17//responseAvailable-请求是否成功完成
18if(executor.get_responseAvailable())
19{
20if(document.all)
21$get("result").innerText+=executor.get_responseData();
22}

23else
24{
25if(executor.get_timedOut())
26{
27alert("超时");
28}

29elseif(executor.get_aborted())
30{
31alert("请求被终止");
32}

33}

34}

35 < / script>

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

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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的朋友起到入门的帮助,

本文示例代码下载:点击这里下载

相关文章:

在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值