DIV CSS 佈局教程網

 

適用於：
Javascript:void(0);">AJax（異步 JavaScript 和 XML）
Microsoft Javascript:void(0);">AJax.Net
Microsoft ASP.Net

摘要：了解如何將 Javascript:void(0);">AJax（異步 JavaScript 和 XML）用於您的 Microsoft ASP.Net 應用程序，使其互動性更強、響應更及時。

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

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

本頁內容

簡介 什麼是 Javascript:void(0);">AJax？ 用於 ASP.Net 的 Javascript:void(0);">AJax 手頭的 Javascript:void(0);">AJax Javascript:void(0);">AJax 與您 結論

簡介

自從開始 Web 編程以來，在 Web 應用程序和桌面應用程序之間一直存在著許多取捨。例如，人們通常認為 Web 應用程序提供的用戶界面類型沒有桌面應用程序提供的用戶界面類型那樣豐富。另一方面，Web 應用程序是獨立的平台，其開發機制比較簡單。提供響應更及時的應用程序看似是一項簡單的任務，但對於 Web 開發人員來說卻是一直以來需要攻克的領域。

傳統意義上，只能通過向 Web 服務器提交新的請求來檢索對用戶輸入所做的響應。在某些情況下，開發人員可以使用 JavaScript 在客戶端上加載所有響應，從而提供更好的用戶體驗。此技術的常見示例是基於所選國家/地區來動態加載一系列州或省。遺憾的是，在很多情況下，不將所有響應都返回或加載到 JavaScript 要更好。返回操作會使過多的 UI 斷開連接，或在客戶端上需要過量的數據，這經常導致生成不易讀的 Javascript。Javascript:void(0);">AJax 提供了一種新的中間選擇，能夠在維持及時響應和靈活性的同時利用基於服務器的應用程序。

返回頁首

什麼是 Javascript:void(0);">AJax？

Javascript:void(0);">AJax 是 Asynchronous JavaScript And XML（異步 Javascript 和 XML）的縮寫，它不是一項技術，而是很多技術的集合。Javascript:void(0);">AJax 使用通信技術（通常為 SOAP 和 XML）發送和接收對服務器的異步請求/響應，然後利用顯示技術（Javascript、DOM、Html 和 CSS）處理響應。如今，使用 Javascript:void(0);">AJax 的應用程序是合法的，因為多數浏覽器都支持這項必需的技術。有關 Javascript:void(0);">AJax 更詳細的定義，請訪問 Javascript:void(0);">AJax Wikipedia entry（英文）。

Javascript:void(0);">AJax 到底是什麼？Javascript:void(0);">AJax 使您能夠通過 Javascript 調用執行服務器端方法，而不需要刷新浏覽器。將它視為發生於用戶後台的小型請求/響應。如果您仍不清楚 Javascript:void(0);">AJax 是什麼，請看 Google 上的兩個常見示例：Google Suggests（英文）和 Google Maps（英文）。如果您不熟悉 Javascript:void(0);">AJax，這兩個應用程序的響應會使您有點興奮。

返回頁首

用於 ASP.Net 的 Javascript:void(0);">AJax

很多因素促使 Javascript:void(0);">AJax 應運而生。您可能不想花費幾個小時或幾天來了解 Javascript:void(0);">AJax 的內部原理，而是更希望現在就開始創建啟用了 Javascript:void(0);">AJax 的應用程序，來滿足現有需求（如果您確實想知道 Javascript:void(0);">AJAX 內部工作原理，我肯定不是可以詢問的人）。開發人員可以用來快速入門的工具有很多。不過我們將特別關注由 Michael Schwarz 編寫的源代碼開放的免費 Ajax.NET。AJax.NET 考慮到所有的實現細節是基於 .NET 的，並且能夠被擴展。Microsoft ASP.Net 2.0 通過客戶端回調功能（英文）引入了獨具特色的異步回調，並且最近宣布（英文）代號為“Atlas”的 Javascript:void(0);">AJax 正在實現中。

術語可能有些混亂，但是當我介紹 Javascript:void(0);">AJAX 時，就是在介紹從客戶端異步調用服務器端函數的整體框架。提到 AJax.Net 時，我是指能夠幫助您創建利用 Javascript:void(0);">AJax 框架的解決方案的特定實現。

要了解有關 ASP.Net 2.0 客戶端回調功能的詳細信息，請訪問 Bertrand Le Roy 的博客（英文）。

返回頁首

