AJAX(互動式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù))
什么是「AJAX」?它是綜合了「Javascript + DHTML + DOM + CSS + XMLHttp + XML」等「多位一體」的互動式網(wǎng)頁應(yīng)用開發(fā)技術(shù),除了「所思即所見」特色外,「AJAX」可以說是一種以「客戶為導(dǎo)向的網(wǎng)頁應(yīng)用DIY開發(fā)程式」。
前言
Web2.0是近年來流行的新趨勢,而推動此一流行的重要技術(shù)即是「AJAX網(wǎng)頁技術(shù)」,到底AJAX是什么東西呢?AJAX全稱為「Asynchronous JavaScript and XML」(非同步JavaScript和XML),是一種創(chuàng)建互動式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)(注1 )。它其實不是個新東西,它的技術(shù)綜合了「Javascript + DHTML + DOM + CSS + XMLHttp + XML」等多種網(wǎng)頁開發(fā)技術(shù),早在2000年便已經(jīng)提出,一直到最近隨著Web2.0的網(wǎng)站興起,才再度被大家廣泛地討論。
傳統(tǒng)網(wǎng)頁與AJAX網(wǎng)頁的操作感覺
大家應(yīng)該有過這種經(jīng)驗,使用搜尋引擎找網(wǎng)頁資料時,按照搜尋引擎的分類一個個點進去。舉例而言,以最廣為人使用的Yahoo!奇摩為例,假如想找王建民的選手資料(并非找新聞),從熱門分類找到運動體育這類,點擊后進到下一頁,再點選運動明星、點選棒球,好不容易找到正確的分類,這個分類下有三頁,再一頁頁找尋想找的資料,有興趣的人可以試試看,這樣找竟然還是找不到關(guān)于王建民的介紹。 | |
如左圖所示,我們想搜尋的網(wǎng)頁隱藏在茫茫網(wǎng)海之中,傳統(tǒng)方式須透過點擊、等待畫面、思考、再點擊、等待畫面、再思考…重復(fù)幾個循環(huán)后,還不見得能找到所要的資料。 |
究竟要如何能更快、更直接的找到所需的資料呢?有別于一般入口網(wǎng)站,當(dāng)今最著名的搜尋網(wǎng)站Google http://www.google.com則是提供了強大的搜尋功能,畫面簡單明了,僅讓使用者輸入想查詢的字串,便會找出相關(guān)的資訊。最近Google搜尋加入了「自動補齊字串」的新功能,此即為AJAX的技術(shù)的應(yīng)用之一。我們用一樣的范例透過Google來搜尋。才剛輸入完前兩個字,底下就自動顯示許多搜尋關(guān)鍵字,后面并出現(xiàn)對應(yīng)的搜尋結(jié)果次數(shù)。甚至可以再繼續(xù)增加關(guān)鍵字縮小搜尋結(jié)果的范圍。對使用者而言,可以更快更精準(zhǔn)的找到所需的資料。因此透過AJAX技術(shù)的演進,使用者可以擺脫以往Click and Wait的痛苦經(jīng)驗,取而代之的是「所思即所見」。
如何撰寫AJAX網(wǎng)頁
如同先前所提過的,AJAX技術(shù)是由「Javascript + DHTML + DOM + CSS + XMLHttp + XML」等技術(shù)綜合應(yīng)用而成的,因此,對于這些網(wǎng)頁技術(shù)熟悉的使用者,可以直接用Javascript去撰寫AJAX網(wǎng)頁。再者,若有使用Microsoft Visual Studio 2005的讀者,可利用其Client Script Callback的功能,達到AJAX網(wǎng)頁的功能。但這些功能應(yīng)該是無法滿足所有的需求。
Microsoft在去年推出ASP.NET AJAX,并在今年正式推出1.0版,并在官方網(wǎng)頁提供免費下載??晒┫螺d的元件有兩個,分別是:ASP.NET 2.0 AJAX Extensions 1.0及ASP.NET AJAX Control Toolkit(注:必須先安裝好ASP.NET AJAX1.0,才能夠安裝使用Control Toolkit)。AJAX 1.0內(nèi)有Script Manager幫助使用者撰寫AJAX網(wǎng)頁,而在AJAX Control Toolkit中則提供32個常見的控制項, 有興趣的讀者可自行到Microsoft ASP.NET AJAX官方網(wǎng)頁http://ajax.asp.net/下載使用。
體驗AJAX風(fēng)格的網(wǎng)頁
●Google Maps
http://maps.google.com/
Google地圖服務(wù),使用者利用地圖左上方的拉桿調(diào)整地圖解析度,網(wǎng)頁會即時顯示該解析度之地圖資料。需要移動地圖畫面時,僅需用滑鼠拖拉底圖即可移動。相較于傳統(tǒng)網(wǎng)頁地圖服務(wù),會在地圖四周出現(xiàn)箭頭,往右鍵頭點一下會重新整理畫面,將地圖右移。同樣調(diào)整解析度也需透過重新整理畫面,使用者花費許多時間在等待網(wǎng)頁傳輸。目前Google Maps也已經(jīng)將臺灣地區(qū)的路名、巷道全面更新為中文版,對于不熟悉英文的網(wǎng)友有相當(dāng)大的吸引力。未來搭配上目前越來越多人使用的GPS系統(tǒng),將可以方便各個使用者針對不同的需求,制作自己需要的地圖。
● Amazon Diamond Search
http://www.amazon.com/gp/gsl/search/finder
Amazon購物網(wǎng)站中提供鉆石買家的挑選介面,網(wǎng)頁中提供六種不同的鉆石挑選標(biāo)準(zhǔn),買家可以根據(jù)需求自定標(biāo)準(zhǔn),只要透過項目勾選或是拉動上下限的標(biāo)準(zhǔn)桿,網(wǎng)頁便會及時的呈現(xiàn)根據(jù)此標(biāo)準(zhǔn)下所挑選出符合條件的產(chǎn)品數(shù)目。比起傳統(tǒng)搜尋方式(使用者自行輸入篩選標(biāo)準(zhǔn),點擊搜尋鍵,下一頁才顯示結(jié)果),整個介面十分容易操作,速度更是快很多。
● Web Online Office
除了傳統(tǒng)的Microsoft Office之外,透過AJAX技術(shù)的發(fā)展,目前已可在網(wǎng)頁上做出如Word、 Excel等功能的網(wǎng)頁應(yīng)用程式。以下列出幾個較著名的web online office網(wǎng)站,有興趣的讀者可以自行去試用。
< http://docs.google.com/
< http://www.thinkfree.com/
< http://www.zoho.com/
< http://www.peepel.com/