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