?????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......)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。