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

简介:

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,现在启动项目并通过访问: [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>
     
     这个示例很简单,就是通过之前做测试的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方法:
1 public  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 " >
 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
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>
 
     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的朋友起到入门的帮助,
 
本文示例代码下载: 点击这里下载




本文转自 beniao 51CTO博客,原文链接:http://blog.51cto.com/beniao/104188,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
27天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
25 0
|
27天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
4 0
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
173 2
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
2月前
|
安全 C# 开发者
.NET开源的一键自动化下载、安装、激活Microsoft Office利器
.NET开源的一键自动化下载、安装、激活Microsoft Office利器
|
3月前
|
XML 前端开发 定位技术
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
25 0
|
3月前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
121 0
|
8月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
112 0
|
9月前
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
66 0

相关实验场景

更多