微軟 ASP.NET 2.0 的 AJAX 利劍~ Atlas Framework

來源:互聯網
上載者:User
 

微軟 ASP.NET 2.0 的 AJAX 利劍~ Atlas Framework

(作者為微軟資深專家,名字記不清了)

前言

自從 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 服務器網頁發出非同步呼叫請求,並且將伺服器回傳資料更新到網頁元素中,程式碼如下:

<!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 伺服器每秒記憶體變化情形

程式說明:

這個應用程式有幾個特點:

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 的運作會有一個初步的解釋。

為了讓大家能夠正確瞭解 AJAX 與 Atlas Framework 藍圖與策略,以下介紹微軟兩篇文章:

1.      瞭解 AJAX 應用程式與 ASP.NET Atlas Framework

2.      這篇文章開始是介紹傳統 ASP.NET 網頁程式開發和局限性,進而介紹 AJAX 技術概觀及其優點,而微軟針對 AJAX 技術提出一個新的 Atlas Framework 來簡化 AJAX 複雜的程式開發,最後簡單說明 Atlas Framework 架構組成及功能性。

3.      ASP.NET Atlas Framework 概觀

4.      本篇文章揭露 Atlas Framework 功能設計及整體概觀,解說 Atlas Framework Client 端與 Server 端之功能架構,對於 Atlas 能夠同時兼顧與整合 Client 端與 Server 端功能這是一個高明的策略,因為若只是純粹考慮 Client 端 JavaScript 呼叫或頁面處理必定會大大限制了 AJAX 應用程式開發,無法徹底發揮 ASP.NET 2.0 所有 Server 端的優勢,且程式開發人員必須持久性與 Client 端前端呼叫或資料處理繁瑣工作糾纏,這種做法將會大打折扣,慶幸的是 Atlas Framework 一開始就走上正確的路,透過 Atlas 控制項來開發 AJAX 應用程式或功能,幾行的程式碼便能完成以前需數周或者根本無從下手的網頁功能(如網頁的自動完成)。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.