章立民研究室

作者：章立民研究室

日期：2006/11/15

目的：簡述ASP.NET AJAX以及其在實作上的便利性

版本：ASP.NET AJAX 1.0 Beta 2

出處：本文節錄自章立民研究室正在撰寫的「ASP.NET AJAX大解密」一書 

網頁程式開發人員對於 JavaScript、CSS（Cascading Style Sheets，階層式樣式表）、DOM（Document Object Model，文件物件模型）、DHTML（Dynamic HTML）與X ML 等技術肯定不會感到陌生。所謂的 AJAX（Asynchronous JavaScript And XML）其實就是上述這些技術綜合之後的強化體，從英文字意可以瞭解，AJAX 技術就是非同步的JavaScript與XML，它打破了傳統網頁開發技術的藩籬，使得網頁更具互動性，也順勢開啟 Web 2.0 時代之門。 

在過去，即使只是網頁中極小部分的內容需要更新，也必須將整個網頁傳送給Web伺服器來處理，處理完畢之後還必須再將整個網頁的內容傳送回用戶端，這樣不分青紅皂白地大堆頭式處理，自然效率低落，回應時間更是不佳。然而 AJAX 的重要與進化之處在於，它只會將網頁中需要更新的部分以非同步方式傳送給Web伺服器來處理，然後將處理後的內容傳送回用戶端瀏覽器來進行局部更新，由於只需要傳送並處理少量的資料，而不是將整個網頁內容重新載入瀏覽器中，自然在效率上大幅提昇。這樣的作法，紮紮實實地提升了網頁的互動性、回應速度與便利性，使得網頁介面的使用經驗大幅躍進，更貼近於Windows Form應用程式。 

目前的瀏覽器大部分都允許用戶端透過 XMLHTTPRequest 物件與伺服器之間進行非同步溝通，以及傳送與接收XML資料，更重要的是，不需要完全的回傳（Postback）與往返就可以進行網頁的局部更新。毫無疑問的，AJAX 網頁是一種以用戶端為主的網頁，亦即它會儘可能將合適的作業擺在用戶端電腦的瀏覽器中處理。然而問題在於，要建置 AJAX 類型的 Web 應用程式並非易事，原因是您除了需要撰寫大量的 JavaScript 程式碼，還必須非常瞭解 DOM、DHTML與XML，偏偏不同瀏覽器所支援的 DOM 與 DHTML 版本又有所不同，這使得跨瀏覽器的相容性變成一道難以克服的問題。再者，JavaScript 並不像 .NET Framework 一樣支援完整的物件導向與型別安全等特性，更沒有一個整合式的開發環境。另外呢，某些 AJAX 網頁的功能性在實作上有高度的困難度，除非您真的非常精通 JavaScript，否則我看也只能在旁邊暗自嘆息。這些原因，都大大加高了 AJAX 應用程式的進入門檻。 

其實我常說，知道 AJAX 的技術概念是一回事，實作 AJAX 網頁又是一回事。當然，微軟公司也深知箇中的問題，然而將一項開發議題簡化並實用化向來也是微軟公司所擅長的。為了協助開發人員能夠輕鬆建立出 AJAX 類型的網頁應用程式，微軟公司特別推出了 ASP.NET AJAX（目前仍處於 Beta 階段）。ASP.NET AJAX 是一個全新的網頁開發技術，它將全新的用戶端指令碼函式庫與  ASP.NET 2.0 既有的伺服器端架構整合在一起。ASP.NET AJAX所提供的用戶端網頁開發平台與 ASP.NET 2.0 的伺服器端網頁開發平台是完全相同的。事實上，ASP.NET AJAX 是 ASP.NET 2.0 的擴充，因此完全整合了伺服器端開發工具、功能、與服務，此意味著，您無須重新學習任何的語言，便可在 Visual Studio 2005 中開發 AJAX 網頁應用程式。借助於 ASP.NET AJAX，您可以將應用程式的主要處理作業移轉到用戶端來執行，在此同時還能夠以背景作業方式與伺服器端進行溝通。如此一來，您便可開發出具有豐富操作介面、快速回應、不中斷操作的 ASP.NET 網頁程式。

 

圖表1 

如圖表 1 所示，ASP.NET AJAX 的架構橫跨了用戶端與伺服器端，非常適合用來建立操作方式更便利、反應更快速的跨瀏覽器網頁應用程式。 

在用戶端開發方面，ASP.NET AJAX 提供了一組用戶端專用的 JavaScript 函式庫。這些用戶端函式庫是由許多的 JavaScript（.js）檔案所組成，它們構成了一個物件導向類別庫，讓開發人員更容易去建立擁有豐富使用者介面並且能夠跨瀏覽器運作的 AJAX 應用程式。

 

ASP.NET AJAX 不僅僅協助您更容易建立用戶端指令碼，它還提供了可以和 ASP.NET AJAX 用戶端指令碼相互整合的伺服器端元件、服務、以及控制項。 

