原文：
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 應(yīng)用程序，使其互動(dòng)性更強(qiáng)、響應(yīng)更及時(shí)。

下載本文的代碼示例 AjaxASPNETCS.msi（使用 C# 語言）

下載本文的代碼示例 AjaxASPNETVB.msi（使用 Visual Basic 語言）

本頁內(nèi)容

	簡介
	什么是 AJAX？
	用于 ASP.NET 的 AJAX
	手頭的 AJAX
	AJAX 與您
	結(jié)論

簡介

自從開始 Web 編程以來，在 Web 應(yīng)用程序和桌面應(yīng)用程序之間一直存在著許多取舍。例如，人們通常認(rèn)為 Web 應(yīng)用程序提供的用戶界面類型沒有桌面應(yīng)用程序提供的用戶界面類型那樣豐富。另一方面，Web 應(yīng)用程序是獨(dú)立的平臺(tái)，其開發(fā)機(jī)制比較簡單。提供響應(yīng)更及時(shí)的應(yīng)用程序看似是一項(xiàng)簡單的任務(wù)，但對(duì)于 Web 開發(fā)人員來說卻是一直以來需要攻克的領(lǐng)域。

傳統(tǒng)意義上，只能通過向 Web 服務(wù)器提交新的請求來檢索對(duì)用戶輸入所做的響應(yīng)。在某些情況下，開發(fā)人員可以使用 JavaScript 在客戶端上加載所有響應(yīng)，從而提供更好的用戶體驗(yàn)。此技術(shù)的常見示例是基于所選國家/地區(qū)來動(dòng)態(tài)加載一系列州或省。遺憾的是，在很多情況下，不將所有響應(yīng)都返回或加載到 JavaScript 要更好。返回操作會(huì)使過多的 UI 斷開連接，或在客戶端上需要過量的數(shù)據(jù)，這經(jīng)常導(dǎo)致生成不易讀的 JavaScript。AJAX 提供了一種新的中間選擇，能夠在維持及時(shí)響應(yīng)和靈活性的同時(shí)利用基于服務(wù)器的應(yīng)用程序。

返回頁首

什么是 AJAX？

AJAX 是 Asynchronous JavaScript And XML（異步 JavaScript 和 XML）的縮寫，它不是一項(xiàng)技術(shù)，而是很多技術(shù)的集合。AJAX 使用通信技術(shù)（通常為 SOAP 和 XML）發(fā)送和接收對(duì)服務(wù)器的異步請求/響應(yīng)，然后利用顯示技術(shù)（JavaScript、DOM、HTML 和 CSS）處理響應(yīng)。如今，使用 AJAX 的應(yīng)用程序是合法的，因?yàn)槎鄶?shù)瀏覽器都支持這項(xiàng)必需的技術(shù)。有關(guān) AJAX 更詳細(xì)的定義，請?jiān)L問 AJAX Wikipedia entry（英文）。

AJAX 到底是什么？AJAX 使您能夠通過 JavaScript 調(diào)用執(zhí)行服務(wù)器端方法，而不需要刷新瀏覽器。將它視為發(fā)生于用戶后臺(tái)的小型請求/響應(yīng)。如果您仍不清楚 AJAX 是什么，請看 Google 上的兩個(gè)常見示例：Google Suggests（英文）和 Google Maps（英文）。如果您不熟悉 AJAX，這兩個(gè)應(yīng)用程序的響應(yīng)會(huì)使您有點(diǎn)興奮。

返回頁首

用于 ASP.NET 的 AJAX

很多因素促使 AJAX 應(yīng)運(yùn)而生。您可能不想花費(fèi)幾個(gè)小時(shí)或幾天來了解 AJAX 的內(nèi)部原理，而是更希望現(xiàn)在就開始創(chuàng)建啟用了 AJAX 的應(yīng)用程序，來滿足現(xiàn)有需求（如果您確實(shí)想知道 AJAX 內(nèi)部工作原理，我肯定不是可以詢問的人）。開發(fā)人員可以用來快速入門的工具有很多。不過我們將特別關(guān)注由 Michael Schwarz 編寫的源代碼開放的免費(fèi) Ajax.NET。Ajax.NET 考慮到所有的實(shí)現(xiàn)細(xì)節(jié)是基于 .NET 的，并且能夠被擴(kuò)展。Microsoft ASP.NET 2.0 通過客戶端回調(diào)功能（英文）引入了獨(dú)具特色的異步回調(diào)，并且最近宣布（英文）代號(hào)為“Atlas”的 AJAX 正在實(shí)現(xiàn)中。

