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的朋友起到入门的帮助，

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

相关文章:

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

注:原创文章欢迎转载,请务必注明出处    作者:Beniao

出处:http://beniao.cnblogs.com 或http://www.cnblogs.com/

转载于:https://www.cnblogs.com/beniao/archive/2008/10/06/1304242.html

ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)相关推荐

  1. Asp.net mvc中的Ajax处理

    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...

  2. 如何在 ASP.NET MVC 中集成 AngularJS

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  3. html action能跨域么,ASP.NET MVC 中设置跨域

    原标题:ASP.NET MVC 中设置跨域 来源:GetPower cnblogs.com/gdpw/p/9236661.html 程序员共读整理发布,转载请联系作者获得授权ASP.NET MVC中设 ...

  4. 在 ASP.NET MVC 中使用 Chart 控件

    在 .NET 3.5 的时候,微软就提供了一个 Chart 控件,网络上有大量的关于在 VS2008 中使用这个控件的文章,在 VS2010 中,这个控件已经被集成到 ASP.NET 4.0 中,可以 ...

  5. 在asp.net mvc中使用PartialView返回部分HTML段

    问题链接: MVC怎样实现异步调用输出HTML页面 该问题是个常见的 case, 故写篇文章用于提示新人. 在asp.net mvc中返回View时使用的是ViewResult,它继承自ViewRes ...

  6. ASP.NET MVC中controller和view相互传值的方式

    ASP.NET MVC中Controller向view传值的方式: ViewBag.ViewData.TempData 单个值的传递 Json 匿名类型 ExpandoObject Cookie Vi ...

  7. [转载]Asp.net MVC中Controller返回值类型

    Asp.net MVC中Controller返回值类型 在mvc中所有的controller类都必须使用"Controller"后缀来命名 并且对Action也有一定的要求: 必须 ...

  8. ASP.NET MVC教程五：ASP.NET MVC中的路由

    一.概述 在ASP.NET MVC架构中,控制器在3大核心构件中处于中心地位,通过控制器支配模型和视图,然而从浏览器发出的请求到控制器还需要路由的协助,路由将特定的请求和控制器的动作对应起来. 在AS ...

  9. 通过源代码研究ASP.NET MVC中的Controller和View（三）

    通过源代码研究ASP.NET MVC中的Controller和View(一) 通过源代码研究ASP.NET MVC中的Controller和View(二) 第三篇来了,上一篇我已经把VirtualPa ...

最新文章

  1. 为什么您应该使用基于标准的开发实践
  2. 第十一天 • 库塔山植物园
  3. c#对象集合去重_C# List 对象去重
  4. 深层神经网络难以训练的原因
  5. 无线路由器的WDS功能如何配置?
  6. kotlin 第一个程序_Kotlin程序添加两个矩阵
  7. 初学python的format之美
  8. 程序员拒绝一个合理需求的15个方法！
  9. bootstrap4高度占一半_减肥选对了碳水，意味着成功了一半
  10. Oracle 20c 新特性：原生的 JSON 数据类型(Native JSON Datatype)
  11. 问题六十八：着色模型（shading model）（2）——光照模型（Light model）
  12. 应用程序中主键ID生成与UUID
  13. 矩阵乘法 算法训练 试题_计算方法练习题及答案汇总（共八套）.docx
  14. 独家 | 这张骑马的宇航员图片是AI感知世界的一个里程碑（附链接）
  15. Galera Cluster For MySQL
  16. ubuntu 命令行更换软件源
  17. 苹果手机无法更新系统问题
  18. 2018.8.4T3（大容斥）
  19. Grafana的版本升级和数据迁移
  20. 分享如何从Spring官网下载PDF文档

热门文章

  1. Struts2框架概述及运行流程
  2. git 常用别名设置
  3. Android系统自带样式(@android:style/)
  4. 在eclipse中查看Android源代码
  5. 单片机串行收发电路制作记录
  6. mongodb 3.4 安装_暴雨免安装中文版下载
  7. 星特朗望远镜怎么样_入手曝光评测双筒望远镜星特朗和博冠有何区别？哪个好？体验报告揭秘...
  8. Linux / TCPIP / 判断 client 已经关闭的方法
  9. 服务器远程显示用户忙,服务器远程显示用户忙
  10. python 节点_python在以太坊开发中节点和网络如何选择？