AJAX在MVC中的应用

 

 提起AJAX都应该熟知，是一种现有的标准的方法，能够做到页面上的局部刷新，下面着重谈一下Ajax在MVC中的应用。

 AJAX五部曲

 说到Ajax都应该知道常用的几部操作。

   1.先创建XMLHttpRequest对象

   2.获取页面发送对象

   3.设置状态操作

   4.获取文本

   5.发送

  下面看一个小小的实例，来理解一下

 

<span style="font-family:SimSun;font-size:18px;"><script language="javascript" type="text/javascript">
    var xmlRequest;

    function CreateRequest() {
        /* 创建XMLHttpRequest对象 */
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
    }
    function ResponseHandler() {
        if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
            /* 如果通信成功，并且响应正常，执行以下操作 */

            var reqContent = xmlRequest.responseText;
            document.getElementById("browser").innerHTML = reqContent;
        }
    }
    function AjaxAccess() {
        /* 异步请求 */

        xmlRequest = CreateRequest(); 				//创建XMLHttpRequest对象
        xmlRequest.onreadystatechange = ResponseHandler; //设置回调函数
        xmlRequest.open("GET", "/home/Get_page"); 	//初始化请求对象
        xmlRequest.send(null); 					//发送请求信息
    }

    window.onload = function () {
        document.getElementById("Access").onclick = AjaxAccess; //设置按钮单击事件
    }
</script>

<input id="Access" type="button" value="Access" /></span>

<span style="font-family:SimSun;font-size:18px;"><br />
<div id="browser"></div></span>

以上的DEMO就是通过ajax来异步的获取/home下的Get_page方法的返回值，并且把返回值异步赋给了brower的div，这就是我们经常见到的，当然这里采用的获取的是xmlRequest.responseText，还可以通过XMLRequest.responseXML来获取XML数据。

 使用AJAX获取数据

 在MVC中常用的有两种，下面将会谈到

 $.GET()方法

 格式var xmlReq=$.get(url,[data],[callback],[type]);

 url参数是一个字符串，表示异步请求的url地址；data参数用于指定执行异步请求时附加的参数列表，常用来向页面传递参数，他们以键值对的形式出现，是可选参数；callback参数指定当响应成功的时候的回调函数，是可选参数；type用于设置返回内容的格式，可选项有xml、html、script、json、json和text，默认值是html。其中callback可以接受两个值，分别表示请求结果和相应的状态。

 

 语法如下

<span style="font-family:SimSun;font-size:18px;">   function(data,textStatus)
        {
            //data：请求结果，可以是html、xml。text和json等
            //textstatus：响应状态，可能是success等
        }</span>

 

  下面来看一个例子

  页面有一个下拉列表框，当我们选择相应的值时，来在界面上显示相应的文字。

  设计思路

  把组合框选择的值，通过get的方式传送到后台，进行相应判断后把值在返回到前台中。

  Get方法传送值

<span style="font-family:SimSun;font-size:18px;"><script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#Search").click(function () {

            /* 使用Get方式请求指定URL */
            $.get("/home/Get_data",
		{
		    key: $("#blogClass").val()
		},
		function (data) {
		    $("#blogList").html(data);
		});
        });
        $("#Search").click();  //触发一次单击事件
    });
</script>

<select id="blogClass">
<option selected="selected">所有</option>
<option>CSS</option>
<option>C#</option>
</select>
<input type="button" id="Search" value="Search"/>
<div id="blogList" style=" margin-top:20px"></div></span>

  后台处理 

<span style="font-family:SimSun;font-size:18px;">  public void Get_data()
        {
            Dictionary<string, string> blogClass = new Dictionary<string, string>();
            blogClass.Add("CSS", "CSS中的padding");
            blogClass.Add("C#", "C#面向对象");
            blogClass.Add("所有","CSS中的padding，C#面向对象");
            string key = Request["key"];  //获取请求服务器的关键字
            foreach (string str2 in blogClass.Keys)
            {
                if (str2 == key)
                { 
                    Response.Write(blogClass[key]);
                }
            }
        }</span>

 在此实例中通过Request["key"]的形式来捕捉传递的参数，然后通过参数来进行相应的处理。

 

   $.post方法

   语法结构

   var xmlReq=$.post(url,[data],[callback],[type])

   我们可以看到该方法的语法结构与$.get类似，是的，都相同，只不过$.get方法时一个GET方式提交的数据，所有的参数信息都追加到URL后面，而web请求一般对URL长度有限制，所以就不能随心所欲的传递参数了，但$.post方法是将参数作为消息发送到服务器的，对数据长度没有影响。并且浏览器的缓存功能会把所有请求的URL进行临时缓存，所以通过$.get形式可能会有安全上的隐患。$.get方式在提交的时候效率要不$.post快很多。

 

  实例 

<span style="font-family:SimSun;font-size:18px;"><script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            $.post('/home/Page_to', {
                text: 'my string',
                number: 23
            },
            function (data) {
                alert('Your data has been saved.');
                $("#result").text(data);
            });
        });
    })
</script></span>

还是相同的功能，把参数TEXT和number值传递到/home/page_to的方法中，然后处理后的返回值就是data。

后台page_to方法如下

<span style="font-family:SimSun;font-size:18px;">  public void Page_to()
        {
            string str = Request["text"];
            Response.Write("返回结果是："+str);
        }</span>

思路与$.get是一样的。

总结

 以上就是在MVC中经常用到的操作，基本上就这么多，显示通过异步的形式向某个页面传递参数，然后把通过参数处理后的数据返回。经常用到的就是$.get和$.post操作。