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