AJAX的好處就是不會堵塞頁面,可以提高用戶體驗,可以減少數(shù)據(jù)傳輸尺寸,提高應(yīng)用程序的性能.目前,AJAX技術(shù)可以說是已經(jīng)成為WEB開發(fā)的標(biāo)準(zhǔn)技術(shù).
AJAX技術(shù)是純客戶端技術(shù),任何客戶端框架(如:Microsoft AJAX Library,Prototype,JQuery等)可以與任何服務(wù)器技術(shù)配合.在ASP.NET MVC P5中也對AJAX技術(shù)進(jìn)行了整合.本文將以ASP.NET MVC中的AJAX應(yīng)用為主題介紹下AJAX技術(shù)與ASP.NET MVC的整合應(yīng)用.
在此我希望在閱讀本文的你應(yīng)該對AJAX技術(shù)的數(shù)據(jù)傳輸模式比較清楚,詳細(xì)可以查看我之前寫的兩篇關(guān)于AJAX的數(shù)據(jù)傳輸模式的文章:
探索AJAX中的消息傳輸模式(一) 探索AJAX中的消息傳輸模式(二) 一、實現(xiàn)原理分析
在ASP.NET MVC中,每一個請求(Request)都將會被Route到控制器(Controller)下的一個具體的行為(Action)來處理.那么,如果說我們需要在ASP.NET MVC中使用AJAX,只需要在Action方法中完成業(yè)務(wù)邏輯,并把需要回傳的數(shù)據(jù)寫回到Response中,在客戶端就可以通過JavaScript來處理這些回傳數(shù)據(jù).
對的,以上思路是完全可行的,ASP.NET MVC的每個Action就相當(dāng)于Java Web MVC框架的Struts里的Servliet一樣,是完全可以通過Request請求和Response來響應(yīng)請求的.
我們可以先做個測試,建立一個ASP.NET MVC應(yīng)用程序,Views里新建立Ajax目錄,以及新建一Controller(AjaxController),并提供一個Action方法AjaxServer,該方法需要接受一個參數(shù),然后將參數(shù)傳轉(zhuǎn)換為大寫后放入Response流.
OK,現(xiàn)在啟動項目并通過訪問:
http://localhost:2832/Ajax/AjaxServer?str=abcdefg查看運行結(jié)果,頁面上輸出了ABCDEFG,這正是我們想要的效果,證明上面的思路是正確的.那好,下面我就用一個簡單的Ajax請求來實現(xiàn)在ASP.NET MVC中最簡單的AJAX應(yīng)用.
二、在ASP.NET MVC中最簡單的AJAX應(yīng)用
這個應(yīng)用示例將使用最原始的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
//回調(diào)方法
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直接發(fā)起請求，將頁面文本框里輸入的字符傳遞到ASP.NET MVC的Action，然后將回傳的結(jié)果顯示在頁面上的一個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應(yīng)用可以實現(xiàn),那么如果需要將上面的應(yīng)用示例轉(zhuǎn)化為如Microsoft AJAX Library,Prototype,JQuery等類似的框架上同樣也是如魚得水,復(fù)雜的數(shù)據(jù)同樣可以將起序列化為JSON或是XML后進(jìn)行傳輸.
三、在ASP.NET MVC中使用Microsoft AJAX Library
上面介紹了使用XMLHttpRequest對象來完成AJAX應(yīng)用，下面我們來看看怎么在ASP.NET MVC中使用Microsoft AJAX Library.首先建立一新的ASP.NET MVC頁面MsAjaxLibrary.aspx，并在控制器里加入相應(yīng)的Action方法：
1
public ActionResult MsAjaxLibrary()
2
{
3
return View();
4
}
OK，現(xiàn)在我們需要將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>
有了上面的準(zhǔn)備，下面就可以編寫客戶端JavaScript來進(jìn)行AJAX請求了，這里我們將使用Microsoft AJAX Library的Sys.Net.WebRequest類來完成AJAX調(diào)用.AJAX服務(wù)端將繼續(xù)使用本文之前的Action方法（AjaxServer）做為服務(wù)器來進(jìn)行請求調(diào)用。完整的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，現(xiàn)在我們在客戶端通過一個按扭來執(zhí)行請求，并將響應(yīng)的結(jié)果放置在一個叫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>
程序運行結(jié)果如下：
關(guān)于ASP.NET MVC與JQuery、ExtJS等其他的框架的集成使用這里就不在介紹了，有興趣的朋友可以查看相關(guān)資料了解。本文作為ASP.NET MVC和AJAX技術(shù)整合使用的基礎(chǔ)性文章，希望能對學(xué)習(xí)在ASP.NET MVC中使用AJAX的朋友起到入門的幫助，
本文示例代碼下載：
點擊這里下載相關(guān)文章:
在ASP.NET MVC中使用ASP.NET AJAX異步訪問WebService 注:原創(chuàng)文章歡迎轉(zhuǎn)載,未經(jīng)允許請注明出處 出處:http://beniao.cnblogs.com 或
http://www.cnblogs.com/ 作者:Beniao
