网页的随便拖拉 - AJAX

【江湖普及】网页的随便拖拉 - AJAX

提交者 : Red Sox 于 PAOWANG.COM 北京时间 2005-09-29 15:43:24







首先谢谢35F2还有hufey的工作，让泡网也能跟上潮流RSS一把。

下面讲的web 2.0还有personal portal，都是互联网最近最热的话题，也不知道是真的发展方向还是又一次类似".com"的炒作。每家大公司都在做这个。My MSN, My google, start.com, My Yahoo(就这个不能拖拉)

今天先给大家普及一下这个随便脱来拉去是怎么回事。其实google map早已经用这个了（还在用yahoo map的同学请起立站到队伍后面去），这玩艺叫AJAX，就是阿贾克斯。（还在看足球的同学请起立站到队伍外面去）
____________________________

Web 介面設計新趨勢 - AJAX

嚴格說起來， 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 呈現，在貿然轉移前還是有必要多思考。




--
时间这种东西，你要是不消磨它，它就要消磨你
http://www.ist.cn/
http://www.joyspaces.com
http://www.thinkle.com