原文:
http://www.microsoft.com/china/msdn/library/webservices/asp.net/us0501ASPNETPerformance.mspx?mfr=true
適用於:
AJAX(非同步 JavaScript 和 XML)
Microsoft AJAX.NET
Microsoft ASP.NET
摘要:瞭解如何將 AJAX(非同步 JavaScript 和 XML)用於您的 Microsoft ASP.NET 應用程式,使其互動性更強、響應更及時。
下載本文的程式碼範例 AjaxASPNETCS.msi(使用 C# 語言)
下載本文的程式碼範例 AjaxASPNETVB.msi(使用 Visual Basic 語言)
本頁內容
|
簡介 |
|
什麼是 AJAX? |
|
用於 ASP.NET 的 AJAX |
|
手頭的 AJAX |
|
AJAX 與您 |
|
結論 |
簡介
自從開始 Web 編程以來,在 Web 應用程式和傳統型應用程式之間一直存在著許多取捨。例如,人們通常認為 Web 應用程式提供的使用者介面類型沒有傳統型應用程式提供的使用者介面類型那樣豐富。另一方面,Web 應用程式是獨立的平台,其開發機制比較簡單。提供響應更及時的應用程式看似是一項簡單的任務,但對於 Web 開發人員來說卻是一直以來需要攻克的領域。
傳統意義上,只能通過向 Web 服務器提交新的請求來檢索對使用者輸入所做的響應。在某些情況下,開發人員可以使用 JavaScript 在用戶端上載入所有響應,從而提供更好的使用者體驗。此技術的常見樣本是基於所選省/地區來動態載入一系列州或省。遺憾的是,在很多情況下,不將所有響應都返回或載入到 JavaScript 要更好。返回操作會使過多的 UI 中斷連線,或在用戶端上需要過量的資料,這經常導致產生不易讀的 JavaScript。AJAX 提供了一種新的中間選擇,能夠在維持及時響應和靈活性的同時利用基於伺服器的應用程式。
返回頁首
什麼是 AJAX?
AJAX 是 Asynchronous JavaScript And XML(非同步 JavaScript 和 XML)的縮寫,它不是一項技術,而是很多技術的集合。AJAX 使用通訊技術(通常為 SOAP 和 XML)發送和接收對伺服器的非同步請求/響應,然後利用顯示技術(JavaScript、DOM、HTML 和 CSS)處理響應。如今,使用 AJAX 的應用程式是合法的,因為多數瀏覽器都支援這項必需的技術。有關 AJAX 更詳細的定義,請訪問 AJAX Wikipedia entry(英文)。
AJAX 到底是什嗎?AJAX 使您能夠通過 JavaScript 調用執行伺服器端方法,而不需要重新整理瀏覽器。將它視為發生於使用者背景小型請求/響應。如果您仍不清楚 AJAX 是什麼,請看 Google 上的兩個常見樣本:Google Suggests(英文)和 Google Maps(英文)。如果您不熟悉 AJAX,這兩個應用程式的響應會使您有點興奮。
返回頁首
用於 ASP.NET 的 AJAX
很多因素促使 AJAX 應運而生。您可能不想花費幾個小時或幾天來瞭解 AJAX 的內部原理,而是更希望現在就開始建立啟用了 AJAX 的應用程式,來滿足現有需求(如果您確實想知道 AJAX 內部工作原理,我肯定不是可以詢問的人)。開發人員可以用來快速入門的工具有很多。不過我們將特別關注由 Michael Schwarz 編寫的原始碼開放的免費 Ajax.NET。Ajax.NET 考慮到所有的實現細節是基於 .NET 的,並且能夠被擴充。Microsoft ASP.NET 2.0 通過用戶端回調功能(英文)引入了獨具特色的非同步回調,並且最近宣布(英文)代號為“Atlas”的 AJAX 正在實現中。
術語可能有些混亂,但是當我介紹 AJAX 時,就是在介紹從用戶端非同步呼叫伺服器端函數的整體架構。提到 Ajax.NET 時,我是指能夠協助您建立利用 AJAX 架構的解決方案的特定實現。
要瞭解有關 ASP.NET 2.0 用戶端回調功能的詳細資料,請訪問 Bertrand Le Roy 的部落格(英文)。
返回頁首
手頭的 AJAX
本文的剩餘部分將使用 Ajax.NET 著重介紹三個利用 AJAX 功能的有意義的樣本。本指南將包含以 Microsoft C# 和 Microsoft Visual Basic .NET 編寫的代碼,有時同時提供這兩種代碼,有時僅提供其中一種代碼。實現所有這一切的代碼很容易,C# 開發人員能夠很容易地遵循僅以 Visual Basic .NET 編寫的代碼,反之亦然!本文包含的樣本 C# 和 Visual Basic .NET 項目可供下載,並提供工作代碼和運行代碼。在學習樣本以前,首先需要瞭解如何安裝和使用 Ajax.NET。
Ajax.NET
AJAX.NET 文檔(英文)和網站(英文)對開發人員快速入門非常有用。在介紹使用此技術的一些具體樣本之前,我們將簡要回顧您所需要知道的核心步驟。
首先從 AJAX.NET 專案網站(英文)上下載並解壓縮 AJAX 檔案,然後按照您的喜好在 Visual Basic .NET 或 C# 中建立新的 ASP.NET 項目,再向 AJAX.DLL 檔案添加引用(英文)。唯一的額外配置步驟是在 <system.web> 元素中(位於 web.config 檔案中)添加以下代碼。
<configuration><system.web><httpHandlers><!-- Register the ajax handler --><add verb="POST,GET" path="ajax/*.ashx"type="Ajax.PageHandlerFactory, Ajax" /></httpHandlers>......</system.web></configuration>
為了使伺服器端函數在 JavaScript 中可用,必須做兩件事情。首先,要使用的函數必須標有 Ajax.AjaxMethodAttribute。其次,在頁載入事件期間,必須通過調用 Ajax.Utility.RegisterTypeForAjax 來註冊包含這些函數的類。聽起來似乎有些複雜,但請不必擔心;實際上只需要在代碼中多加兩行。讓我們看一個樣本。
//C#public class Sample :System.Web.UI.Page{private void Page_Load(object sender, System.EventArgs e){//註冊我們感興趣的包含伺服器端函數//的類Ajax.Utility.RegisterTypeForAjax(typeof(Sample));}[Ajax.AjaxMethod()]public string GetMessageOfTheDay(){return "Experience is the mother of wisdom";}}'VB.NETPublic Class SampleInherits System.Web.UI.PagePrivate Sub Page_Load(sender AsObject, e As EventArgs)Handles MyBase.Load'註冊我們感興趣的包含伺服器端函數'的類Ajax.Utility.RegisterTypeForAjax(GetType(Sample))End Sub<Ajax.AjaxMethod()> _Public Function GetMessageOfTheDay() As StringReturn "Experience is the mother of wisdom"End FunctionEnd Class
以上樣本首先告知 Ajax.NET 在 Sample 類中尋找友好的 Ajax 方法。它正好是與實際頁相同的類,但是它可以是任意 .NET 類,或可以註冊多個類。然後,Ajax.NET 將瀏覽指定的類,來尋找標有 AjaxMethodAttribute 的所有方法,其中 Sample 類有一個 GetMessageOfTheDay。
完成後,剩下唯一要做的就是在 JavaScript 中使用它。Ajax.NET 自動建立與註冊的類具有相同名稱的 JavaScript 變數(在本例中將為 Sample),它提供與 AjaxMethod 具有相同名稱的函數(在本例中為 GetMessageOfTheDay)。如下所示。
<script language="javascript">Sample.GetMessageOfTheDay(GetMessageOfTheDay_CallBack);function GetMessageOfTheDay_CallBack(response){alert(response.value);}</script>
除了 JavaScript 回呼函數以外,JavaScript GetMessageOfTheDay 還需要與其伺服器端對應部分相同的參數(在此情況下,沒有參數),以便在完成時執行並傳遞響應。在此,我們看到 AJAX 在工作時的非同步特性,因為對 GetMessageOfTheDay 的調用不阻礙執行其他 JavaScript 代碼,也不阻礙使用者繼續在頁上進行操作。完成伺服器端處理時,Ajax.NET 調用指定的回呼函數 GetMessageOfTheDay_CallBack,並向其傳遞由伺服器端傳回值組成的響應。
伺服器端代碼和 JavaScript 代碼之間的映射可能有些混亂。圖 1 簡要顯示了伺服器端代碼和 JavaScript 代碼,以及兩者之間的映射。
圖 1:伺服器端代碼和 JavaScript 代碼之間的映射
當然令人感興趣的 Ajax.NET 還有更多內容值得介紹,例如對 .NET 類型的支援和豐富的回調響應(它不僅僅是值)。以下樣本將會重點介紹某些功能,希望協助您理解 AJAX 如何協助您建立成功的應用程式。
樣本 1:連結的下拉式清單
本文的開始簡要地討論了用於連結兩個 DropDownList 的兩種傳統方法。當選定的索引更改時,返回頁;或者將所有可能的資料載入到 JavaScript 數組並動態顯示。希望您可以看到 AJAX 如何替代這兩種解決方案。
首先,讓我們來看一下我們的資料介面,並從該資料介面驅動樣本。我們的資料訪問層將提供兩種方法:第一種方法將檢索系統支援的省/地區的列表,第二種方法將擷取省/地區 ID 並返回州/省的列表。由於這是純資料訪問,因此我們只需要使用方法。
//C#public static DataTable GetShippingCountries();public static DataView GetCountryStates(int countryId);'VB.NETPublic Shared Function GetShippingCountries() As DataTablePublic Shared Function GetCountryStates(ByVal countryId As Integer)As DataView
現在,讓我們轉到相反面,建立簡單的 Web Form。
<asp:DropDownList ID="countries" Runat="server" /><asp:DropDownList ID="states" Runat="server" /><asp:Button ID="submit" Runat="server" Text="Submit" />
Page_Load 事件同樣簡單,和前述的 Web Form一樣。我們使用資料訪問層來檢索可用的省/地區,並將其綁定到 countriesDropDownList 中。
//C#if (!Page.IsPostBack){countries.DataSource = DAL.GetShippingCountries();countries.DataTextField = "Country";countries.DataValueField = "Id";countries.DataBind();countries.Items.Insert(0, new ListItem("Please Select", "0"));}
通常,代碼到此為止。首先,我們將建立要從 JavaScript 調用的伺服器端函數。
'VB.NET<Ajax.AjaxMethod()> _Public Function GetStates (ByVal countryId As Integer) As DataViewReturn DAL.GetCountryStates(countryId)End Function