手頭的 Javascript:void(0);">AJax

本文的剩余部分將使用 AJax.Net 著重介紹三個利用 Javascript:void(0);">AJAX 功能的有意義的示例。本指南將包含以 Microsoft C# 和 Microsoft Visual Basic .NET 編寫的代碼，有時同時提供這兩種代碼，有時僅提供其中一種代碼。實現所有這一切的代碼很容易，C# 開發人員能夠很容易地遵循僅以 Visual Basic .NET 編寫的代碼，反之亦然！本文包含的示例 C# 和 Visual Basic .NET 項目可供下載，並提供工作代碼和運行代碼。在學習示例以前，首先需要了解如何安裝和使用 AJax.Net。

AJax.Net

Javascript:void(0);">AJax.Net 文檔（英文）和網站（英文）對開發人員快速入門非常有用。在介紹使用此技術的一些具體示例之前，我們將簡要回顧您所需要知道的核心步驟。

首先從 Javascript:void(0);">AJax.Net 項目網站（英文）上下載並解壓縮 Javascript:void(0);">AJax 文件，然後按照您的喜好在 Visual Basic .NET 或 C# 中創建新的 ASP.Net 項目，再向 Javascript:void(0);">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 還需要與其服務器端對應部分相同的參數（在此情況下，沒有參數），以便在完成時執行並傳遞響應。在此，我們看到 Javascript:void(0);">AJax 在工作時的異步特性，因為對 GetMessageOfTheDay 的調用不阻礙執行其他 JavaScript 代碼，也不阻礙用戶繼續在頁上進行操作。完成服務器端處理時，AJax.Net 調用指定的回調函數 GetMessageOfTheDay_CallBack，並向其傳遞由服務器端返回值組成的響應。

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

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

當然令人感興趣的 AJax.NET 還有更多內容值得介紹，例如對 .Net 類型的支持和豐富的回調響應（它不僅僅是值）。以下示例將會重點介紹某些功能，希望幫助您理解 Javascript:void(0);">AJax 如何幫助您創建成功的應用程序。

示例 1：鏈接的下拉列表

本文的開始簡要地討論了用於鏈接兩個 DropDownList 的兩種傳統方法。當選定的索引更改時，返回頁；或者將所有可能的數據加載到 Javascript 數組並動態顯示。希望您可以看到 Javascript:void(0);">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 窗體。

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

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

這與您通常使用的任何其他函數一樣：它需要我們想要獲得的國家/地區的 ID，並將該請求傳遞給 DAL。唯一的不同是我們已使用 AJaxMethodAttribute 標記了該方法。最後剩余的服務器端步驟是通過調用 RegisterTypeForAJax 使用 AJax.Net 來注冊包含上述方法的類（在此情況下，是我們的下面的代碼）。

//C#Ajax.Utility.RegisterTypeForAJax(typeof(Sample));'VB.NetAjax.Utility.RegisterTypeForAJax(GetType(Sample))

我們已基本完成；剩余的就是從 JavaScript 調用 GetStates 方法和處理響應。當用戶從國家/地區列表中選擇新項時，我們想在邏輯上調用 GetStates。為此，我們將觸發 JavaScript onChange 事件。這樣就稍微更改了我們的 Web 窗體代碼。

<ASP:DropDownList  ID="countrIEs" Runat="server" />

JavaScript LoadStates 函數將負責通過由 Ajax.NET 創建的代理發出異步請求。請記住，默認情況下，AJax.Net 創建的代理的格式為 <RegisteredTypeName>.<ServerSideMethodName>。在我們的示例中，將為 Sample.GetStates。我們還想傳入國家/地區 ID 參數和完成服務器端函數後 AJax.Net 應調用的回調函數。

//JavaScriptfunction LoadStates(countries){var countryId = countries.options[countrIEs.selectedIndex].value;Sample.GetStates(countryId, LoadStates_CallBack);}

最後一個步驟是處理我們的 LoadStates_CallBack 函數中的響應。AJax.NET 最有用的功能大概是它支持很多 .Net 類型（我已經多次提到這一點）。回顧一下返回 DataVIEw 的服務端函數。JavaScript 知道 DataVIEw 什麼？什麼也不知道，但是 JavaScript 是面向對象的語言，而且 AJax.NET 不只能夠創建與 .Net DataVIEw 相似的對象，還能將該函數返回的值映射到 Javascript 副本。您應該記住 JavaScript DataVIEw 只不過是實際 DataVIEw 的副本，目前除了能夠遍歷行和訪問列值以外不支持其他更多功能（例如設置 RowFilter 或 Sort 屬性的功能）。

