作者：奚江華
自從 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 是由「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 的手工範例（意即不引用任何的 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 伺服器網頁發出非同步呼叫請求，並且將伺服器回傳資料更新到網頁元素中，程式碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
function sendAJAX()
{
XmlHttp.Open("POST","Receive.aspx",true);
XmlHttp.send(null);
XmlHttp.onreadystatechange=ServerProcess;
}
function ServerProcess()
{
if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
{
document.getElementById('nameList').innerHTML =XmlHttp.responsetext;
}
}
setInterval('sendAJAX()',1000);
</script>
</head>
<body>
<div id="nameList"></div>
</body>
</html>
圖1 Client.htm 頁面
Step 3：建立 Server 端處理程式
另外在專案中加入一個 Receive.aspx 網頁（含.cs），程式碼如下：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Diagnostics;
namespace SimpleAJAX
{
///
/// Receive 的摘要描述。
///
public class Receive : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
PerformanceCounter myMemory=new PerformanceCounter();
myMemory.CategoryName="Memory";
myMemory.CounterName="Available KBytes";
string txtResult="-->伺服器可用記憶體大小："+
myMemory.NextValue().ToString()+"KB";
Response.Write(DateTime.Now.ToLongTimeString()+txtResult);
}
}
}
圖 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 藍圖與策略，以下介紹微軟兩篇文章：
一、介紹
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 端類型技術，包括了：
JavaScript 結合這些 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，提供了下列功能特點：
（二）在 Server 端方面
Atlas 在 Server 端方面亦包括了豐富的伺服元件功能特點，以補充 Atlas 在 Client Script Libraries 函式庫之不足，包括了：
一、介紹
代號 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伺服端的自動完成
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。