首頁
中文書目錄
原文書目錄
 站內快速搜尋
資源中心
Book Series
Special Interest













■好消息,歐萊禮書籍已重新鋪貨至各大書局及網路書店,歡迎讀者選購       ■歡迎各院校採用歐萊禮書籍,學校團購請洽校園服務團隊

[書籍導讀]

AJAX 駭客八十招—80 Tips & Tools for Creating Responsive Web Sites
一段關於 Ajax 的豐富之旅,讓你的網路應用程式脫胎換骨!

[A] Think in Ajax

你已經發覺目前的 AmazonGoogle 家族的 Google SuggestGoogle Maps 等網站,在與使用者互動的方式及程式的行為上,有根本性的差異嗎?

你覺得多數網路應用程式在 Client/Server 的溝通上,維持著 synchronous 的 request/response 模式是必然的嗎?

是什麼讓 Google MapsYahoo! Maps 網站,比起過去傳統的地圖查詢服務用起來既自然、而且快很多很多?

是的,是 Ajax!許多網站都已經以下一代的網路應用程式模型在開發,你呢?讓 Ajax Hacks 告訴你怎麼做吧!

Ajax,即 Asynchronous JavaScript And XML,2005 年新創的術語,描述了一個新的網路應用程式模型,由一組熱門網路技術所組成。Ajax 迅速在軟體世界裡引起旋風,但若僅把這個軟體模型看作是一件「吹縐一池春水,隨即消失在虛空裡」的"大事",絕對是個錯誤。為什麼?
  1. 首先,Ajax 是一種撰寫網路應用程式的新思維,打破傳統 synchronous 的 request/response 模式。在 Client/Server 連接時,能不打斷使用者的操作,動態地更新網頁內不同區塊內的元素,而不需整個網頁的更新。
  2. 其次,Ajax 技術家族是由多項成熟的技術交織而成,包括 HTML、JavaScript、XML、DOM、CSS 等。這些技術在這訊瞬息萬變的Web世界中,已通過一波波考驗,且根深蒂固,屹立不搖。
  3. 第三,Ajax 技術家族已是眾所周知,許多技術團隊提供的新資源、新工具正如雨後春筍般地冒出,且為 Open Source,試試這些技術,並沒有任何障礙。
  4. 第四,許多有用,著名的應用程式都是 Ajax-based,如 Yahoo! MapsFlickr 等。

[B] Ajax的技術特點

[1] 先來看看網路應用程式與桌上應用程式的區別:

  • 桌上應用程式:在單機上執行,不需依靠與 Server 的互動,具有快速、及時的優點,但缺乏 Server 端提供的資訊與支援。
  • 網路應用程式:應用程式涵蓋 Server 端與 Client 端,需與 Server 互動,多數情況下, Client 端與 Server 端保持著 synchronous 的request/response(wait/refresh)運作模式,具有等待、「整個」頁面不斷更新的缺點,但具有 Server 端提供的資訊與支援。
多數開發者可能想過,難道無法讓 Client 端與 Server 端適度地各行其事,同時又保持必要的合作關係,進而改進程式效率與操作經驗?Ajax 的主要意圖,就在於消弭網路應用程式與桌上應用程式間的落差,同時兼顧兩者的優點。如果,你試過 Google Suggestion(很簡明的例子),應該會驚訝於該網頁在你輸入部分字詞時,就已經聰明地、即時地(幾乎)更新了頁面上的資訊(更新的資料是來自 Server 端,且不是整個頁面更新)——Client 端已經在幕後悄悄地與 Server 端溝通過了!

[2] 這是怎麼辦到的?

  1. 傳統的網路應用程式透過使用者觸發 request,接著,Server 接受、處理 request 後,再回傳 response(整個頁面);Ajax 應用程式則在 Client 端加上一層 Ajax Engine(以 JavaScript 寫成),藉以與 Server 端溝通。
  2. Ajax Engine 可讓使用者與 Server 端作 Asynchronous 互動。使用者發出的 request 由 Ajax Engine 代為處理,Ajax Engine 只在有需要時,才向 Server 端發出 request,而使用者能同時進行網頁的其他部分;同理,來自 Server 端的 response,也由 Ajax Engine 代為處理,再動態地反應到頁面上。

如圖 1 所示:

圖 1:Ajax 應用程式的 Asynchronous 運作模式


