提起AJAX都应该熟知，是一种现有的标准的方法，能够做到页面上的局部刷新，下面着重谈一下Ajax在MVC中的应用。
AJAX五部曲
说到Ajax都应该知道常用的几部操作。
1.先创建XMLHttpRequest对象
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,[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。
<span style="font-family:SimSun;font-size:18px;"> public void Page_to()
{
string str = Request["text"];
Response.Write("返回结果是："+str);
}</span>
思路与$.get是一样的。
总结
以上就是在MVC中经常用到的操作，基本上就这么多，显示通过异步的形式向某个页面传递参数，然后把通过参数处理后的数据返回。经常用到的就是$.get和$.post操作。