術(shù)語可能有些混亂，但是當(dāng)我介紹 AJAX 時(shí)，就是在介紹從客戶端異步調(diào)用服務(wù)器端函數(shù)的整體框架。提到 Ajax.NET 時(shí)，我是指能夠幫助您創(chuàng)建利用 AJAX 框架的解決方案的特定實(shí)現(xiàn)。

要了解有關(guān) ASP.NET 2.0 客戶端回調(diào)功能的詳細(xì)信息，請?jiān)L問 Bertrand Le Roy 的博客（英文）。

返回頁首

手頭的 AJAX

本文的剩余部分將使用 Ajax.NET 著重介紹三個(gè)利用 AJAX 功能的有意義的示例。本指南將包含以 Microsoft C# 和 Microsoft Visual Basic .NET 編寫的代碼，有時(shí)同時(shí)提供這兩種代碼，有時(shí)僅提供其中一種代碼。實(shí)現(xiàn)所有這一切的代碼很容易，C# 開發(fā)人員能夠很容易地遵循僅以 Visual Basic .NET 編寫的代碼，反之亦然！本文包含的示例 C# 和 Visual Basic .NET 項(xiàng)目可供下載，并提供工作代碼和運(yùn)行代碼。在學(xué)習(xí)示例以前，首先需要了解如何安裝和使用 Ajax.NET。

Ajax.NET

AJAX.NET 文檔（英文）和網(wǎng)站（英文）對(duì)開發(fā)人員快速入門非常有用。在介紹使用此技術(shù)的一些具體示例之前，我們將簡要回顧您所需要知道的核心步驟。

首先從 AJAX.NET 項(xiàng)目網(wǎng)站（英文）上下載并解壓縮 AJAX 文件，然后按照您的喜好在 Visual Basic .NET 或 C# 中創(chuàng)建新的 ASP.NET 項(xiàng)目，再向 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>

為了使服務(wù)器端函數(shù)在 JavaScript 中可用，必須做兩件事情。首先，要使用的函數(shù)必須標(biāo)有 Ajax.AjaxMethodAttribute。其次，在頁加載事件期間，必須通過調(diào)用 Ajax.Utility.RegisterTypeForAjax 來注冊包含這些函數(shù)的類。聽起來似乎有些復(fù)雜，但請不必?fù)?dān)心；實(shí)際上只需要在代碼中多加兩行。讓我們看一個(gè)示例。

//C#
public class Sample :System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
//注冊我們感興趣的包含服務(wù)器端函數(shù)
//的類
Ajax.Utility.RegisterTypeForAjax(typeof(Sample));
}
[Ajax.AjaxMethod()]
public string GetMessageOfTheDay()
{
return "Experience is the mother of wisdom";
}
}
'VB.NET
Public Class Sample
Inherits System.Web.UI.Page
Private Sub Page_Load(sender AsObject, e As EventArgs)
Handles MyBase.Load
'注冊我們感興趣的包含服務(wù)器端函數(shù)
'的類
Ajax.Utility.RegisterTypeForAjax(GetType(Sample))
End Sub
<Ajax.AjaxMethod()> _
Public Function GetMessageOfTheDay() As String
Return "Experience is the mother of wisdom"
End Function
End Class

以上示例首先告知 Ajax.NET 在 Sample 類中查找友好的 Ajax 方法。它正好是與實(shí)際頁相同的類，但是它可以是任意 .NET 類，或可以注冊多個(gè)類。然后，Ajax.NET 將瀏覽指定的類，來查找標(biāo)有 AjaxMethodAttribute 的所有方法，其中 Sample 類有一個(gè) GetMessageOfTheDay。