[3] 簡言之,Ajax 具有下列的技術特點:

  1. 以 Ajax Engine(Client-Side Engine)作為 UI 與 Server 端之間的中介層
  2. User event 呼叫 Ajax Engine,Server 回應給 Ajax Engine
  3. 部分頁面元素更新」代替「點擊、等待、整個頁面更新」。
  4. Asynchronous 的溝通模式」代替「Synchronous 的 request/response 的溝通模式」
  5. Ajax Engine 亦可獨立地與 Server 端溝通,無需 user event 的觸發(例如定期地發出 request)。
[註]
  1. 當然,Ajax 是一種網路應用程式模型,實際上 Ajax Engine 的角色並非一定由 JavaScript 來實作,其他方案亦可:Java、Flash、VBScript(例如 GoogleSuggest 在 IE上)等
  2. 資料交換也不限於 XML 或純文字,只要 Sever 端與 Engine 能溝通,其他如 JSON 等,事實上 Google Map 用了許多 GIF 格式。

[C] 本書內容

  • 本書從最基礎的 Ajax 觀念與實作、Ajax 支援軟體的使用、一直到專家級的技巧運用,讓讀者能逐步、有效率地深入 Ajax。
  • 共有 80 個關於 Ajax 的實用技巧和想法(Hack),各 Hack 的說明都相當仔細,可供你改寫,運用到自己的應用程式中
  • 介紹許多很棒的 Ajax 支援軟體,如 DWR(Direct Web Remoting), Prototype,Rico,Ruby on Rails,以及 script.aculo.us,讓你更容易、更深入地運用 Ajax,希望你能爐火純青。
《Ajax Hacks》是由7位不同的貢獻者而成,當中許多位是 Ajax 技術創新者以及先期採用者,提供了部份的 Ajax Open Source 工具,並付予 Ajax 今日所享有的榮景。本書不僅蒐邏了許多實用的技巧,更包含了許多對 Ajax 開發者實務上的建議。

許多 Hack 是關於一些具原創性且巧妙的探索性主題,例如,運用演算法及 Flash 物件,模擬出瀏覽器歷程列表,及離線儲存和 Ajax 有關的資料、設定 Apache 組態以修正 XMLHttpRequest 跨網域(cross-domain)的限制、在你的瀏覽器裡跑一個搜索引擎等等。

某些 Hack 說明了一些酷炫的網路控制項(web control)及嵌入式 script(embedded script),例如,從頭開始自動完成欄位填寫的 script,創造沒有大小限制的 JavaScript bookmarklets,以及為 Ajax 應用程式建立一個 RSS Feed 讀取器。這些 Hack 將 Ajax 技術發揮得淋灕盡致,讓我們更接近新一代網路應用模型的尖端。

[D] 本書章節說明

全書共分九章,由下列主題組成,摘錄如下,供讀者參考︰

第一章 Ajax 基礎

Ajax 是什麼?本章從一組構成 Ajax 的著名技術開始,並介紹了 Ajax 最核心的 JavaScript 物件——XMLHttpRequest,及其特性和方法。例如,傳送 GET、 POST、與 HEAD 請求、以及接收純文字,XML 和 JSON 形式的資料。這一章也會說明,在 Ajax 應用程式中以動態 script 操作 CSS!

第二章 網頁表單

在 Ajax 世界裡,網頁表單當然已經有所改變。如本章 Hack 所示,應用程式以 XMLHttpRequest 物件在幕後從伺服端取得的資料,提交表單,及建構 select list、checkbox group 等表單元素。因為頁面不必由伺服器回應而重建,使用者幾乎沒有感到程式延遲。

第三章 驗證

Ajax 應用程式能藉由提交前驗證信用卡號碼、郵遞區號等使用者所填寫資料的格式,大大減少對伺服器的請求。當然,在真實世界中,伺服器元件還是必須對信用卡號碼做最後的驗證;Ajax 應用程式能實作出「第一層防護」。

第四章 web 開發者的強力 Hack

Web 開發者從未有比 Yahoo! 及 Google web API 更酷的合作工具。這一章包含了聯合使用 Google Maps,Yahoo! Maps,及 Yahoo! driving directions 的 Ajax 應用程式。也特別說明了一些乏味、但實用的 web Hack。例如,發送電子郵件;以客戶端 script 觀看、建立、及傳送 HTTP Cookie;在沒有改變網頁下,動態取得郵遞區號,以及找到並展示瀏覽器的區域化資訊。

