AJAX(互動式網頁應用的網頁開發技術)

手機版選單

下方連結

卷期：v0001
出版日期：2007-06-20

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

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

前言

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

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

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

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

究竟要如何能更快、更直接的找到所需的資料呢？有別於一般入口網站，當今最著名的搜尋網站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系統，將可以方便各個使用者針對不同的需求，製作自己需要的地圖。

Amazon Diamond Search

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

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

Art editor Img