誰在使用Ajax

有許多商業(yè)性網站已經使用Ajax技術來改進其用戶體驗。這些網站和傳統(tǒng)的產品手冊式的網站相比，更像是一個Web應用，因為它不再僅用來顯示信息，而是通過訪問它來實現(xiàn)一個特定的目標。下面就是一些知名的、運轉良好的、使用Ajax的Web應用程序。

1.6.1 Google Suggest

當開發(fā)人員討論Ajax時，引用的第一個例子往往是Google Suggest（www.google.com/webhp? complete=1），其界面是Google主界面的一個簡單克隆，有一個突出的文本框用來輸入搜索關鍵字。當你在這個文本框中輸入內容時，所有可能相匹配的內容都將顯示出來。當你輸入時，Google Suggest會從服務器上獲取一些提示，以下拉列表的形式將你可能感興趣的搜索關鍵字都顯示出來。而且對于顯示出的每個提示都將列出可能匹配的結果總數，以幫助你做出選擇（參見圖1-2）。

圖 1-2

這個簡單的客戶端—服務器交互的功能很強大、有效，并且不會讓用戶感到厭煩。其界面所能做出的反應超出了原來對于一個Web應用程序的認識和預期；不管你輸入有多快它都將做出相應的更新，就像桌面軟件中的自動填充功能一樣，可以通過上下箭頭來在提示列表中選擇任何一項。盡管它仍然還是beta版，不過可以肯定這個方法將會應用于Google的主頁面上。

1.6.2 Gmail

Google的免費電子郵件服務Gmail已被當作Ajax時代客戶端—服務器交互的奇跡而廣為宣傳。當你第一次登錄Gamil時，應用程序所使用的某一個iframe將會載入用戶界面引擎，以后所有與服務器交互的請求都將由這個用戶界面引擎通過XMLHttp對象來完成。往返傳輸的數據將是JavaScript代碼，瀏覽器下載之后能夠快速執(zhí)行。這些請求作為對用戶界面引擎的指令，指示需要在屏幕上更新的內容。

另外，Gmail應用程序使用幾個幀和iframe來管理和緩存較大的用戶界面變化。如果用幀，要使Gmail能夠正確地應對后退和前進按鈕是一件極其復雜的事，這也是使用幀（或iframe）或結合XMLHttp的好處之一。

Gmail最大的勝利在于其可用性。如圖1-3所示的用戶界面相當簡單、毫不雜亂，與用戶之間的交互和與服務器之間的通信都顯得自然、無縫。Google再次使用Ajax來對原本簡單的概念進行改進，提供了一種特殊的用戶體驗。

圖 1-3

1.6.3 Google Maps

Google最后一個引領潮流的Ajax Web應用程序是Google Maps（http://maps.google. com）。為了與原來已經地位穩(wěn)固的地圖應用網站競爭，Google Maps通過Ajax徹底避免了對主頁面的重載（參見圖1-4）。

圖 1-4

與其他地圖應用網站不同，Google Maps可以讓你朝不同方向拖動地圖。對于JavaScript開發(fā)人員而言，這些實現(xiàn)拖動效果的代碼并沒有什么新東西，不過，地圖的分塊拼接和看似無限制的滾動效果則另當別論。地圖被分解成一組圖像，它們組合在一起就構成了連續(xù)的圖像。用來顯示地圖的圖像數量是有限的，如果每次用戶移動地圖時創(chuàng)建新的圖像，那很快就會造成內存問題。因此，應將同樣的圖像反復用于顯示地圖的不同片段。

客戶端—服務器通信將通過一個隱藏的iframe來完成。只要你搜索或請求一個新的方向，該信息將在該iframe中提交并接收響應。返回的數據將以XML格式表示，并傳給一個JavaScript函數（Ajax引擎）來處理。接著，這個XML將以不同的方式來使用：一些用來調用正確的地圖圖像，一些使用XSLT轉換成HTML并顯示在主窗體上。其結果就是展示出了一個前景光明的、復雜的Ajax應用程序。

1.6.4 A9

Amazon.com是世界著名的在線商城，幾乎銷售所有商品。當其發(fā)布搜索引擎時，并未引起太大聲勢和注意。A9（www.a9.com）的引入中顯示了大大增強的搜索能力，它允許你同時搜索不同類型的信息。它通過Google來搜索網站和圖像，還可以在Amazon.com上搜索圖書，在IMDb（因特網電影數據庫）上搜索電影。而且還可以搜索在2005年中期發(fā)布的Answers.com以及黃頁和維基百科（Wikipedia）的內容。

讓A9與眾不同的是其用戶界面的工作方式。當你執(zhí)行一個搜索時，不同類型的結果將顯示在頁面上的不同區(qū)域中（參見圖1-5）。

在搜索結果頁面中，你可以使用同一個條件執(zhí)行其他搜索。當選中與要搜索的類型相應的復選框時，搜索將通過組合隱藏幀技術和XMLHttp在后臺執(zhí)行。用戶界面將為額外的搜索結果騰出位置，一旦從服務器接收到搜索結果就將其載入到頁面中。結果是一個響應迅速的搜索結果頁面，在你想搜索不同類型信息時，該頁面根本無需重新載入。

圖 1-5

1.6.5 Yahoo!News

網站Yahoo!News（http://news.yahoo.com）也在2005年引入了新的設計。新設計最主要的特性是一個令人感興趣的功能增強：當你將鼠標移到一個特定的標題上時，將會彈出一個小方框，里面顯示出消息的摘要，而且可能還包括一個相關的圖片（參見圖1-6）。

圖 1-6

圖片和摘要信息是使用XMLHttp從服務器上獲得的，然后動態(tài)地插入到頁面上。這是一個展示Ajax如何用于增強Web頁面的絕佳例子。Yahoo!News網站并沒有將Ajax作為最主要的使用模型，當瀏覽器沒有Ajax支持時仍然是可用的；Ajax函數只是用來在有瀏覽器支持時增強用戶體驗的及時響應性。在其之下的是語義正確的HTML頁面，甚至在不支持CSS的瀏覽器上也能夠做出合乎邏輯的布局。

1.6.6 Bitflux Blog

Bitflux Blog（http://blog./）是另外一個將Ajax只用于功能增強的好例子，它的主要特性是一個稱為LiveSearch的技術。LiveSearch和網站上的搜索框協(xié)同工作。當你在搜索框中輸入信息時，一組可能的搜索結果就會立即顯示在搜索框下面（參見圖1-7）。

圖 1-7

這些搜索結果是通過XMLHttp獲取的，并以HTML字符串返回，然后插入到頁面中。同樣你也可以采用原來的方式來完成搜索：在文本框中輸入文字，然后按回車。LiveSearch的Ajax功能只是為了增加整個網站的功能，但并非所有的搜索都必須使用它。