第五章 Direct Web Remoting(DWR)

DWR 是一個很棒的工具箱,讓開發者不必使用任何 applet 或 plug-ins,就能由 JavaScript 對 Java 伺服端物件做遠端呼叫。DWR 在幕後使用 Ajax 請求,且無需工具箱的使用者去處理 XMLHttpRequest 相關的程式碼。

第六章 以 Prototype 及 Rico 程式庫駕馭 Ajax

本章的 Hack 使用 Prototype,一個很酷的 JavaScript 程式庫,它擁有自己的 Ajax 工具集。你將明白怎樣使用 Prototype 的 Ajax.Updater 物件,以伺服端的資料更新網頁裡的 DOM 元素,以及如何使用 PeriodicalExecuter 物件,於特定時間間隔裡,執行 Ajax 請求。本章的另一個 Hack,使用 Rico JavaScript 程式庫,建立了一個支援拖曳功能的網路書店。

第七章 使用 Ajax 與 Ruby on Rails

立基於 Model-View-Controller 設計樣式,Ruby on Rails(RoR)於 2005 年推出,是一個有效率且設計良好的網路應用程式框架。本章從一個幫你執行 RoR 的簡單 Hack 開始,前進到幾個 RoR Ajax 工具的說明。每個 Hack 都是以 Ruby 語言寫成的。RoR 打包了 Prototype,將 Ajax 物件的設立,包進自己的嵌入式 script 語言中。準備好讀許多的 Ruby 程式碼了嗎?

第八章 品嚐 script.aculo.us JavaScript 程式庫

script.aculo.us 是另一個建立在 Prototype 上的 JavaScript 程式庫。為開發者提供了許多有用的效果(effect)與控制項(control)。例如,有個 Hack 建立了蘋果 Mac OS X 式的登錄對話框,對無效的登錄資料,此對話框會產生「振動」的效果;一個基於 script.aculo.us 物件的自動填值欄位;一個控制項,允許使用者,在瀏覽器裡編輯文字內容,然後,不需經過整個網頁往返,就能將資料儲存到伺服端上。

第九章 選擇性項目與效率提升

這一章的 Hack 為現實世界裡的 Ajax 開發者提供了一些很好的啟發。例如,怎樣在瀏覽器裡跑一個搜尋引擎、用 JavaScript 快取資料、以及在 Ajax 應用程式中,以內部儲存及擷取狀態的方式,修正瀏覽器的後退鈕功能。這些 Hack 也對結合撰碼程式庫增加下載速度、模糊化(obfuscate)或部分模糊化 JavaScript 程式碼,以保護程式碼所有權、設立一個定時器中止某個 Ajax 請 求、以及使用 HTML script 標籤,動態請求 JSON(JavaScript Object Notation)型式的資料等技巧提出建議。

[E] 如何使用本書

由於 Ajax 是「Old technology, new tricks」,學習的方式較不限於按部就班、步步為艱地「學」,如你所知,它的基礎知識都不是新的,重在觀念的啟發與實做的例子。

作者建議:「你可以從頭到尾讀,但是大體而言,每個 Hack 都是獨立存在,因此,你可以隨意瀏覽,並且直接跳到你最感興趣的各個章節」。

但就同為讀者的立場而言,筆者建議:你可以完完整整讀過第一章,建立堅實的基礎,之後再將每章(第二到九章)的前二到三個 Hack 讀過,之後,如果有需要,就可以跳到任何想深入的章節。另外,書中的相互參照也會引導你到適當的 Hack。

另外,有需要的讀者,亦可花一點點時間,先看看參考中所列的幾篇文章,對觀念的引進與本書的閱讀也相當有幫助喔!

閱讀本書時,你可能因此激發出許多想法。循著本書,打開電腦,準備做幾個實驗吧!這是一段關於 Ajax 的豐富之旅,讓你的網路應用程式脫胎換骨吧!

[參考文章]

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro2/

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro3/

http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro4/

這是 Brett McLaughlin 所寫一系列「Master Ajax」的好文章。Brett 是 O'Reilly 出版的好書 — Head Rush Ajax 的作者



楊仁和
06/01/2006

| 首頁 | 聯絡我們 |
© 2009, O'Reilly Media, Inc. Taiwan Branch