Ajax: 一個建立Web應用的新途徑

ajax|web  

如果要問做什麼事是最有吸引力，那就是建立Web應用。畢竟，上次你聽到有人稱讚某產品的互動設計是什麼時候的事了？(除了iPod之外) 它們都很cool, 而且都是很創新的項目。

拋開這些不管，Web設計者們對設計互動Web沒有什麼更好的辦法，卻對我們做案頭軟體的同事投去少許羨慕的目光.傳統型應用程式有豐富的介面以及對於Web程式來說無法比擬的響應能力。同樣，Web的快速發展，在我們所提供的體驗和使用者從傳統型應用程式所得到的體驗間產生巨大的差距

而如今差距正在消失。請看看“Google建議(Google Suggest)”. 觀察它按你的輸入顯示建議條目的更新速度，幾乎是立即更新的。再看看"Google Maps". 放大，用你的滑鼠搬動和滾動。這些動作幾乎是立即響應的，不用等待頁面重新整理。

"Google Suggest"和"Google Maps" 是採用Ajax技術的兩個典型例子。Ajax是Asynchronous JavaScript and XML的簡稱，它表現出一個Web開發上的根本轉變，那就是，Web上可能做些什麼. Ajax的定義

Ajax不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。Ajax包括：

• XHTML和CSS
• 使用文件物件模型(Document Object Model)作動態顯示和互動
• 使用XML和XSLT做資料互動和操作
• 使用XMLHttpRequest進行非同步資料接收
• 使用JavaScript將它們綁定在一起

 

傳統的web應用程式模型工作起來就象這樣：大部分介面上的使用者動作觸發一個串連到Web伺服器的HTTP請求。伺服器完成一些處理---接收資料，處理計算，再訪問其它的資料庫系統，最後返回一個HTML頁面到用戶端。這是一個老套的模式，自採用超文本作為web使用以來，一直都這樣用, 但看過《The Elements of User Experience》的讀者一定知道，是什麼限制了Web介面沒有案頭軟體那麼好用。

 

圖1: 傳統Web應用程式模型(左)與Ajax模型的比較(右).

這種舊的途徑讓我們認識到了許多技術，但它不會產生很好的使用者體驗。當伺服器正在處理自己的事情的時候，使用者在做什嗎？沒錯，等待。每一個動作，使用者都要等待。

很明顯，如果我們按傳統型程式的思維設計Web應用，我們不願意讓使用者總是等待。當介面載入後，為什麼還要讓使用者每次再花一半的時間從服務取資料？實際上，為什麼老是讓使用者看到程式去伺服器取資料呢？ Ajax如何不同凡響

通過在使用者和伺服器之間引入一個Ajax引擎，可以消除Web的開始－停止－開始－停止這樣的互動過程. 它就像增加了一層機制到程式中，使它響應更靈敏，而它的確做到了這一點。

不像載入一個頁面一樣，在會話的開始，瀏覽器載入了一個Ajax引擎---採用JavaScript編寫並且通常在一個隱藏frame中。這個引擎負責繪製使用者介面以及與伺服器端通訊。Ajax引擎允許用非同步方式實現使用者與程式的互動－－不用等待伺服器的通訊。所以使用者再不不用開啟一個空白視窗，看到等待游標不斷的轉，等待伺服器完成後再響應。

 

圖 2: 傳統Web應用的同步互動過程(上)和Ajax應用的非同步互動過程的比較(下).

通常要產生一個HTTP請求的使用者動作現在通過JavaScript調用Ajax引擎來代替. 任何使用者動作的響應不再要求直接傳到伺服器---例如簡單的資料校正，記憶體中的資料編輯，甚至一些頁面導航---引擎自己就可以處理它. 如果引擎需要從伺服器取資料來響應使用者動作---假設它提交需要處理的資料，載入另外的介面代碼，或者接收新的資料---引擎讓這些工作非同步進行，通常使用XML, 不用再擔誤使用者介面的互動。 誰在使用Ajax

在採用Ajax的開發上面，Google做了巨大的投資。去年Google所有主要的產品都用了這項技術---Orkut, Gmail, 以及最近的beta版的Google Groups, Google Suggest和Google Maps---它們全是Ajax的應用。(要想瞭解更多這些Ajax實際的技術細節，請看它們的分析文章:Gmail, Google Suggest, Google Maps). 其它的像：Flickr, 採用許多人們喜歡的Ajax特性，還有Amazon的A9.com搜尋引擎也採用類似的技術。

這些項目證明了Ajax不只是學術上的，也有許多真實世界成功應用。這不是什麼實驗室裡的技術。Ajax的應用可大可小，從非常簡單的，像單一功能的Google Suggest到非常複雜的Google Maps.