完成后，剩下唯一要做的就是在 JavaScript 中使用它。Ajax.NET 自動(dòng)創(chuàng)建與注冊的類具有相同名稱的 JavaScript 變量（在本例中將為 Sample），它提供與 AjaxMethod 具有相同名稱的函數(shù)（在本例中為 GetMessageOfTheDay）。如下所示。

<script language="javascript">
Sample.GetMessageOfTheDay(GetMessageOfTheDay_CallBack);
function GetMessageOfTheDay_CallBack(response)
{
alert(response.value);
}
</script>

除了 JavaScript 回調(diào)函數(shù)以外，JavaScript GetMessageOfTheDay 還需要與其服務(wù)器端對(duì)應(yīng)部分相同的參數(shù)（在此情況下，沒有參數(shù)），以便在完成時(shí)執(zhí)行并傳遞響應(yīng)。在此，我們看到 AJAX 在工作時(shí)的異步特性，因?yàn)閷?duì) GetMessageOfTheDay 的調(diào)用不阻礙執(zhí)行其他 JavaScript 代碼，也不阻礙用戶繼續(xù)在頁上進(jìn)行操作。完成服務(wù)器端處理時(shí)，Ajax.NET 調(diào)用指定的回調(diào)函數(shù) GetMessageOfTheDay_CallBack，并向其傳遞由服務(wù)器端返回值組成的響應(yīng)。

服務(wù)器端代碼和 JavaScript 代碼之間的映射可能有些混亂。圖 1 簡要顯示了服務(wù)器端代碼和 JavaScript 代碼，以及兩者之間的映射。

圖 1：服務(wù)器端代碼和 JavaScript 代碼之間的映射

當(dāng)然令人感興趣的 Ajax.NET 還有更多內(nèi)容值得介紹，例如對(duì) .NET 類型的支持和豐富的回調(diào)響應(yīng)（它不僅僅是值）。以下示例將會(huì)重點(diǎn)介紹某些功能，希望幫助您理解 AJAX 如何幫助您創(chuàng)建成功的應(yīng)用程序。

示例 1：鏈接的下拉列表

本文的開始簡要地討論了用于鏈接兩個(gè) DropDownList 的兩種傳統(tǒng)方法。當(dāng)選定的索引更改時(shí)，返回頁；或者將所有可能的數(shù)據(jù)加載到 JavaScript 數(shù)組并動(dòng)態(tài)顯示。希望您可以看到 AJAX 如何替代這兩種解決方案。

首先，讓我們來看一下我們的數(shù)據(jù)界面，并從該數(shù)據(jù)界面驅(qū)動(dòng)示例。我們的數(shù)據(jù)訪問層將提供兩種方法：第一種方法將檢索系統(tǒng)支持的國家/地區(qū)的列表，第二種方法將獲取國家/地區(qū) ID 并返回州/省的列表。由于這是純數(shù)據(jù)訪問，因此我們只需要使用方法。

//C#
public static DataTable GetShippingCountries();
public static DataView GetCountryStates(int countryId);
'VB.NET
Public Shared Function GetShippingCountries() As DataTable
Public Shared Function GetCountryStates(ByVal countryId As Integer)
As DataView

現(xiàn)在，讓我們轉(zhuǎn)到相反面，創(chuàng)建簡單的 Web 窗體。

<asp:DropDownList ID="countries" Runat="server" />
<asp:DropDownList ID="states" Runat="server" />
<asp:Button ID="submit" Runat="server" Text="Submit" />

Page_Load 事件同樣簡單，和前述的 Web 窗體一樣。我們使用數(shù)據(jù)訪問層來檢索可用的國家/地區(qū)，并將其綁定到 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"));
}

通常，代碼到此為止。首先，我們將創(chuàng)建要從 JavaScript 調(diào)用的服務(wù)器端函數(shù)。

'VB.NET
<Ajax.AjaxMethod()> _
Public Function GetStates (ByVal countryId As Integer) As DataView
Return DAL.GetCountryStates(countryId)
End Function