当前位置：凯发k8官方网 > 编程语言 > asp.net >内容正文

asp.net

asp.net mvc中使用ajax(xmlhttprequest、microsoft ajax library......) -凯发k8官方网

发布时间：2024/10/8 asp.net 0 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了 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,现在启动项目并通过访问: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>
4head>

有了上面的准备，下面就可以编写客户端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_;
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

总结

以上是凯发k8官方网为你收集整理的asp.net mvc中使用ajax(xmlhttprequest、microsoft ajax library......)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。