跳到主要內容區塊

計資中心電子報C&INC E-paper

技術論壇

AJAX(互動式網頁應用的網頁開發技術)
  • 卷期:v0001
  • 出版日期:2007-06-20

作者:陳嬿竹 / 臺灣大學計算機及資訊網路中心程式設計組


什麼是「AJAX」?它是综合了「Javascript + DHTML + DOM + CSS + XMLHttp + XML」等「多位一體」的互動式網頁應用開發技術,除了「所思即所見」特色外,「AJAX」可以說是一種以「客戶為導向的網頁應用DIY開發程式」。

 

前言

Web2.0是近年來流行的新趨勢,而推動此一流行的重要技術即是「AJAX網頁技術」,到底AJAX是什麼東西呢?AJAX全稱為「Asynchronous JavaScript and XML」(非同步JavaScriptXML),是一種創建互動式網頁應用的網頁開發技術(註1)。它其實不是個新東西,它的技術综合了「Javascript + DHTML + DOM + CSS + XMLHttp + XML」等多種網頁開發技術,早在2000年便已經提出,一直到最近隨著Web2.0的網站興起,才再度被大家廣泛地討論。

 

傳統網頁與AJAX網頁的操作感覺

大家應該有過這種經驗,使用搜尋引擎找網頁資料時,按照搜尋引擎的分類一個個點進去。舉例而言,以最廣為人使用的Yahoo!奇摩為例,假如想找台灣之光王建民的選手資料(並非找新聞),從熱門分類找到運動體育這類,點擊後進到下一頁,再點選運動明星、點選棒球,好不容易找到正確的分類,這個分類下有三頁,再一頁頁找尋想找的資料,有興趣的人可以試試看,這樣找竟然還是找不到關於王建民的介紹。

如左圖所示,我們想搜尋的網頁隱藏在茫茫網海之中,傳統方式須透過點擊、等待畫面、思考、再點擊、等待畫面、再思考…重複幾個循環後,還不見得能找到所要的資料。

 

20070620008001.jpg

 

20070620008002.jpg

 

究竟要如何能更快、更直接的找到所需的資料呢?有別於一般入口網站,當今最著名的搜尋網站Google http://www.google.com則是提供了強大的搜尋功能,畫面簡單明瞭,僅讓使用者輸入想查詢的字串,便會找出相關的資訊。最近Google搜尋加入了「自動補齊字串」的新功能,此即為AJAX的技術的應用之一。我們用一樣的範例透過Google來搜尋。才剛輸入完前兩個字,底下就自動顯示許多搜尋關鍵字,後面並出現對應的搜尋結果次數。甚至可以再繼續增加關鍵字縮小搜尋結果的範圍。對使用者而言,可以更快更精準的找到所需的資料。因此透過AJAX技術的演進,使用者可以擺脫以往Click and Wait的痛苦經驗,取而代之的是「所思即所見」。

 

如何撰寫AJAX網頁

如同先前所提過的,AJAX技術是由「Javascript + DHTML + DOM + CSS + XMLHttp + XML」等技術綜合應用而成的,因此,對於這些網頁技術熟悉的使用者,可以直接用Javascript去撰寫AJAX網頁。再者,若有使用Microsoft Visual Studio 2005的讀者,可利用其Client Script Callback的功能,達到AJAX網頁的功能。但這些功能應該是無法滿足所有的需求。

Microsoft在去年推出ASP.NET AJAX,並在今年正式推出1.0版,並在官方網頁提供免費下載。可供下載的元件有兩個,分別是:ASP.NET 2.0 AJAX Extensions 1.0及ASP.NET AJAX Control Toolkit(註:必須先安裝好ASP.NET AJAX1.0,才能夠安裝使用Control Toolkit)。AJAX 1.0內有Script Manager幫助使用者撰寫AJAX網頁,而在AJAX Control Toolkit中則提供32個常見的控制項, 有興趣的讀者可自行到Microsoft ASP.NET AJAX官方網頁http://ajax.asp.net/下載使用。

 

體驗AJAX風格的網頁

Google Maps

http://maps.google.com/

Google地圖服務,使用者利用地圖左上方的拉桿調整地圖解析度,網頁會即時顯示該解析度之地圖資料。需要移動地圖畫面時,僅需用滑鼠拖拉底圖即可移動。相較於傳統網頁地圖服務,會在地圖四周出現箭頭,往右鍵頭點一下會重新整理畫面,將地圖右移。同樣調整解析度也需透過重新整理畫面,使用者花費許多時間在等待網頁傳輸。目前Google Maps也已經將台灣地區的路名、巷道全面更新為中文版,對於不熟悉英文的網友有相當大的吸引力。未來搭配上目前越來越多人使用的GPS系統,將可以方便各個使用者針對不同的需求,製作自己需要的地圖。

 

20070620008003.jpg

 

Amazon Diamond Search

http://www.amazon.com/gp/gsl/search/finder

Amazon購物網站中提供鑽石買家的挑選介面,網頁中提供六種不同的鑽石挑選標準,買家可以根據需求自定標準,只要透過項目勾選或是拉動上下限的標準桿,網頁便會及時的呈現根據此標準下所挑選出符合條件的產品數目。比起傳統搜尋方式(使用者自行輸入篩選標準,點擊搜尋鍵,下一頁才顯示結果),整個介面十分容易操作,速度更是快很多。

 

Art editor Img

 

Web Online Office

http://www.amazon.com/gp/gsl/search/finder

除了傳統的Microsoft Office之外,透過AJAX技術的發展,目前已可在網頁上做出如Word、Excel等功能的網頁應用程式。以下列出幾個較著名的web online office網站,有興趣的讀者可以自行去試用。

 

Art editor Img

 

參考資料

  • 最新網頁開發技術Microsoft Ajax─財團法人資訊工業策進會
  • Applying Ajax: Speeding the Journey from Idea to Information─Eric Miraglia