AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术.
AJAX技术是纯客户端技术,任何客户端框架(如:Microsoft AJAX Library,Prototype,JQuery等)可以与任何服务器技术配合.在ASP.NET MVC P5中也对AJAX技术进行了整合.本文将以ASP.NET MVC中的AJAX应用为主题介绍下AJAX技术与ASP.NET MVC的整合应用.
一、实现原理分析
在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流.
![](http://images.cnblogs.com/cnblogs_com/beniao/ajax/mvcajaxtree.jpg?x-oss-process=image/resize,w_1400/format,webp)
OK,现在启动项目并通过访问: [url]http://localhost:2832/Ajax/AjaxServer?str=abcdefg[/url]查看运行结果,页面上输出了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>
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
2
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
3
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
4
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
5
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
6
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
7
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
8
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
9
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
10
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
11
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
12
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
13
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
14
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
15
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
16
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
17
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
18
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
19
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
20
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
21
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
22
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
23
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
24
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
25
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
26
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
27
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
28
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
29
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
30
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
31
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
32
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
33
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
34
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
35
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
36
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
这个示例很简单,就是通过之前做测试的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 >
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方法:
1
public
ActionResult MsAjaxLibrary()
2
{
3
return View();
4
}
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
2
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
3
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
4
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
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
>
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
2
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
3
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
4
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
有了上面的准备,下面就可以编写客户端JavaScript来进行AJAX请求了,这里我们将使用Microsoft AJAX Library的Sys.Net.WebRequest类来完成AJAX调用.AJAX服务端将继续使用本文之前的Action方法(AjaxServer)做为服务器来进行请求调用。完整的JS代码如下:
1
<
script type
=
"
text/javascript
"
>
2
function
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![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
15
function
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>
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
2
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
3
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
4
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
5
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
6
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
7
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
8
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
9
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
10
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
11
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
12
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
13
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
14
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
15
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
16
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
17
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
18
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
19
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
20
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
21
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
22
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
23
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
24
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
25
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
26
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
27
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
28
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
29
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
30
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif?x-oss-process=image/resize,w_1400/format,webp)
31
![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif?x-oss-process=image/resize,w_1400/format,webp)
32
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
33
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
34
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif?x-oss-process=image/resize,w_1400/format,webp)
35
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
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
>
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
2
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
3
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
4
![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif?x-oss-process=image/resize,w_1400/format,webp)
程序运行结果如下:
关于ASP.NET MVC与JQuery、ExtJS等其他的框架的集成使用这里就不在介绍了,有兴趣的朋友可以查看相关资料了解。本文作为ASP.NET MVC和AJAX技术整合使用的基础性文章,希望能对学习在ASP.NET MVC中使用AJAX的朋友起到入门的帮助,
![](http://images.cnblogs.com/cnblogs_com/beniao/ajax/ajaxLibraryResult.jpg?x-oss-process=image/resize,w_1400/format,webp)
关于ASP.NET MVC与JQuery、ExtJS等其他的框架的集成使用这里就不在介绍了,有兴趣的朋友可以查看相关资料了解。本文作为ASP.NET MVC和AJAX技术整合使用的基础性文章,希望能对学习在ASP.NET MVC中使用AJAX的朋友起到入门的帮助,
本文示例代码下载:
点击这里下载
本文转自 beniao 51CTO博客,原文链接:http://blog.51cto.com/beniao/104188,如需转载请自行联系原作者