Table Of Content5
微軟 ASP.NET 2.0 的 AJAX 利劍～
ASP.NET AJAX
5-1 AJAX非同步技術
5-2 AJAX簡單範例
5-3 AJAX範例程式特點說明
5-4 瞭解 AJAX應用程式與 ASP.NET AJAX
5-4-1 AJAX所針對的開發議題
5-4-2 AJAX技術概念
5-4-3 ASP.NET AJAX架構提供一個 AJAX新途徑
5-2
前言
自從 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網頁設計環結就能擊敗功力深
厚的網頁程式設計師，而經驗老道的網頁程式設計師還不知自己敗在何
處，那這把從虛空飛來的利劍叫什麼名字呢？它叫「ASP.NET AJAX」，
是一個 AJAX的 Framework，掌握了這把利劍如同掌握了電影「臥虎藏龍」
中的青冥寶劍，能夠在剎那之間擊敗最強的敵手（隱喻網頁設計的難題），
以下將為您解釋什麼是 AJAX，什麼又是 ASP.NET AJAX。
5-1 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 端的究極霸主，在大多數時候兩者之間幾乎是不相干，因為各做各
5-3
的，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有幾種方式：
1. 完全手工自己打造 AJAX(cid:206)缺點是對大多數人而言太困難也太耗時，同
時對 AJAX知識也非常欠缺。
2. 使用 Callback方式(cid:206)缺點是只支援 ASP.NET 2.0，且功能仍不夠完整。
3. 使用現成的 AJAX Library(cid:206)但 Library畢竟只是 Library，和 Framework
比起來稍微遜色了點，但優點是可免費取得，同時適用 ASP.NET 1.0
與 2.0，不失為一個好途徑。
4. 微軟 ASP.NET AJAX (cid:206)優點是定位在 Framework層級，初步的規劃與
設計 Scope較為完整，同時兼顧與考量 Client端與 Server端，可惜的
是只支援 ASP.NET 2.0。
5-4
5-2 AJAX 簡單範例
為了讓各為能夠瞭解什麼是 AJAX，以下是一個 AJAX的手工範例（意
即不引用任何的 Library或 AJAX framework），此範例頗為精要易懂，其
作用主要是透過Client端的Browser來即時監控Web伺服器資源或效能變
化，各位只要做過一遍範例就能夠瞭解 AJAX 在網頁開發上是多麼具有威
力了。
範例 5-1 AJAX 簡單範例
本範例是一個簡單的 AJAX 例子，但麻雀雖小五臟俱全，可由此窺見
原始AJAX非同技術是如何運作，而本範例無論是VS.NET 2003與VS 2005
開發工具皆適用，且不需要安裝任何特殊的 AJAX套件，步驟說明如下：
建立 Web專案
首先在 VS 2005（或 VS.NET 2003）建立一個普通的 WEB專案，專案名
稱為「05AJAX」，或者您沒有 VS開發工具，直接用筆記本建立也行。
建立 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","Server.aspx",true);
XmlHttp.send(null);
XmlHttp.onreadystatechange=ServerProcess;
}
function ServerProcess()
{
5-5
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>
圖5-1 Client.htm頁面
5-6
建立 Server端處理程式
另外在專案中加入一個 Server.aspx網頁（含 .cs），程式碼如下：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Diagnostics;
public partial class Server : System.Web.UI.Page
{
protected void Page_Load(object sender, 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);
}
}
程式說明：
首先記得引用System.Diagnostics命名空間，因為PerformanceCounter
必須使用讓命名空間，而 PerformanceCounter 類別可讓您監控 Windows
作業系統的各種效能計數器，在此透過它取得伺服器每秒可用記憶體大小
變化情形。
5-7
圖5-2 Server.aspx頁面
完成後請執行 Client.htm 程式，頁面載入時大約會花 5 秒啓始
Performance-Counter物件，之後透過 AJAX便可每秒獲得 Server可用記憶
體變化情形，當然也許有的人會想到用 Server Side的 Timer，但那種方式
會造成 Server的 Loading爆增，人多的話還可能搞垮你的 Server，但 AJAX
就具有極佳的彈性與靈巧，透過 AJAX 您可以即時偵測到資料庫或事件的
變化，即時顯現在網頁上，比如說我有十台 WEB Server（只開 Port 80），
以AJAX這種方式即可以單一網頁上監控到十台Server CPU與記憶體或網
路流量等大小，是不是十分具吸引力呢。
圖5-3 伺服器每秒記憶體變化情形
5-8
5-3 AJAX 範例程式特點說明
以上的 AJAX範例應用程式有幾個特點：
1. JavaScript 要如何可以 Call 得到 .NET Server 上的方法或 Web
Service，若以傳統網頁程式觀念來看似乎是〝不可能〞，因為 Client
端的JavaScript沒法直接參照到Server端的 .NET CLR的記憶體位址。
2. 在以往也許有的人想辦法實做 Server 的 Timer 來達成相同的效果，但
做過的人應感受到以 Server 端方式是多麼地笨重與耗費系統資源，若
提供多人同 時使用可能 Server負擔會更加沉重。
3. AJAX程式能夠不留痕跡地與呼叫 Server應用程式或 Web Service，並
處理回傳資料迅速更新網頁資料，讓人幾乎忘了 Client 端與 Server 端
的分隔存在。
4. 後面對 XMLHTTP的運作會有一個初步的解釋。
5-4 瞭解 AJAX 應用程式與 ASP.NET AJAX
本小節將敍述在開發 AJAX 時，程式開發人員所會面臨之議題，並針
對 AJAX 開發實際上會涉及哪些技術，最後針對這些議題與技術整合，說
明微軟提供的 ASP.NET AJAX解決方案其架構組成，看看 ASP.NET AJAX
能夠為開發人人員帶來何種助益與效益。
5-4-1 AJAX 所針對的開發議題
使用者與開發者皆能體驗到傳統網頁應用程式Request-Response模式
所造成的侷限性，因為網頁是無狀態的，故每當網頁資料或使用者介面需
要變更時，必須將整個網頁 post back 到伺服器更新，意即頁面必須進行
Client端與 Server端之間的往返，尤其是當 Client與 Server之間若有極大
量的資料過度頻繁的往返，將會造成者用者感受到非常漫長的等待。
另一個議題是網頁瀏覽器之中的 HTML 控制項與桌面應用程式的
Rich UI相較之下顯得能力有限，很多瀏覽器都包含增強的 HTML控制項，
但是這些增強的 HTML控制項都是針對特定瀏覽器而實作，因此想要獲得
這些增強 HTML控制項的 Rich UI，網頁應用程式開發者必須針對特定瀏
5-9
覽器建立應用程式，這將會非常複雜，故很多開發人員避免在他們網頁之
中建立以特定 Client 端特徵的功能，因此使用者發現網頁應用程式的吸引
力相較於其他類型的應用程式要小得多。AJAX 開發方法是針對以上兩個
開發議題提供解決方案。
5-4-2 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 端類型技
術，包括了：
(cid:121) 瀏覽器的 Document Object Model（DOM）：DOM將這些元素呈現在
HTML網頁中成為標準的物件組（如 document、windows等等），並
且能夠透過程式化方式來操作它們。
(cid:121) 動態 HTML（DHTML）：當使用者在頁面中輸入時，DHTML透過 Client
端的 Script方式延伸了 HTML互動的反應能力，並且使其變得更容易，
並且不需要往返的行為。
(cid:121) 行為（Behaviors）：這是一種程式化包裝在使用者介面中的動作（如
拖曳 drag and drop行為），並且能夠與網頁元素產生連結。
5-10
(cid:121) 元件（Component）：是一種能夠提供擴充 Client 端使用者介面功能
特點的客製化 JavaScript物件。
JavaScript結合這些 Client端技術後，使得程式開發人員足以建立能夠
媲美桌上型應用程式的使用者介面功能特點，在這有兩個例子可提供給大
家參考：
1. 微軟 Virtual Earth網站：一個提供電子地圖的網站。
2. 微軟 Outlook Web Access：一種透過 WEB瀏覽器收發 e-mail的 Client
端使介面。
以上兩個例子皆展示出以 AJAX 技術所建立豐富的使用者介面與高效
能之應用程式典範。
然而使用這些技術來建構 AJAX 應用程式是複雜的，直到現在程式開
發人員仍必須手動建立事件處理、訊息傳遞、和建立豐富性使用者介面所
需要的細節。而且再者因為 JavaScript 不是物件導向語言（OOP），故它
沒有強型別、命名空間、例外事件處理與其 OOP之特點，為這些功能特點，
程式開發人員還經常必須以其他的語言來撰寫內建於其中的專屬基礎架構
程式碼。
5-4-3 ASP.NET AJAX 架構提供一個 AJAX 新途徑
ASP.NET 如何能夠利用 AJAX 應用程式的威力？微軟的答案是：
「ASP.NET AJAX」，ASP.NET AJAX提供所有 AJAX的能力，但是卻進
一步擴充其概念，並且大幅降低AJAX應用程式開發的複雜性，而ASP.NET
AJAX同時提供了 Client端與 Server端兩方面的能力，以下為架構圖。
Description:相關參考網址. 1. 微軟ASP.NET AJAX 入口網站 http://ajax.asp.net. 2. DotNet 開發
聖殿 http://blog.sina.com.tw/dotnet/. 3. AJAX 魔法工廠 http://blog.sina.com.tw/ajax
