Tutorial for AJAX

Asynchronous JavaScript + XML（Ajax）無疑是 2006 年最熱門的技術術語，且有望在 2007 得到進一步發展。但是對您的應用程式來說它究竟有什麼意義呢？Ajax 應用程式中哪一種常見架構模式應用最廣泛呢？本文將介紹五種常見 Ajax 設計模式，可以使用它們作為工作的基礎。

的確，Ajax 是 Web 2.0 熱門術語，所有人都希望將其應用於自己的站點。但是它對我們究竟有什麼意義？工程師該如何在架構的層面上將其集成到自己的站點中？在這篇文章中，我將介紹 Ajax 的基本知識，並展示一些已經成為 Web 2.0 開發最佳實踐的 Ajax 設計模式。

首先，Ajax 僅僅是一個涉及一組技術的術語，包括 Dynamic HTML（DHTML）和 XMLHTTPRequest 對象。DHTML 由三個元素組合而成，它們分別是超文本標記語言（Hypertext Markup Language，HTML）、JavaScript 代碼和級聯樣式表（Cascading Style Sheet，CSS）。在 Web 頁面使用 JavaScript 代碼，可以動態地改變頁面，包括添加、刪除或更改頁面內容。這就是 DHTML 的動態 部分。JavaScript 代碼使用 XMLHTTPRequest 物件在載入頁面後向伺服器請求資料。

這兩種元素的組合 —— 從伺服器動態請求資料然後使用這些資料更改頁面 —— 就是 Ajax 的本質，也是 Web 2.0 站點的動態特性。

在一般的 Web 應用程式中，用戶填寫表單字段並單擊 Submit 按鈕。然後整個表單發送到伺服器，伺服器將它轉發給處理表單的腳本（通常是 PHP 或 Java，也可能是 CGI 進程或者類似的東西），腳本執行完成後再發送回全新的頁面。該頁面可能是帶有已經填充某些資料的新表單的 HTML，也可能是確認頁面，或者是具有根據原來表單中輸入資料選擇的某些選項的頁面。當然，在伺服器上的腳本或程式處理和返回新表單時用戶必須等待。屏幕變成一片空白，等到伺服器返回資料後再重新繪製。這就是交互性差的原因，用戶得不到立即回饋，因此感覺不同于桌面應用程式。

Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 物件放在 Web 表單和伺服器之間。當用戶填寫表單時，資料發送給一些 JavaScript 代碼而不是直接發送給伺服器。

接著, JavaScript 代碼捕獲表單數據並向伺服器發送請求。同時用戶螢幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript 代碼在幕後發送請求，用戶甚至不知道請求的發出。
更好的是，請求是非同步發送的，就是說 JavaScript 代碼（和用戶）不用等待伺服器的回應。因此用戶可以繼續輸入資料、滾動螢幕和使用應用程式。

然後，伺服器 將資料返回 JavaScript 代碼（仍然在 Web 表單中），後者決定如何處理這些資料。它可以迅速更新表單數據，讓人感覺應用程式是立即完成的，表單沒有提交或刷新而用戶得到了新資料。 JavaScript 代碼甚至可以對收到的資料執行某種計算，再發送另一個請求，完全不需要用戶干預！這就是 XMLHttpRequest 的強大之處。它可以根據需要自行與伺服器進行交互，用戶甚至可以完全不知道幕後發生的一切。結果就是類似于桌面應用程式的動態、快速回應、高交互性的體驗，但是背後又擁有互聯網的全部強大力量。



(JavaScript 入門)
http://web.nchu.edu.tw/~jlu/classes/www/examples/javascript/javascript.html



(JAVASCRIPT 線上教學)
http://wellsli.com/htm/js/index.htm



(AJAX 入門)
http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml



(AJAX 上手篇)
http://wiki.moztw.org/index.php/AJAX_上手篇


(Ajax)
https://developer.mozilla.org/en/AJAX



(AJAX 上手篇, 英文版)
https://developer.mozilla.org/en/AJAX/Getting_Started



(Using XMLHttpRequest)
https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest



(jQuery Ajax)
http://webdesign.piipo.com/jquery/jquery_ajax


(AJAX 教學大合集)
http://chiahu.com/blog/?p=220


(42 Recent AJAX Tutorials)
http://www.maxkiesler.com/2006/07/04/42-recent-ajax-tutorials/


(AJAX 上手篇)
http://wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87


(Ajax內部交流文檔)
http://www.dragonson.com/doc/ajax.html


(非常重要的參考來源: Ajax 技術資源中心)
http://www-128.ibm.com/developerworks/cn/xml/ajax/


(非常重要的參考來源: Ajax 資源中心, IBM/中國)
http://www.ibm.com/developerworks/cn/ajax/newto.html?S_TACT=105AGX52&S_CMP=content#N102BF


(非常重要的參考來源: 掌握 Ajax 系列, IBM/中國)
http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/


AJAX深度歷險1(Getting Started)
http://blog.xuite.net/jameschih/ ... mp;p=1&w=262779


Ajax內部交流文檔
http://www.dragonson.com/doc/ajax.html


Ajax 技術資源中心
http://www-128.ibm.com/developerworks/cn/xml/ajax/


AJAX - Asynchronous Javascript And Xml
http://www.xul.fr/en-xml-ajax.html


(AJAX - Asynchronous javascript And Xml)

http://www.xul.fr/en-xml-ajax.html
http://www.maxkiesler.com/2006/07/04/42-recent-ajax-tutorials/


================================================
AJAX 算是一種技術，技術攙雜愈多只會讓網頁愈來愈複雜。
入門是瞭解 AJAX 的運作原理用，事實上，在開發時，建議挑選一種 AJAX framework (用 google 搜一下)開發。
這類 AJAX framework 大都幫你做好跨 browser 工作，否則自己寫可能要寫死。