誰(shuí)在使用Ajax
有許多商業(yè)性網(wǎng)站已經(jīng)使用Ajax技術(shù)來改進(jìn)其用戶體驗(yàn)。這些網(wǎng)站和傳統(tǒng)的產(chǎn)品手冊(cè)式的網(wǎng)站相比，更像是一個(gè)Web應(yīng)用，因?yàn)樗辉賰H用來顯示信息，而是通過訪問它來實(shí)現(xiàn)一個(gè)特定的目標(biāo)。下面就是一些知名的、運(yùn)轉(zhuǎn)良好的、使用Ajax的Web應(yīng)用程序。
1.6.1 Google Suggest
當(dāng)開發(fā)人員討論Ajax時(shí)，引用的第一個(gè)例子往往是Google Suggest（www.google.com/webhp? complete=1），其界面是Google主界面的一個(gè)簡(jiǎn)單克隆，有一個(gè)突出的文本框用來輸入搜索關(guān)鍵字。當(dāng)你在這個(gè)文本框中輸入內(nèi)容時(shí)，所有可能相匹配的內(nèi)容都將顯示出來。當(dāng)你輸入時(shí)，Google Suggest會(huì)從服務(wù)器上獲取一些提示，以下拉列表的形式將你可能感興趣的搜索關(guān)鍵字都顯示出來。而且對(duì)于顯示出的每個(gè)提示都將列出可能匹配的結(jié)果總數(shù)，以幫助你做出選擇（參見圖1-2）。
圖 1-2
這個(gè)簡(jiǎn)單的客戶端—服務(wù)器交互的功能很強(qiáng)大、有效，并且不會(huì)讓用戶感到厭煩。其界面所能做出的反應(yīng)超出了原來對(duì)于一個(gè)Web應(yīng)用程序的認(rèn)識(shí)和預(yù)期；不管你輸入有多快它都將做出相應(yīng)的更新，就像桌面軟件中的自動(dòng)填充功能一樣，可以通過上下箭頭來在提示列表中選擇任何一項(xiàng)。盡管它仍然還是beta版，不過可以肯定這個(gè)方法將會(huì)應(yīng)用于Google的主頁(yè)面上。
1.6.2 Gmail
Google的免費(fèi)電子郵件服務(wù)Gmail已被當(dāng)作Ajax時(shí)代客戶端—服務(wù)器交互的奇跡而廣為宣傳。當(dāng)你第一次登錄Gamil時(shí)，應(yīng)用程序所使用的某一個(gè)iframe將會(huì)載入用戶界面引擎，以后所有與服務(wù)器交互的請(qǐng)求都將由這個(gè)用戶界面引擎通過XMLHttp對(duì)象來完成。往返傳輸?shù)臄?shù)據(jù)將是JavaScript代碼，瀏覽器下載之后能夠快速執(zhí)行。這些請(qǐng)求作為對(duì)用戶界面引擎的指令，指示需要在屏幕上更新的內(nèi)容。
另外，Gmail應(yīng)用程序使用幾個(gè)幀和iframe來管理和緩存較大的用戶界面變化。如果用幀，要使Gmail能夠正確地應(yīng)對(duì)后退和前進(jìn)按鈕是一件極其復(fù)雜的事，這也是使用幀（或iframe）或結(jié)合XMLHttp的好處之一。
Gmail最大的勝利在于其可用性。如圖1-3所示的用戶界面相當(dāng)簡(jiǎn)單、毫不雜亂，與用戶之間的交互和與服務(wù)器之間的通信都顯得自然、無縫。Google再次使用Ajax來對(duì)原本簡(jiǎn)單的概念進(jìn)行改進(jìn)，提供了一種特殊的用戶體驗(yàn)。
圖 1-3
1.6.3 Google Maps
Google最后一個(gè)引領(lǐng)潮流的Ajax Web應(yīng)用程序是Google Maps（http://maps.google. com）。為了與原來已經(jīng)地位穩(wěn)固的地圖應(yīng)用網(wǎng)站競(jìng)爭(zhēng)，Google Maps通過Ajax徹底避免了對(duì)主頁(yè)面的重載（參見圖1-4）。
圖 1-4
與其他地圖應(yīng)用網(wǎng)站不同，Google Maps可以讓你朝不同方向拖動(dòng)地圖。對(duì)于JavaScript開發(fā)人員而言，這些實(shí)現(xiàn)拖動(dòng)效果的代碼并沒有什么新東西，不過，地圖的分塊拼接和看似無限制的滾動(dòng)效果則另當(dāng)別論。地圖被分解成一組圖像，它們組合在一起就構(gòu)成了連續(xù)的圖像。用來顯示地圖的圖像數(shù)量是有限的，如果每次用戶移動(dòng)地圖時(shí)創(chuàng)建新的圖像，那很快就會(huì)造成內(nèi)存問題。因此，應(yīng)將同樣的圖像反復(fù)用于顯示地圖的不同片段。
客戶端—服務(wù)器通信將通過一個(gè)隱藏的iframe來完成。只要你搜索或請(qǐng)求一個(gè)新的方向，該信息將在該iframe中提交并接收響應(yīng)。返回的數(shù)據(jù)將以XML格式表示，并傳給一個(gè)JavaScript函數(shù)（Ajax引擎）來處理。接著，這個(gè)XML將以不同的方式來使用：一些用來調(diào)用正確的地圖圖像，一些使用XSLT轉(zhuǎn)換成HTML并顯示在主窗體上。其結(jié)果就是展示出了一個(gè)前景光明的、復(fù)雜的Ajax應(yīng)用程序。
1.6.4 A9
Amazon.com是世界著名的在線商城，幾乎銷售所有商品。當(dāng)其發(fā)布搜索引擎時(shí)，并未引起太大聲勢(shì)和注意。A9（www.a9.com）的引入中顯示了大大增強(qiáng)的搜索能力，它允許你同時(shí)搜索不同類型的信息。它通過Google來搜索網(wǎng)站和圖像，還可以在Amazon.com上搜索圖書，在IMDb（因特網(wǎng)電影數(shù)據(jù)庫(kù)）上搜索電影。而且還可以搜索在2005年中期發(fā)布的Answers.com以及黃頁(yè)和維基百科（Wikipedia）的內(nèi)容。
讓A9與眾不同的是其用戶界面的工作方式。當(dāng)你執(zhí)行一個(gè)搜索時(shí)，不同類型的結(jié)果將顯示在頁(yè)面上的不同區(qū)域中（參見圖1-5）。
在搜索結(jié)果頁(yè)面中，你可以使用同一個(gè)條件執(zhí)行其他搜索。當(dāng)選中與要搜索的類型相應(yīng)的復(fù)選框時(shí)，搜索將通過組合隱藏幀技術(shù)和XMLHttp在后臺(tái)執(zhí)行。用戶界面將為額外的搜索結(jié)果騰出位置，一旦從服務(wù)器接收到搜索結(jié)果就將其載入到頁(yè)面中。結(jié)果是一個(gè)響應(yīng)迅速的搜索結(jié)果頁(yè)面，在你想搜索不同類型信息時(shí)，該頁(yè)面根本無需重新載入。
圖 1-5
1.6.5 Yahoo!News
網(wǎng)站Yahoo!News（http://news.yahoo.com）也在2005年引入了新的設(shè)計(jì)。新設(shè)計(jì)最主要的特性是一個(gè)令人感興趣的功能增強(qiáng)：當(dāng)你將鼠標(biāo)移到一個(gè)特定的標(biāo)題上時(shí)，將會(huì)彈出一個(gè)小方框，里面顯示出消息的摘要，而且可能還包括一個(gè)相關(guān)的圖片（參見圖1-6）。
圖 1-6
圖片和摘要信息是使用XMLHttp從服務(wù)器上獲得的，然后動(dòng)態(tài)地插入到頁(yè)面上。這是一個(gè)展示Ajax如何用于增強(qiáng)Web頁(yè)面的絕佳例子。Yahoo!News網(wǎng)站并沒有將Ajax作為最主要的使用模型，當(dāng)瀏覽器沒有Ajax支持時(shí)仍然是可用的；Ajax函數(shù)只是用來在有瀏覽器支持時(shí)增強(qiáng)用戶體驗(yàn)的及時(shí)響應(yīng)性。在其之下的是語(yǔ)義正確的HTML頁(yè)面，甚至在不支持CSS的瀏覽器上也能夠做出合乎邏輯的布局。
1.6.6 Bitflux Blog
Bitflux Blog（http://blog.bitflux.ch/）是另外一個(gè)將Ajax只用于功能增強(qiáng)的好例子，它的主要特性是一個(gè)稱為L(zhǎng)iveSearch的技術(shù)。LiveSearch和網(wǎng)站上的搜索框協(xié)同工作。當(dāng)你在搜索框中輸入信息時(shí)，一組可能的搜索結(jié)果就會(huì)立即顯示在搜索框下面（參見圖1-7）。
圖 1-7
這些搜索結(jié)果是通過XMLHttp獲取的，并以HTML字符串返回，然后插入到頁(yè)面中。同樣你也可以采用原來的方式來完成搜索：在文本框中輸入文字，然后按回車。LiveSearch的Ajax功能只是為了增加整個(gè)網(wǎng)站的功能，但并非所有的搜索都必須使用它。
