| Ajax 和 XML: 借鑒最優秀的 Ajax 應用程式 通過最優秀的 Web 2.0 應用程式學習改進使用者體驗 |
|
層級： 初級
Jack D Herrington (jherr@pobox.com), 進階軟體工程師, Leverage Software Inc.
2007 年 5 月 21 日 跟隨本文一起遊覽 Web 2.0 世界中的一些頂尖的 Asynchronous JavaScript + XML (Ajax) 應用程式。探索這些應用程式在使用者層面上獲得成功的秘決，發現各種技巧並著手開發自己的 Web 2.0 應用程式，創造令人興奮的使用者體驗。
這篇文章著眼於一些最優秀的新一代 Web 應用程式，向大家展示了從中能學到什麼 —— 模仿最優秀的應用程式是引以自豪的傳統。我相信這些網站不會介意的， 畢竟模仿是最誠摯的敬佩。
|
然而，我沒有把技術層面的問題放在首位。因為這些網站的技術問題 —— 資料如何在 Ajax 中傳遞，固然重要，但是並不是某個網站賴以成功的關鍵因素。應該要重點考慮網站是如何使用瀏覽器的 Ajax 特性結合動態超文字標記語言 （Dynamic HTML，DHTML ）建立傑出的使用者體驗的，以及網站是如何與它們的使用者社區進行互動的。我將探究所有這些因素，它們和技術一樣在網站獲得成功的過程中發揮著重要作用。
Google 地圖
如果 “最具影響力的 Web 2.0 應用程式” 設有奧斯卡獎或者金球獎，那麼得獎者非 Google 地圖 莫屬。我清晰地記得我的一些同事第一次看到 Google 地圖時的反應：瀏覽器竟然可以完成這些任務。 在我的印象中，Google 地圖重新定義了使用者對瀏覽器中的應用程式的期許，引領了一場 Web 2.0 的運動。
我不太確定這篇文章的讀者是否曾經使用過 Google 地圖，但不管怎樣我還是在 圖 1 中展示一下這個網站。
圖 1. Google 地圖的最新版
瀏覽地圖的操作很簡單，只需點擊和拖拽地圖即可，就像是在紙制地圖中操作一樣。 如果您要尋找路線，則它們會以線條的形式出現在地圖中，螢幕不會閃爍、地圖也不會移動（除非需要這樣做）。 實際上，Google 地圖大部分功能的實現都不需要重新與伺服器互動以擷取一個新的 HTML 頁面。
Google 地圖誕生之後，Ajax 和 Dynamic HTML這幾個詞語永久地刻入了第二次 Web 革命的語言中。但是最讓人興奮地是，嚴格來講 Google 地圖並不是運行在 Ajax 之上（如果把 Ajax 定義為使用 XMLHTTP 對象發送和接收請求）。Google 地圖動態地使用產生的 <script> 標記與伺服器來回傳遞資料。提前定義 XMLHTTP 對象是一個技巧。
但是 Google 地圖為什麼不使用 Ajax 呢。 我不能代表 Google 的工程師發言，但是我感覺 Google 地圖的設計構想來自於 JavaScript 的 “mashup 能力”。
Mashup
在文章開頭，我談到了對使用者社區的支援。我承認，這有點兒官腔，但我認為這很重要。Mashup 是支援使用者社區的根本。 mashup 的意思就是把某個網站的功能與另一個網站的功能合并到一起，然後建立出更加有趣的一些東西。Mashup 的一個很好的例子就是從 Craigslist 擷取房屋出租列表並使用 Google 地圖反映其位置的網站。
MapMyRun.com 是Google 地圖 mashup 的另一個例子，它使用 Google 地圖讓賽跑者（或者任何其他人）能計算出地圖上各路線的距離。圖 2 顯示這個功能。
圖 2. Map My Run 介面
此處，我在左窗格的輸入欄位中輸入起點。然後使用滑鼠指定跑步的經過點。當我單擊滑鼠時，左窗格立刻動態地更新顯示出距離。我可以放大地圖獲得更詳細的內容或者切換到衛星模式（如果路線超過了視圖）。
所有繁重的地圖繪製工作都是由 Google 地圖完成的。MapMyRun 網站只是在地圖的表層添加了一些 JavaScript 代碼，用於處理滑鼠點擊和計算距離。
|
TaDaList
Google 地圖為 Web 2.0 應用程式設定了很高的門檻。但是可以使用 Ajax 在應用程式中快速添加大量的數值。TaDaList 就是這種數值的一個例子。TaDaList 是一個非常簡單並且免費的 to-do 列表管理程式。為了示範這個網站，我建立了一個帳戶和遊泳列表，用來提醒我繼續完成遊泳訓練的各種事項。列表如 圖3 所示。
圖 3. 遊泳列表
如果我想要添加購買護目鏡的事件，便可以在文字欄位中填寫該事件然後單擊 Add to list。該項內容立刻被添加到列表中相應的位置，而不需要重新整理頁面，顯示介面如 圖 4 所示。
圖 4. 添加 “Buy New Goggles” 之後
這看上去沒什麼打不了的，而且使用 Ajax 實現這個功能也不難，但是終端使用者卻會感到這像是從傳統型應用程式得到的結果。
為了示範，我使用 Rails 花了幾分鐘時間編寫了一個簡化版的 TaDaList 應用程式。to-do 項的列表如 圖 5 所示。
圖 5. to-do 項的列表
然後鍵入 Buy earplugs 並單擊 Add。該項內容出現列表中，並且而不需要重新整理頁面，顯示介面如 圖 6 所示。
圖 6. 添加 “Buy earplugs” 之後
為了實現這個功能，我建立了一個小型的資料庫用來儲存 to-do 項。然後再建立一個 Rails 控制器，如 清單 1 所示。
清單 1. Todo_controller.rb
class TodoController < ApplicationController def list @tasks = Todo.find(:all) end def add task = Todo.new task.name = params[:task][:name] task.save @tasks = Todo.find(:all) endend |
清單 1 中的代碼使用了兩個方法。list() 方法用於顯示頁面。add() 方法用於在列表中添加新的項目，然後再在 HTML 中返回列表。
list() 方法的 RHTML 如 清單 2所示。
清單 2. List.rhtml
<html><head><%= javascript_include_tag :defaults %></head><body><div id="results"><% @tasks.each { |t| %><%= t.name %><br/><% } %></div><%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %><%= text_field :task, :name %><%= submit_tag 'Add' %><%= end_form_tag %></body></html> |
這個頁面使用 form_remote_tag 把簡單表單的內容提交到控制器中的 add() 方法。add() 方法把 to-do 項添加到表中，然後為得到的 <div> 標記返回新的內容。這一功能的代碼如 清單 3所示。
清單 3. Add.rhtml
<% @tasks.each { |t| %><%= t.name %><br/><% } %> |
那麼，我可以從 TaDaLists 中學到些什麼呢。 第一，少許 Ajax 應用程式會花大力氣使 Web 應用程式感覺更像是傳統型應用程式。第二，選擇使用 Web 架構 —— 特別是那些包含 Ajax 的架構 —— 可以使這種類型的工作相當簡單。
|
Campfire
Campfire 是 TaDaLists 的同伴，它們都是由相同的工作群組開發的(37signals)。在本例中，應用程式將會類比一個虛擬 campfire 網站，它託管一個線上聊天室，使遠程團隊可以相互聊天，並方便地傳送檔案。
我設定了一個試用帳號，並進行了聊天和上傳檔案的操作。結果如 圖 7 所示。
圖 7. 為遠程團隊設計的虛擬 campfire
顯示介面的左側是一個簡單的聊天視窗，在這個視窗中使用者可以隨時提交新的訊息。介面的右側顯示了線上使用者，還有一個地區用於上傳檔案。
檔案的上傳是就地完成的，適用JavaScript 代碼來監控檔案上傳過程。這意味著，我們可以在會話的同時添加檔案和映像，而不會因為要移到另一個不同的頁面而離開會話視窗。
第二，一些通常會造成頁面重新整理的操作，如上傳一個檔案，都得到了處理，從而不再需要載入頁面。這可以使使用者的注意力保持在當前的任務上，並且加強了傳統型應用程式的感覺。
|
YourMinis
如果說一些網站少量地使用了 Web 2.0，那麼 YourMinis 則恰恰相反，它足以成為 Web 上的小組件/小工具網站。使用它，我們可以建立和定製載有各種小組件（或者是小工具，如果您更喜歡微軟的行業用語）的頁面。頁面的功能相當於控制板，它能以引人注意的方式及時地提供資訊。
圖 8 中顯示了在頁面中添加一個 Rottentomatoes 電影小組件後的網站。
圖 8. 顯示電影評論的 YourMinis
Rottentomatoes 是一個電影評論網站。它依據數百個電影評論為電影給定一個總分並提供了一個百分比。分數等於或者高於 60% 的電影被認為是 新鮮的（也就是好的意思）。在本例中，我選擇查看 Bridge To Terebithia，只需提供我的郵遞區號便可以馬上在同一個組件中獲得該電影分數。圖 9 顯示了這個功能。
圖 9. 顯示本地電影分數的電影小組件
介面乾淨、開啟快速，並且在流行的瀏覽器上運行良好。同時這些小組件可以放置在各種不同的位置 —— 比如說，網站建立者的部落格中。
他們鼓勵開發人員站在使用者社區的角度思考，為整個使用者社區貢獻自己的頁面設計。這是與使用者社區協作的另一種表現形式，它將使使用者社區能以我們從未想到過的方式推進網站的發展。
如果單擊某個映像，那麼整個頁面會變暗，同時一個方框出現在頁面中間，顯示放大後的所選圖片。圖 11 顯示這個功能。
圖 11. 單擊映像後 lightbox 出現
這種技術具有很多優勢。它可以把使用者的注意力從頁面的其他地區到轉移選擇的圖片。因為使用者可以單擊 Close 返回正常的瀏覽頁面，因此這種技術可以為使用者顯示很多詳細內容而又不必離開當前頁面。
一些開源的 JavaScript 庫可用於開發 lightbox。上圖所顯示的是 Lightbox JS version 2。
|
其他 Web 2.0 網站
在撰寫這篇文章時，我訪問了大量的 Web 2.0 網站。大多數網站都沒有應用上述技巧 —— 儘管本文所有的技巧都值得應用。Google 有一些尤為出色的內容。Google 文檔 和試算表 （ Spreadsheets ） 示範了在瀏覽器中使用 WYSIWYG 編輯可以完成哪些任務。Google 閱讀器 示範了如果應用 RSS feed 並提供了一個解決方案使使用者在任何地方都能夠查看新聞。Google 電子郵件 使用了 Ajax、JavaScript、DHTML 和 Google 地圖。
另一個應用領域就是 Google 表格處理軟體可以移動訪問。他們所有的服務都有簡潔版，可以在電話和其他小型設定中良好地運行。使用一個 Googel 帳號，您可以在 Web 上定製自己的首頁，同時還可以為行動電話定製一個首頁。
Google 並不是惟一使用 Ajax 創造驚人之舉的。Meebo 就是一個出色的例子。它是一個託管的聊天應用程式，運行於 Ajax 之上，並且擁有一個簡單但雅緻的介面。Kiko 是一個日曆應用程式，它很巧妙地利用了 DHTML 來編輯日曆，並使用 Ajax 補救伺服器中的約會、聯絡方法和相關資訊。
|
結束語
這篇文章中出現的所有網站都值得我們學習和借鑒。尤其是可以從中學到一些非常有用的技巧。所有這些網站共同的特點就是尊重結合 HTML 和 JavaScript 代碼的威力。近來，編程界常有關於 JavaScript 代碼的負面訊息。我認為這是不公平的，因為就我所聽到的大多數缺點而言，與其說是 JavaScript 語言自身的問題，倒不如說是瀏覽器與文件物件模型（Document Object Model，DOM）之間的相容性問題。很顯然，如果想要開發一個出色的 Web 2.0 應用程式，就應該把 JavaScript 作為一門程式設計語言使用，並且應當給予它應有的尊重。業內的頂尖企業無一不照此行事。
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
