|
AJAX的好處就是不會(huì)堵塞頁(yè)面,可以提高用戶體驗(yàn),可以減少數(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中也對(duì)AJAX技術(shù)進(jìn)行了整合.本文將以ASP.NET MVC中的AJAX應(yīng)用為主題介紹下AJAX技術(shù)與ASP.NET MVC的整合應(yīng)用. 在此我希望在閱讀本文的你應(yīng)該對(duì)AJAX技術(shù)的數(shù)據(jù)傳輸模式比較清楚,詳細(xì)可以查看我之前寫的兩篇關(guān)于AJAX的數(shù)據(jù)傳輸模式的文章:探索AJAX中的消息傳輸模式(一) 探索AJAX中的消息傳輸模式(二) 一、實(shí)現(xiàn)原理分析 在ASP.NET MVC中,每一個(gè)請(qǐng)求(Request)都將會(huì)被Route到控制器(Controller)下的一個(gè)具體的行為(Action)來處理.那么,如果說我們需要在ASP.NET MVC中使用AJAX,只需要在Action方法中完成業(yè)務(wù)邏輯,并把需要回傳的數(shù)據(jù)寫回到Response中,在客戶端就可以通過JavaScript來處理這些回傳數(shù)據(jù). 對(duì)的,以上思路是完全可行的,ASP.NET MVC的每個(gè)Action就相當(dāng)于Java Web MVC框架的Struts里的Servliet一樣,是完全可以通過Request請(qǐng)求和Response來響應(yīng)請(qǐng)求的. 我們可以先做個(gè)測(cè)試,建立一個(gè)ASP.NET MVC應(yīng)用程序,Views里新建立Ajax目錄,以及新建一Controller(AjaxController),并提供一個(gè)Action方法AjaxServer,該方法需要接受一個(gè)參數(shù),然后將參數(shù)傳轉(zhuǎn)換為大寫后放入Response流. 這個(gè)應(yīng)用示例將使用最原始的XMLHttpRequest對(duì)象來完成。如下示例代碼： 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>
這個(gè)示例很簡(jiǎn)單，就是通過之前做測(cè)試的Action方法，使用XMLHttpRequest直接發(fā)起請(qǐng)求，將頁(yè)面文本框里輸入的字符傳遞到ASP.NET MVC的Action，然后將回傳的結(jié)果顯示在頁(yè)面上的一個(gè)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> 上面介紹了使用XMLHttpRequest對(duì)象來完成AJAX應(yīng)用，下面我們來看看怎么在ASP.NET MVC中使用Microsoft AJAX Library.首先建立一新的ASP.NET MVC頁(yè)面MsAjaxLibrary.aspx，并在控制器里加入相應(yīng)的Action方法： 1
public ActionResult MsAjaxLibrary()2 {3 return View();4 }OK，現(xiàn)在我們需要將Microsoft AJAX Library引入頁(yè)面： 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請(qǐng)求了，這里我們將使用Microsoft AJAX Library的Sys.Net.WebRequest類來完成AJAX調(diào)用.AJAX服務(wù)端將繼續(xù)使用本文之前的Action方法（AjaxServer）做為服務(wù)器來進(jìn)行請(qǐng)求調(diào)用。完整的JS代碼如下： 1
<script type="text/javascript">2 function AjaxRequest()3 {4 //請(qǐng)求地址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 - 請(qǐng)求是否成功完成18 if(executor.get_responseAvailable()) 19 {20 if (document.all)21 $get("result").innerText+=executor.get_responseData();22 }23 else24 {25 if (executor.get_timedOut())26 {27 alert("超時(shí)");28 }29 else if (executor.get_aborted())30 {31 alert("請(qǐng)求被終止");32 }33 }34 }35 </script>
OK，現(xiàn)在我們?cè)诳蛻舳送ㄟ^一個(gè)按扭來執(zhí)行請(qǐng)求，并將響應(yīng)的結(jié)果放置在一個(gè)叫result的div容器里。 1
請(qǐng)輸入英文字母：<input id="txt" type="text" />2 <input id="btnRequest" type="button" value="Request" onclick="AjaxRequest();" />3 <hr />4 <div id="result"></div> 程序運(yùn)行結(jié)果如下： 本文示例代碼下載：點(diǎn)擊這里下載 在ASP.NET MVC中使用ASP.NET AJAX異步訪問WebService 注:原創(chuàng)文章歡迎轉(zhuǎn)載,未經(jīng)允許請(qǐng)注明出處 出處:http://beniao.cnblogs.com 或http://www.cnblogs.com/ 作者:Beniao |
|
|