一個網頁要能夠使用 ASP.NET AJAX 的功能性，則它務必存取用戶端函式庫。欲達此目的非常簡單，您只需將 ASP.NET AJAX 的 ScriptManager 控制項新增至網頁上即可。事實上，任何一個具備 ASP.NET AJAX 功能性的網頁必須至少擁有一個（而且也只能擁有一個）ScriptManager 控制項。在預設狀態下，ScriptManager 控制項會引用主要的 .js 檔案。其實這就是 ASP.NET AJAX 最基本且常用的開發模式，因為在引用了主要的 .js檔案之後，您就可以使用 ASP.NET AJAX 用戶端元件、控制項、以及宣告式語法。 

實作 ASP.NET AJAX 網頁的第一步就是使其具備非同步局部更新功能。也就是說，以非同步方式將網頁中需要更新的部分傳送給Web伺服器來處理，然後將處理後的內容傳送回用戶端瀏覽器來進行局部更新。要讓您的網頁具備非同步局部更新功能非常簡單，首先，請替網頁加入一個 ScriptManager 控制項。加入了 ScriptManager 控制項之後，您還必須替網頁加入一或多個 UpdatePanel 控制項以便指定局部更新的範圍。 

或許這樣說，大家還不是非常瞭解什麼是非同步局部更新。在此，我們將先舉兩個網頁範例來加以比較。 

圖表2 

圖表 2 所示者是網頁範例 CH3_DemoForm001.aspx 的執行畫面，這是一個非常典型的 ASP.NET 2.0 網頁，其功能特性重點說明如下：

q  使用 GridView 控制項來顯示員工資料，而且每一次顯示5筆資料記錄。

q  在預設狀態下，本網頁會列示出所有員工的資料記錄，不過您可以從「以部門別來查詢」下拉式清單方塊中選取特定的部門，並按下「開始」按鈕 ，即會進行篩選並只顯示出該部門的員工資料。

q  按一下已標示底線的資料行標題（例如：姓名），員工資料將會根據該欄位進行排序。

q  如果您要檢視某位員工的詳細資料，只需按一下「查詢詳細資料」資料行中的「查」按鈕 即會開啟「員工個人詳細基本資料」頁面。 

本網頁範例最大的缺點，就是當我們在「員工基本一覽」頁面中，按一下資料行標題、換頁按鈕、或是選取某一個部門來篩選資料時，都會造成瀏覽器重新整理而使得畫面出現閃爍的狀況，而且瀏覽器下方也會出現網頁的讀取進度狀態。之所以如此，是因為整個網頁必須回傳（Postback）給伺服器並將伺服器所傳回的結果重新載入至瀏覽器中。 

事實上，ASP.NET 2.0 本身所提供的回呼（Callback）技術就能夠讓控制項在更新其所內含的資料時，不會回傳至伺服器，也就是說，使用者不會看到瀏覽器下方的網頁讀取進度狀態，正因為不需要與伺服器進行同步溝通，此舉將會加快資料下載速度。以本網頁範例而言，您可以如圖表 3 所示，將 GridView 控制項的 EnableSortingAndPagingCallbacks 屬性設定成 True 並且將 DropDownList 控制項的 AutoPostBack 屬性設定成 True，以便讓瀏覽器不會因為換頁、排序、或選取部門時而回傳至伺服器，造成網頁重新整理、畫面閃爍。 

遺憾的是，此一回呼的作法無法適用於本網頁範例，原因在於，我們在 GridView 控制項中使用一個 HTML 索引標籤的用戶端 Image控制項來顯示性別欄位圖示，如果將GridView控制項的EnableSortingAndPagingCallbacks 屬性設定成 True，則於執行網頁時，性別欄位的圖示將無法被更新，並且會引發錯誤訊息（如圖表 4 所示）。對此一網頁範例而言，如果希望按一下資料行標題、換頁按鈕、以及選取部門來篩選時都不會發生瀏覽器畫面閃爍的重新整理狀況的話，最佳的作法，就是替其加入 ASP.NET AJAX 的非同步局部更新功能。 

圖表3 

圖表4 

緊接著，請您將網頁範例 CH3_DemoForm002.aspx 開啟於瀏覽器中（如圖表 5 所示），並試著執行下列操作：

q  使用導覽按鈕來逐頁檢視資料記錄。

q  按一下資料行的標題來進行排序作業。

q  從「以部門別來查詢」下拉式清單方塊中選取特定的部門來進行篩選作業。 

我們發現，執行上述各項操作時，瀏覽器畫面不會發生閃爍的情況，瀏覽器下方的狀態列也不會出現網頁的讀取進度。之所以如此，是因為我們已經替此網頁注入 ASP.NET AJAX 的非同步局部更新功能（如圖表 6 所示）。 

經過本文的簡單說明與上述的網頁比較，相信大家會體會非同步局部更新功能所帶來的好處。我們今天就先聊到這裡，下次再見。

 

圖表5

 

圖表6