汉博园-严海锋的blog-web 介面設計新趨勢 - ajax

Web 介面設計新趨勢 - AJAX
Google一编好文章。
嚴格說起來，AJAX 並不是什麼新鮮的技術，而且也不複雜高深，但是自從 AJAX 這個名子出來之後，以及 Google 幾個 Killer 級的服務應用 AJAX，使得 AJAX 好像在突然間大鳴大放，每個網站都想要開始採用類似的技術，但是 AJAX 真的有這麼好嗎？在瞭解 AJAX 之前先來看幾個成功的例子：
實例介紹
Google Map
Google Map 是應用 AJAX 技術最成功的例子，只要一提起 AJAX，一定也會舉 Google Map 做範例。底下是 Google Map 的 UI，如果你有用過一定很熟悉：

你可以直接在 Google Map 的網頁上拖拉縮放整面地圖，地圖細節則會慢慢顯示出來，就好像在你自己的電腦上使用 papago 等軟體一樣，這就是 Google Map 最引人津津樂道的 UI 設計，但是他怎麼做到的？
Google Suggest

Google Suggest 則是另外一個例子，當你在搜尋欄位中輸入關鍵字時，這時候網頁會蹦出幾個 suggestion 讓你選擇，每個 suggestion 後面還有該關鍵字的搜尋筆數，我們都知道，Google 不可能在你一登入網頁時就預先存取好這些資料，因為這些資料量太大了，如果預先存取，你光登入 Google Suggest 首頁就要十幾分鐘，那它是怎麼做到的？
GMail
GMail 也是一個例子，在你登入你的 Gmail Account 之後，你所看到的信件選單，信件內容等都是在同一個網頁中顯示，不論你怎麼選擇你都不會做換頁，它是怎麼做到的？

還有編輯信件時，拼字檢查是怎麼做到的？

Technorati Search Beta
Technorati search 除了 search blog 文章外，現在也多了搜尋 flickr 圖片以及 furl 和 del.icio.us 的功能，算是半個 meta-search engine 吧，而且這些搜尋的結果都是在同一個頁面中顯示出來，最快顯示出來的資料當然是他自己 index 的 blog 文章，但當你在瀏覽結果時，網頁的右手邊也沒閒著，正在幫你查詢 flickr, furl, del.lcio.us 的結果呢！它是怎麼做到的呢？

這些問題的答案就是 AJAX。
傳統網頁流程的設計都是 Web Page -> CGI -> Web Page (Response) 的順序，這之間整個頁面都要經過重載，而且 CGI 在處理時是需要時間的，所以使用者在這段時間中需要等待，但是這樣的作法跟我們使用一般桌面應用軟體的習慣不同，在多數的應用軟體中，即使是需要等待處理的程序，也會先把處理完的結果先顯示出來，但是在傳統的網頁流程設計中，這是很難達到的。傳統的網頁流程設計是 synchronous 的，而 AJAX 是 Asynchronous，這就是為什麼 AJAX 的全名是： Asynchronous JavaScript And XML ( Synchronous / Asynchronous 的概念就好像是寫 network socket 程式時，synchronous / asynchronous IO，或是 blocking / none-blocking IO 的概念類似)。
AJAX 並不是新的技術，早在這個名詞出來以前，此類的技術就已經被廣泛運用了，後來由Adaptive Path 這家公司取了 AJAX 這個名詞來代表此類的技術。所以在這家公司的網站上可以找到一篇由 Jesse James Garrett 所寫的Ajax: A New Approach to Web Applications 文章，可以幫助大家瞭解 AJAX 的定義以及技術層次的問題，這篇文章部分也被Jacky‘s blog 翻譯成中文。其實說穿了，AJAX 就是運用 Javascript 在背景偷偷幫你去跟伺服器要資料，最後再由 Javascript 或 DOM 來幫你呈現結果，因為所有動作都是由 Javascript 代勞，所以省去了網頁重載的麻煩，使用者也感受不到等待的痛苦，讓使用 Web Service 更像是在操作桌面軟體。
但是， AJAX 真的那麼實用嗎？網路上也有不少 blog 在批評 AJAX：
Ajax: 99% Bad
嘟嘟老窝‘s AJAX的七宗罪
這篇文章講得很好，說中了 AJAX 的麻煩所在。
Ajax：剩下什麼呢？
AJAX 存在的目的跟 Flash 有點雷同，都是要改進 Web UI 的呈現方式，但是既然不同於傳統的 WebUI 呈現，便會出現一些不相容性，例如不利於搜尋引擎做 index，以及造成一個沒有 history 及 backforward 的網頁瀏覽，這都不一定是使用者想要的，並不是所有的網頁都適合使用 AJAX 技術來改進 UI 呈現，在貿然轉移前還是有必要多思考。
其他 AJAX Demo
Spell Check
Upload progress bar
這個 demo 可說是最能顯示出 AJAX 強大的 Demo 了，很有趣，一定要看看。
Google Instant
這個 meta-search engine 會由 Javascript 在背景去 google 搜尋你的關鍵字，所以也不需要經過頁面重載。
Rico 的 AJAX Implementation 的 Demo
一定要玩看看他的Weather Widget。

其他相關網站
AJAX 相關 Open sourceAJAX Framework
Rico
其他
AJAX Matters
XMLHttpRequest, Ajax, and the customer experience
Where can you find Flickr and Apple in the same room? At the AJAX Summit of course. An insider report from the press-free zone where the future of webdev is being mapped out.
Ruby on Rails
a
_xyz