function LoadStates_CallBack(response){//如果服務器端代碼出現異常if (response.error != null) {//我們應該能做得更好alert(response.error); return; }var states = response.value;//如果不是我們所希望的響應if (states == null || typeof(states) != "object") {return; }//獲得州下拉列表var statesList = document.getElementById("states");statesList.options.length = 0; //重置州下拉列表//記住，其長度不是 JavaScript 中的 Lengthfor (var i = 0; i < states.length; ++i) {//如命名屬性一樣公開行的列statesList.options[statesList.options.length] =new Option(states[i].State, states[i].Id); }}

經過一些錯誤檢查之後，前面的 JavaScript 獲得州下拉列表，遍歷響應的值，並動態地將選項添加到該下拉列表中。代碼清晰、簡單並與 C# 和 Visual Basic .Net 非常相似。就我個人而言（作為基於服務器端變量創建了 JavaScript 數組並將它們鏈接在一起的開發人員），我還要一段時間才能相信它真的起作用了。

有一個可能不太明顯的主要問題。由於 DropDownList 是在 JavaScript 中動態創建的，因此它的項不屬於 VIEwState，並且不被維護。這意味著按鈕的 OnClick 事件處理程序需要進行一些額外的修改。

'VB.NetPrivate Sub submit_Click(sender As Object, e As EventArgs)Dim selectedStateId As String = Request.Form(states.UniqueID)'應進行一些用戶驗證...states.DataSource =DAL.GetCountryStates(Convert.ToInt32(countries.SelectedIndex))states.DataTextField = "State"states.DataValueFIEld = "Id"states.DataBind()states.SelectedIndex = states.Items.IndexOf(states.Items.FindByValue(selectedStateId))End Sub

首先，我們不能使用 states.SelectedValue 屬性，而必須使用 Request.Form。其次，如果我們想向用戶重新顯示該列表，需要重新使用相同的數據訪問方法綁定州 DropDownList。最後，必須以編程方式設置選定的值。

示例 2：文檔鎖定程序

對於下一個示例，我們將引入更加完整的功能，然後使用 Javascript:void(0);">AJax 改進它。此示例屬於簡單的文檔管理系統。如任何正式的文檔管理系統一樣，我們必須提供並發管理。即，我們需要一種方法來處理兩個用戶嘗試編輯同一個文檔的問題。我們將通過創建某種類型的鎖定機制，來使正在編輯的文檔不能再由另一個用戶編輯，從而達到上述目的。我們將利用 Javascript:void(0);">AJax 讓用戶有更愉快的鎖定機制體驗。首先，我們將創建用戶嘗試編輯但無法編輯（因為其他用戶正在編輯該文檔）的文檔隊列，當這些文檔可用時自動通知用戶。其次，我們將確保當用戶關閉其浏覽器或導航到其他位置時，解除對文檔的鎖定。後一個功能幫助確保文檔不會永遠處於鎖定狀態。為此，在本指南中，我們將跳過與 Javascript:void(0);">AJax 實現不相關的功能；但是，可下載項目包含所有功能。

首先，當用戶嘗試編輯文檔時，我們會嘗試對其建立排它鎖，如果失敗，我們會將此文檔添加到用戶的隊列然後使其返回到主頁。對此處的 Javascript:void(0);">AJax 沒有什麼特別之處，但是我們將查看一下代碼，以便給出示例必要的上下文。在用於編輯的 Page 的 OnLoad 事件中，添加以下代碼。

//C#if (!Page.IsPostBack){//應驗證用戶輸入Document document = GetDocument(Request.QueryString["id"]);//我們擁有此文檔，但不能編輯它！if (!Locker.AcquireLock(document)) {//讓我們將它添加到要查看的用戶文檔列表User.CurrentUser.AddDocumentToQueue(document.DocumentId);Response.Redirect("DocumentList.ASPx"); }//好了，我們擁有此文檔，並且可以編輯它 //...}

關鍵行的位置是將文檔添加到當前用戶的隊列中（這會將文檔添加到會話中）。接下來，我們將創建用戶控件，該控件可以被放置到任何頁上，用於當隊列文檔可用時通知用戶。此用戶控件將包含一個 Javascript:void(0);">AJax 方法以及注冊 Javascript:void(0);">AJax 的類所需的代碼。

'VB.NetPrivate Sub Page_Load(s As Object, e As EventArgs) Handles MyBase.LoadAjax.Utility.RegisterTypeForAjax(GetType(UnlockNotifIEr))End Sub'遍歷隊列文檔並檢查它們是否可用<Ajax.AJaxMethod()> _Public Function GetUnlockedDocuments() As DocumentCollection'獲得屬於用戶的所有隊列文檔的 IDDim queuedDocument As ArrayList = User.CurrentUser.DocumentQueueDim unlocked As DocumentCollection = New DocumentCollectionFor Each documentId As Integer In queuedDocumentIds'如果隊列文檔不再被鎖定If Not Locker.IsLocked(documentId) Thenunlocked.Add(Document.GetDocumentById(documentId))End IfNextReturn unlockedDocumentsEnd Function

現在需要的是使一些 JavaScript 發出請求並處理響應。我們將基於響應在要動態創建的表中放置已發布的文檔信息（如果有）。為此，我們將開始編寫 Html。

<div id="notifyBox" style="display:none;"><b>The following queued documents can now be edited</b><table cellpadding="5" cellspacing="0"border="0" style="border:1px solid #EEE;"id="notifyTable"></table></div>

如果沒有可用的文檔（或是沒有為該用戶列出文檔），我們使用 DIV 標記隱藏所有內容，用 TABLE 標記來顯示結果。我們將使用輪詢系統來檢查是否存在任何可用的隊列文檔。一般來說，這意味著我們將在稍後一段時間內一直調用服務器端方法，並顯示結果。在加載頁面時僅發生第一次調用，每隔 X 秒發生後續調用。

<script language="Javascript">window.setTimeout("PollQueue();", 2000);//每隔 2 秒激發以檢查在具有許多用戶的實際系統中是否發布了//隊列文檔，2 秒可能會使服務器承受//過高的負荷。我們甚至可以首先檢查用戶是否//擁有隊列，但是我們確實需要進行一些//性能測試function PollQueue(){//UnlockNotifIEr 是我們使用 AJax.Net 注冊的類型//GetUnlockedDocuments 是該類型中的方法，標有//AJaxMethod 屬性UnlockNotifIEr.GetUnlockedDocuments(PollQueue_CallBack);//每隔 2 秒調用其本身window.setTimeout("PollQueue();", 2000);}</script>

剩下的就是處理響應。這與以前示例中的代碼相似。首先，檢查是否存在錯誤，獲得響應，遍歷可用的文檔，動態創建 Html，在這種情況下，向表中添加行和列。

function PollQueue_CallBack(response){var notifyBox = document.getElementById("notifyBox");var notifyTable = document.getElementById("notifyTable");//如果我們無法找到表通知框if (notifyBox == null || notifyTable == null)  {return;  }//如果服務器端代碼出現異常if (response.error != null)  { notifyBox.style.display = "none"; alert(response.error); //我們應該能做得更好return;  }  var documents = response.value;//如果不是我們所希望的響應if (documents == null || typeof(documents) != "object")  {notifyBox.style.display = "none";return;  }  for (var i = 0; i < notifyTable.rows.length; ++i)  {notifyTable.deleteRow(i);  }for(var i = 0; i < documents.length; ++i)  {    var row = notifyTable.insertRow(0);row.className = "Row" + i%2;var cell = row.insertCell(0);cell.innerHTML = documents[i].Title;cell = row.insertCell(1);var date = documents[i].Created;cell.innerHTML = date.getDay() + "/" + date.getMonth() + "/" + date.getYear();cell = row.insertCell(2);cell.innerHtml = "<a href='DocumentEdit.ASPx?id=" + documents[i].DocumentId + "'>edit</a>";  } notifyBox.style.display = "block";}

我們要看到的最後一個快速改進是當用戶關閉浏覽器、導航到其他鏈接或單擊“後退”按鈕時，將自動解除文檔鎖定。通常，可以通過觸發 JavaScript OnBeforeUnLoad 事件或 OnUnload 事件達到此目的，這會打開新的小型彈出式窗口，該彈出式窗口在加載頁面時做一些清理然後自行關閉。您自己可以使用彈出式窗口，但是其他人則不能使用，它將導致彈出式窗口受阻並使文檔永久保持鎖定狀態。要解決此問題，我們仍需要兩個 Javascript 事件，但是並不是啟動彈出式窗口，而是將通過 Javascript:void(0);">AJax 執行服務器端方法。在用於編輯文檔的頁上（即，放置鎖的頁），我們添加一些簡單的 JavaScript。

<script language="Javascript">//如果用戶關閉浏覽器或點擊“後退”按鈕，//確保該文檔會被解除鎖定window.onbeforeunload = ReleaseLock;function ReleaseLock() {Locker.ReleaseDocument(<%=DocumentID%>);}</script>

在這裡，DocumentId 是在後面的代碼中定義和設置的變量。另外，我們可以在會話中存儲 DocumentId，並在服務器端 ReleaseDocument 中訪問。通常，ReleaseDocument 從鎖定的文檔列表中刪除文檔。

示例 3：論壇主題搜索

我們要看的最後一個示例是對現有應用程序的修改。我首次聽到這個想法是 Josh Ledgard（英文）設想在 MSDN 論壇（英文）裡添加一個功能。目的是嘗試幫助用戶自己找到問題的答案，以及限制重復發布的數量。一般來說，用戶在論壇中提出新問題時，他或她會輸入主題和問題。他們通常都不會先進行搜索，來查看是否已經提出和回答過該問題。輸入 Javascript:void(0);">AJax。用戶輸入主題（並將 Tab 鍵移出該字段）後，我們基於該主題異步搜索論壇，並適時地向用戶顯示結果。有時這些結果會有幫助，有時候則不會。

為使結果有幫助，我們將修改 ASP.NetPRO Reader's Choice Award for Best Forum Application, CommunityServer。可下載的示例中不包含這一部分（或論壇）的代碼，但是您能在 http://communityserver.org/（英文）學到關於 CommunityServer 的更多知識，並且可在其中應用下面這些代碼片斷。

安裝 CommunityServer 並配置 AJax.Net（已將引用和處理程序添加到 web.config）後，我們只需要進行一些更改就可以獲得所需的功能。首先，我們轉到 CommunityServerForums 項目中的 CreateEditPost.cs 文件。將它視為此頁的後面的代碼，其中用戶可以添加新的發布。下面我們將添加啟用了 Javascript:void(0);">AJax 的函數。

//C#[Ajax.AJaxMethod()]public static ArrayList Search(string search){SearchQuery query = new SearchQuery();query.PageIndex = 0; //獲得前 10 個結果query.PageSize = 10;query.UserID = Users.GetUser().UserID;query.SearchTerms = search;return new ForumSearch().GetSearchResults(query).Posts;}

我們能夠利用已經在 CommunityServer 中創建的搜索功能，只需要我們的函數能應用它。如往常一樣，類型必須使用 AJax.Net 注冊。我們將在同一文件的 InitializeSkin 函數（將其視為 Page_Load）中進行此操作。

//C#Ajax.Utility.RegisterTypeForAJax(typeof(CreateEditPost));

在轉跳到 JavaScript 之前，我們需要進行最後的服務器端更改。返回到 AJax.Net 的自定義類（例如我們正在返回的 ArrayList 所包含的 ForumPost）必須標有 Serializable 屬性。我們要做的是轉到 CommunityServerForums 項目中的 Components/ForumPost.cs 文件，並添加此屬性。

//C#[Serializable]public class ForumPost :Post{ ...}

顯示時，我們僅需要修改 CommunityServerWeb 項目中的 Themes/default/Skins/VIEw-EditCreatePost.cs。首先，我們將觸發主題文本框的 onBlur 事件。

<ASP:textbox onBlur="Search(this.value);"id="PostSubject" runat="server" ... />

接著，我們編寫 JavaScript Search 方法，以便調用服務器端 Search。

var oldValue = '';function Search(value){ //不要再次搜索剛搜索過的內容//如果用戶向後或向前移動 Tab 鍵將會發生if (value != oldValue)  {CreateEditPost.Search(value, Search_CallBack);oldValue = value;  }}

最後，剩下的就是處理響應。由於上一個示例介紹了在表中顯示結果的稍微正規的方式，我們將僅僅創建一些動態的 Html，並將它粘貼到虛擬的 DIV 中。

function Search_CallBack(response){//由於沒有結果時搜索功能將自動重定向，//因此，我們不能使用 response.error。var results = response.value;//如果我們沒有獲得結果if (results == null) {return; }//我們用於放置結果的 DIVvar someDiv = document.getElementById("someDiv");var html = "";for (var i = 0; i < results.length; ++i) {var result = results[i];html += "<a target=_blank href='" + result.PostIDHtml += "/ShowPost.ASPx'>";   html += result.Subject;html += "</a><br />" }someDiv.innerHTML = Html;}

通過對 CommunityServer 應用程序的三個文件（加上用於配置的 web.config）稍微進行修改，我們可以添加一些非常有用的功能。但是，只向現有的應用程序添加啟用 Javascript:void(0);">AJax 功能時要小心操作。正在進行實際搜索的預先存在的 ForumSearch 類可能並不是為我們介紹的使用類型設計的。我們的代碼很可能會導致執行一些額外的搜索，影響可能會很顯著。

返回頁首

Javascript:void(0);">AJax 與您

Javascript:void(0);">AJAX 如何以及哪裡適合您的應用程序，以及是否已經存在要根據情況而定。盡管我們已經看到使用 AJax.Net 可以輕松地創建啟用 Javascript:void(0);">AJax 的解決方案，但還存在一些其他的注意事項。一個需要著重關注的問題是對您的應用程序的整體體系結構和可維護性的影響。Javascript:void(0);">AJax 會進一步模糊系統的各層之間的界限，顯著影響顯示層、顯示邏輯層和業務層。這不是 Javascript:void(0);">AJax 本身的問題，而是使用方式的問題。只要您知道它很容易導致各層之間的某些沖突，並適當操作，就不會產生問題。

使用 Javascript:void(0);">AJax 的應用程序更難於維護嗎？答案主要取決於您已經使用的 JavaScript 的數量，以及您組織和維護它的好壞程度。很多開發人員認為 JavaScript 難於編寫、測試和調試（不是因為 JavaScript 本身，而是因為工具支持和開發人員的知識）。如果您當前正在使用 Javascript 實現鏈接的下拉列表，並切換到 Javascript:void(0);">AJAX，您的代碼可能較為容易維護（AJax.NET 對 .Net 類型和數組的支持是重要原因）。但是，如果您使用返回方式來實現，現在您將向您的應用程序 (JavaScript) 引入嶄新的語言。您將必須處理這樣的情況：存在某些不參與 VIEwState 的數據（這一點我們在按鈕單擊事件中可以看到）。

另一個需要考慮的是 Javascript:void(0);">AJax 對您的網站可用性的影響。即使 Javascript:void(0);">AJax 最後能創建響應更及時的界面，開發人員仍需要注意兩件事情。首先，很明顯 Javascript:void(0);">AJax 依賴 JavaScript。我們都知道一些用戶禁用 JavaScript，一些標准（例如加拿大政府 Common Look and Feel [考慮加拿大的 508]）要求網站使用 Javascript 來運行，或不使用它來運行。因此，您不應假定 Javascript:void(0);">AJax 功能正在運行。如果 Javascript:void(0);">AJax 功能不可用，則應使您的應用程序退回到更普通的 Web 處理。其次，Javascript:void(0);">AJax 應用程序可能不熟悉（即使它具有較高級別）用戶習慣使用應用程序的方式。例如，通過 Javascript:void(0);">AJax 執行不同功能的頁可能不以用戶認為的方式表現“後退”按鈕、“收藏夾”菜單和其他浏覽器功能。

返回頁首

結論

Javascript:void(0);">AJAX 不只是令人興奮的即將面世的技術，它是具體的框架，在建立 Web 應用程序時可以采用它來解決每天遇到的問題。AJax.NET 使 ASP.Net 開發人員輕松掌握 Javascript:void(0);">AJax。我們看到的三個示例和可下載的項目可以幫助您了解如何使用 Javascript:void(0);">AJAX 和 AJax.Net。您還可以利用這些示例來嘗試一些自己的想法。Javascript:void(0);">AJax 不僅可以創建簡潔和強大的應用程序，它還可以使您提高客戶滿意度和競爭優勢。正在討論的 Atlas 的一些高級概念可能顯著改進我們提供的產品。就個人而言，我見過的最佳的 Javascript:void(0);">AJax 實現非常輕便合適。您自己的實現應為您的用戶提供同樣積極的體驗。但是，對於某個具體問題，記住 Javascript:void(0);">AJax 可能不是唯一的解決方案，也可能不是最佳的解決方案。現在，讓我們證明 ASP.Net 社區是首屈一指的，讓我們收拾屋子吧。

關於作者

Karl Seguin 將他的大部分時間用在 Microsoft ASP.Net 新聞組，幫助其他開發人員並尋找和編寫幫助性的主題。當他不工作或不提供幫助時，他喜歡無情地清潔 Gnomish 災難的 Azeroth。