微軟 ASP.NET 2.0 的 AJAX 利劍 ～ Atlas Framework
MSDN 程式開發講座：
微軟 ASP.NET 2.0 的 AJAX 利劍 ～ Atlas Framework
作者：奚江華
- 【ASP.NET網頁設計與C#】書籍作者
- DotNet 開發聖殿 Blog 殿祭司
前言
| |||||||||||
自從 2002 年 VS.NET 2002 版的發表，微軟的網頁技術正式由 ASP 邁向新的 ASP.NET 里程碑，劃時代的 ASP.NET 在短短幾年時光躍居成為熱門主流，順利攻佔資訊媒體與網頁程式開發人員的目光焦點，深獲大家的喜愛與讚賞，同時也造就全球一股 .NET 熱潮，於此時您看見本篇文章時，下一代的 VS 2005 與 ASP.NET 2.0 已經正式發表（美國 11/7 日），由於前一代 ASP.NET 1.0 技術的成功，很自然的大家早就引領期盼 ASP.NET 2.0 豐富控制項與底層功能完整性能夠早日到來，但如果您只知道 ASP.NET 2.0、VS 2005 產品或技術，目前您已置身於 ASP.NET 技術危機，因為在您背後正有一把巨大的利劍飛來，一個不小心就穿刺您堅強的技術盔甲，有這麼誇張嗎？一點也不誇張！因為一個火候尚淺的 ASP.NET 初學者只要巧妙熟練運用這把利劍，在某些 ASP.NET 網頁設計環結就能擊敗功力深厚的網頁程式設計師，而經驗老道的網頁程式設計師還不知自己敗在何處，那這把從虛空飛來的利劍叫什麼名字呢？它叫「Atlas」，是一個 AJAX 的 Framework，掌握了這把利劍如同掌握了電影「臥虎藏龍」中的青冥寶劍，能夠在剎那之間擊敗最強的敵手（隱喻網頁設計的難題），以下將為您解釋什麼是 AJAX，什麼又是 Atlas Framework。
AJAX 非同步 技術
AJAX 是由「Asynchronous JavaScript and XML」這幾個英文字的開頭所組成，是一種非同步的技術，表面上看來是「非同步」、「JavaScript 」、「XML」這三種東西，好像沒什麼了不起！？大家多多少少都有玩過，寫網頁的人多少都懂 JavaScript，有的人熟到不能再熟了，XML 也有摸過，至於同不同步好像不重要，幾個月前我第一次看到 AJAX 這字眼時直覺就是如此，想說～又要新瓶裝舊酒或冷飯熱炒了嗎？所以瞄過一眼國外文章後就匆匆帶過，但接連三天 "AJAX" 這個字眼在美國微軟的 MSDN Blog 中一堆專家接二連三提出，我才感覺苗頭好像不對，竟然有我不知道的技術存在（如果 AJAX 很重要很 Power 的話），故深入 Study 一下 AJAX 原理與技術，OH~My GOD！還真的蠻 Power 的。
大家都知道 JavaScript 是 Client 端古老的王者，而 .NET 是新一代 Server 端的究極霸主，在大多數時候兩者之間幾乎是不相干，因為各做各的，AJAX 它 Power 的地方似乎不在於「Asynchronous JavaScript and XML」表面上技術，而重點在於 AJAX 能夠巧妙將 Client 端與 Server 端技術串起來融合在一起，Client 端一旦能夠援引 Server 端的應用程式，您將會發覺所設計的網頁力量將源源不絕，而這用傳統的 ASP 或 ASP.NET 來說似乎 "不可能" ，因為 Web 是無狀態，故 Browser 和 Web Server 之間是不會有任何連線，只會有所謂的 Request 與 Response 的行為，且兩者的記憶體管理空間和模式根本是兩個世界，故 JavaScript 要和 .NET Code 無礙地融合也不太可能，但透過 AJAX 非同步模式的力量，可使得 JavaScript 能夠自由自在呼叫 C#、VB.NET 或 Web Service 強大的力量，然後還能回傳 .NET 型別物件如 DataSet 供 JavaScript 來處理；除此之外 AJAX 非同步技術只需傳遞少量資料回 Server 處理，不像現在必須用 Postback 大笨牛的方式將整個頁面回傳 Server 端處理，從此可以和 Postback 大笨牛 Say bye bye，動作靈巧得不可思議！（但意思不是要丟棄 Postback，而是視需要使用 AJAX 可以更靈活）。
OK！言歸正傳，那要如何使用 AJAX 呢？首先我要澄清一點 AJAX 只是一種 "概念" ，意思是透過「Asynchronous JavaScript and XML」這三類的技術實作出來的東西都可稱做 AJAX，而非指特定某個元件或產品，就我目前所知要實作 AJAX 有幾種方式：
- 完全手工自己打造 AJAX：缺點是對大多數人而言太困難也太耗時，同時對 AJAX 知識也非常欠缺。
- 使用 Callback 方式：缺點是只支援 ASP.NET 2.0，且功能仍不夠完整。
- 使用現成的 AJAX Library：但 Library 畢竟只是 Library，和 Framework 比起來稍微遜色了點，但優點是可免費取得，同時適用 ASP.NET 1.0 與 2.0，不失為一個好途徑。
- 微軟 Atlas Framework：優點是定位在 Framework 層級，初步的規劃與設計 Scope 較為完整，同時兼顧與考量 Client 端與 Server 端，遺憾是只支援 ASP.NET 2.0。
AJAX 簡單範例
為了讓各為能夠瞭解什麼是 AJAX，以下是一個 AJAX 的手工範例（意即不引用任何的 Library 或 AJAX framework），此範例頗為精要易懂，其作用主要是透過 Client 端的 Browser 來即時監控 Web 伺服器資源或效能變化，各位只要做過一遍範例就能夠瞭解 AJAX 在網頁開發上是多麼具有威力了。
Step 1：建立 Web 專案
首先在 VS.NET 2003（或 VS 2005）建立一個 WEB 專案，專案名稱為「SimpleAJAX」，或者您沒有 VS 開發工具，直接用筆記本建立也行。
Step 2：建立 Client 端頁面
請在 Web 專案中加入一個 Client 端頁面「Client.htm」，並將此頁面設定為起始頁，這個頁面會向 Web 伺服器網頁發出非同步呼叫請求，並且將伺服器回傳資料更新到網頁元素中，程式碼如下：
圖1 Client.htm 頁面
Step 3：建立 Server 端處理程式
另外在專案中加入一個 Receive.aspx 網頁（含.cs），程式碼如下：
圖 2 Receive.aspx 頁面
執行結果：
執行後約花 5 秒啓始 PerformanceCounter 物件，之後透過 AJAX 便可每秒獲得 Server 可用記憶體變化情形，當然也許有的人會想到用 Server side 的 Timer，但那種方式會造成 Server 的 Loading 爆增，人多的話還可能搞垮你的 Server，但 AJAX 就具有極佳的彈性與靈巧，透過 AJAX 您可以即時偵測到資料庫或事件的變化，即時顯現在網頁上，比如說我有十臺 WEB Server（只開 Port 80），以 AJAX 這種方式即可以單一網頁上監控到十臺 Server CPU 與記憶體或網路流量等大小，是不是十分具吸引力呢。
圖 3 伺服器每秒記憶體變化情形
程式說明：
這個應用程式有幾個特點：
為了讓大家能夠正確瞭解 AJAX 與 Atlas Framework 藍圖與策略，以下介紹微軟兩篇文章：
這篇文章開始是介紹傳統 ASP.NET 網頁程式開發和侷限性，進而介紹 AJAX 技術概觀及其優點，而微軟針對 AJAX 技術提出一個新的 Atlas Framework 來簡化 AJAX 複雜的程式開發，最後簡單說明 Atlas Framework 架構組成及功能性。
本篇文章揭露 Atlas Framework 功能設計及整體概觀，解說 Atlas Framework Client 端與 Server 端之功能架構，對於 Atlas 能夠同時兼顧與整合 Client 端與 Server 端功能這是一個高明的策略，因為若只是純粹考量 Client 端 JavaScript 呼叫或頁面處理必定會大大限制了 AJAX 應用程式開發，無法徹底發揮 ASP.NET 2.0 所有 Server 端的優勢，且程式開發人員必須持續性與 Client 端前端呼叫或資料處理繁瑣工作糾纏，這種做法將會大打折扣，慶幸的是 Atlas Framework 一開始就走上正確的路，透過 Atlas 控制項來開發 AJAX 應用程式或功能，幾行的程式碼便能完成以前需數週或者根本無從下手的網頁功能（如網頁的自動完成）。
瞭解 AJAX 應用程式與 ASP.NET Atlas Framework
一、介紹
AJAX 描述一個跨平臺、以 Client 端為中心的網頁應用程式開發途徑，在 AJAX 技術中程式開發者使用 Client 端 Script 進行對伺服端應用程式的呼叫，並且此種呼叫使用以 XML 為基礎的通訊協定，微軟代號 "Atlas" 是一個 AJAX 開發方法的應用與擴充 ASP.NET 套件，這個主題描述 AJAX 所要解決的網頁應用程式開發的相關議題，解釋 AJAX 基本概念，和介紹 ASP.NET Atlas 為 AJAX 開發途徑所帶來的重大革命與增強。
AJAX 所針對的開發議題
使用者與開發者皆能體驗到傳統網頁應用程式 Request-Response 模式所造成的侷限性，因為網頁是無狀態的，故每當網頁資料或使用者介面需要變更時，必須將整個網頁 post back 到伺服器更新，意即頁面必須進行 Client 端與 Server 端之間的往返，尤其是當 Client 與 Server 之間若有極大量的資料過度頻繁的往返，將會造成者用者感受到非常漫長的等待。
另一個議題是網頁瀏覽器之中的 HTML 控制項與桌面應用程式的 Rich UI 相較之下顯得能力有限，很多瀏覽器都包含增強的 HTML 控制項，但是這些增強的 HTML 控制項都是針對特定瀏覽器而實作，因此想要獲得這些增強 HTML 控制項的 Rich UI，網頁應用程式開發者必須針對特定瀏覽器建立應用程式，這將會非常複雜，故很多開發人員避免在他們網頁之中建立以特定 Client 端特徵的功能，因此使用者發現網頁應用程式的吸引力相較於其他類型的應用程式要小得多。AJAX 開發方法是針對以上兩個開發議題提供解決方案。
二、AJAX 技術概念
AJAX 是建立在一個核心概念：使用非同步呼叫，並結合 XML 方式傳輸資料與大量使用 Client Script。
在 AJAX 技術中，程式開發人員能夠以 Client 端 Scripts 方式透過 XMLHTTP 來進行非同步的 Web 服務呼叫，而 XMLHTTP 通訊協定常用於將資訊封裝成 XML 資料型式在網路間傳送，大多數的瀏覽都有實作 XMLHTTP 類別，而此類別用於建立一個進行遠端呼叫與資料收發的 proxy 物件，透過非同步方式進行呼叫，網頁中的資料與使用者介面不需要進行 Client 端與 Server 端之間的往返，結果是具有較少的資料傳送與較佳的應用程式效能，非同步呼叫能夠使得網頁應用程式能夠有更佳良好的反應性，因為使用者能夠在呼叫工作仍在 Server 端執行的同時，而在 Client 端瀏覽器繼續進行工作。
另一方面 AJAX 大量使用 Client 端 Script，特別是 JavaScript，JavaScript 是用於進行遠端呼叫、執行 Client 端應用程式的處理與建立增強的使用者介面功能。
AJAX 的解決方案使用 JavaScript 並搭配其他數種 Client 端類型技術，包括了：
- 瀏覽器的 Document Object Model（DOM）：DOM 將這些元素呈現在 HTML 網頁中成為標準的物件組（如 document、windows 等等），並且能夠透過程式化方式來操作它們。
- 動態 HTML（DHTML）：當使用者在頁面中輸入時，DHTML 透過 Client 端的 Script 方式延伸了 HTML 互動的反應能力，並且使其變得更容易，並且不需要往返的行為。
- 行為（Behaviors）：這是一種程式化包裝在使用者介面中的動作（如拖曳 drag and drop 行為），並且能夠與網頁元素產生連結。
- 元件（Component）：是一種能夠提供擴充 Client 端使用者介面功能特點的客製化 JavaScript 物件。
JavaScript 結合這些 Client 端技術後，使得程式開發人員足以建立能夠媲美桌上型應用程式的使用者介面功能特點，在這有兩個例子可提供給大家參考：
- 微軟 Virtual Earth 網站：一個提供電子地圖的網站。
- 微軟 Outlook Web Access：一種透過 WEB 瀏覽器收發 e-mail 的 Client 端使介面。
兩者皆展示出以 AJAX 技術所建立豐富的使用者介面與高效能之應用程式典範。
然而使用這些技術來建構 AJAX 應用程式是複雜的，直到現在程式開發人員仍必須手動建立事件處理、訊息傳遞、和建立豐富性使用者介面所需要的細節。而且再者因為 JavaScript 不是物件導向語言（OOP），故它沒有強型別、命名空間、例外事件處理與其 OOP 之特點，為這些功能特點，程式開發人員還經常必須以其他的語言來撰寫內建於其中的專屬基礎架構程式碼。
三、ASP.NET Atlas 提供一個新途徑
ASP.NET 如何能夠利用 AJAX 應用程式的威力微軟的答案是：「Atlas」，ASP.NET Atlas 提供所有 AJAX 的能力，但是卻進一步擴充其概念，並且大幅降低 AJAX 應用程式開發的複雜性，而 Atlas 同時提供了 Client 端與 Server 端兩方面的能力，說明如下：
（一）在 Client 端方面
Atlas 提供了一組豐富的 Script Libraries，提供了下列功能特點：
- 物件導向開發
Client 端的 Libraries 函式庫在 JavaScript 中加入了物件導向特性，如型別系統、資料型別、命名空間、事件等等，這些特性給予程式開發人員一個熟悉的程式撰寫模式，使得您能夠開發出更高品質、具有維護性與可重複使用性的程式碼。 - 瀏覽器相容性
Libraries 函式庫會自動處理不同瀏覽器的相容性問題，免除了撰寫特定瀏覽器的 Scripts 的必要性。 - 行為與 Client 端元件
Libraries 函式庫包括了常用的行為，包括了「auto-completion、drag and drop、popup 與 mouse hovering」，同時它們也加入了能夠繫結資料的元件，如此簡化了建立事件驅動的商業應用程式。 - 負責處理遠端呼叫的程式碼
Libraries 函式庫負責管理透過 XMLHTTP 進行非同步呼叫的複雜性，降低到只需要幾行 Script 程式碼便能進行非同步呼叫。 - 宣告式程式撰寫模式
Libraries 函式庫允許您建立 Atlas 元件時使用宣告性語法，如同您建立 ASP.NET 伺服器控制項的方式一樣。
（二）在 Server 端方面
Atlas 在 Server 端方面亦包括了豐富的伺服元件功能特點，以補充 Atlas 在 Client Script Libraries 函式庫之不足，包括了：
- Web 伺服器控制項
這些 ASP.NET Atlas 伺服器控制項能夠發出 Client 端的 Script 以便您使用 Atlas 功能特點，如果您已經非常熟悉伺服端程式開發，這些伺服器控制項對您將會非常有用，或者您不必手動建立 Atlas Client 端 Scripts。 - Web 服務
有一些 Web 服務能夠為 Atlas 應用程式加入非常有用的伺服端功能特點，如 ASP.NET 2.0 的 profiles。
ASP.NET Atlas Framework 概觀
一、介紹
代號 Atlas 是一個新的 ASP.NET 網頁開發新技術，在 ASP.NET 2.0 伺服器開發平臺下整合 Client 端的 Script Libraries，Atlas 對於網頁開發所建構的 AJAX 策略是能夠讓你從 Client 端 Script 呼叫 Server 端的網頁應用程式，Atlas 能夠處理在 Client 端應用程式重要部分而不必往返 Server 端更新 Page 頁面。
這種發展策略能夠令你建立一種新型態的 Web 應用程式，而且具有許多超越傳統 Web 開發的一些利益優點，AJAX 類型應用程式能夠提供較好的效能、跨瀏覽器運作、且能讓你建立更為豐富的使用者介面特色。
ASP.NET 的 Atlas 套用了這種新策略在 Web 應用程式建置上，同時加入了 Client 端及 Server 端的開發元件來大大增強 Atlas 的 AJAX 開發能力。
二、Atlas 目標
Atlas 主要目標是在以下兩方面目的提供開發者廣泛的應用程式建置區塊：
（一）第一個目標
Atlas 第一個目標是幫助你建立 AJAX 應用程式，因為 AJAX 本身具的一定的複雜性，而 Atlas 則替您管理開發 AJAX 應用程式所會面臨的複雜性，提供的特色包括了：
（二）第二個目標
Atlas 第二個目標是整合 Client Scripting 在 ASP.NET 伺服端的程式開發，有別於以往程式的開發不是只專注在 Client 端就是專注在 Server 端的情形，Atlas 同時提供了 Client 端與 Server 端的工具，無論什麼樣的情況下 Atlas 都可以協助您處理大多數的應用程式開發，ASP.NET 為 Atlas 應用程式提供了下列伺服端的特點：
三、Atlas 架構
Web 應用程式最小需求只要 Atlas Client Script Library 來呼叫 Web 伺服器上的服務或應用程式即可，但做為一個最好的開發選項與工具而言，你可能會想要使用 Server 端的 Altas 元件，而 Atlas 架構同時由 Client Script Library 與 Server 端的 Altas 元件所組成，以下為敘述：
（一）Atlas Client 端元件
下圖描繪出 Atlas client script library 架構圖：
圖 3 Atlas Client 端組成元件架構圖
Atlas Client Script Library 是由一些 JavaScript(.js) 檔案所組成，並且提供了物件導向特性以供程式開發，這不是之前的Scripting開發環境而已，它提供了一個新的一致性與模組化層次，Atlas Client Script Library 包括了：
（二）Atlas 伺服端元件
Atlas 伺服端元件主要是由 ASP.NET Web Services 及 ASP.NET 伺服器控制項所組成，下面為 Atlas 伺服端元件架構圖：
圖 4 Atlas 伺服端元件架構圖
上圖意謂著所有 ASP.NET 的功能特點夠完全被 Atlas 應用程式來取用。
Atlas 也包含 ASP.NET 伺服端的元件，包括 Web Services 及伺服器控制項，這些元件能夠與 Client Script Libraries 結合在一起運作，Atlas 能夠獲得來自 Web Services 的一些利益優點，包括了：
ASP.NET 亦包括了類似 ASP.NET 伺服器控制項的 Atlas 伺服器控制項，但是 Atlas 伺服器控制項卻具有能夠發出 Client Script 的能力，Atlas 伺服器控制項簡化了產生 Atlas Client Script 過程，適合想要專注在伺服端開發的程式開發者，Atlas 包含了完整伺服器控制項如 Button、Label、Option、TextBox、CheckBox、HyperLink、Validator 等等，與現有 ASP.NET 伺服器控制項非常接近；也有 Atlas 伺制項能夠發出 JavaScript 產生 Client 端行為，包括 HoverBehavior 控制項、ClickBehavior 控制項、Popup 控制項與 AutoCompleteBehavior 控制項，所有控制項將會整合進 Visual Studio 之中，故你可以在設計模式中使用它們如同你在使用一般 ASP.NET 伺服器控制項一般。
而 Atlas Framework 安裝套件亦已經提供測試版下載使用，其中提供了五個 Hands-On-Lab，為了瞭解 Atlas Framework 本身的奧祕，筆者本身也實際安裝測試使用，在做完前三個 Lab 時，仍不能明顯感受到它與手工或者其他的 AJAX Library 有什麼明顯區別，心中想難道是微軟誇大其詞？但在做完第四個 Lab 之後，Atlas 的感覺就來了，可以明顯體驗到 Atlas 優越之處，果然有 Framework 層級的味道，而非僅僅是個 Library 函式庫水準而已，像在 Web 中的 TextBox 控制項裡要做到像電子字典般 Key 開頭幾個英文字，接著畫面就列示相關的英文字供選擇，或者是以前有個朋友曾問我，他想在 ASP.NET 1.0 的 TextBox 控制項中輸入幾個開頭的訂單號碼，然後畫面就...咚咚咚，從資料庫調相關的記錄列示在畫面上供業務人員選取，我很直接的告訴他 ～ 我不會，二年後過去了，解答就在這 ～ Atlas Framework，簡單到不可思議，最核心部分只要兩行程式碼...就足以打敗我以前修練一甲子還做不到的功力（呵～誇張一下，我還年輕離一甲子還很遠呢！）。
在看完 Atlas Framework 功能及架構之後您是不是躍躍欲試心動不已呢！我瞭解現代人速成之心，沒空耐著性子慢慢修或研究 AJAX 理論一年半載後再來實作，故下期我將介紹 Atlas Framework 實際上手的 Labs，教您直接揮舞 Atlas 這把鋒利的寶劍，您就會領略什麼是 Atlas，有了 Sense 之後再來討論更深層的 AJAX 理論，您會比較有感覺，下期見。
圖5 Atlas伺服端的自動完成
相關參考網址：
微軟 Atlas 入口網站
http://atlas.asp.net
ASP.NET 'Atlas' Preview Documentation
http://beta.asp.net/default.aspx?tabindex=7&tabid=47
Understanding AJAX Applications and ASP.NET "Atlas"
ASP.NET "Atlas" Overview
轉載于:https://www.cnblogs.com/snhome/archive/2007/09/03/880196.html
總結
以上是生活随笔為你收集整理的微軟 ASP.NET 2.0 的 AJAX 利劍 ～ Atlas Framework的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WINDOWS SERVER 2003从
- 下一篇： asp.net ajax控件工具集 Au