Ajax基礎入門

1. 什麼是AJAX?
AJAX全稱是非同步JavaScript和XML，是Asynchronous JavaScript and XML的縮寫。AJAX技術用於建立互動式網頁應用的網站開發，至於何為非同步，後文會有解釋。

1.1 傳統型應用程式和Web應用程式
在詳細討論AJAX技術之前，需要Crowdsourced Security Testing道AJAX技術究竟是用來做什麼工作的。目前，編寫應用程式總共有兩種基本類型：
傳統型應用程式 (Desktop Application)
Web應用程式 (Web Application)
傳統型應用程式可以從互連網或者以CD方式獲得，需要運行在案頭電腦上，例如我們常見的一些PC軟體。Web應用程式與之不同，Web應用程式師運行在某處的Web伺服器上的，因此需要通過Web瀏覽器去訪問這樣的應用程式。
不過，比這些應用程式的代碼運行在何處更為重要的是，應用程式如何運轉以及如何與其進行互動。傳統型應用程式一般較快，並且擁有漂亮的使用者介面和非凡的動態性，可以單擊、選擇、開啟菜單和子功能表、到處巡遊，基本不需要等待；另一方面，Web應用程式（比如Amazon.com 和eBay）提供了傳統型程式不能實現的服務。然而，伴隨著Web的強大而出現的是等待，等待伺服器的響應，等待螢幕重新整理，等待請求返回和產生新的介面。
AJAX的出現，就是為了緩解Web應用中與案頭應用相比中的等待這一問題。

1.2 AJAX - 老技術,新面孔
AJAX技術其實不是什麼新技術，而是其他幾種已存在技術的整合。
AJAX應用程式使用到以下基本技術：

使用HTML和CSS來建立Web表單並表示網頁資訊;
使用JavaScript來操作DOM(Document Object Model)來進行動態顯示及互動;
使用XMLHttpRequest對象與Web伺服器進行非同步資料交換;
使用XML進行資料交換及相關操作；
使用JavaScript將所有東西綁定在一起。
我們來進一步分析這些技術的職責。目前我只要熟悉這些組件和技術就可以了。對這些代碼越熟悉，就越容易從對這些技術的零散瞭解轉變到真正把握這些技術（同時也真正開啟了 Web 應用程式開發的大門）。

XMLHttpRequest對象
要瞭解的一個對象可能對您來說也是最陌生的，即 XMLHttpRequest。這是一個 JavaScript 對象，建立該對象很簡單，如清單 1 所示。
清單 1. 建立新的 XMLHttpRequest 對象
代碼如下:
<script language="javascript" type="text/javascript">
<!--
var xmlHttp = new XMLHttpRequest();
// -->
</script>
以後將進一步學習這個對象，現在要知道這是處理所有伺服器通訊的對象。繼續閱讀之前，先停下來想一想：通過 XMLHttpRequest 對象與伺服器進行對話的是 JavaScript 技術。這不是一般的應用程式流程，這恰恰是 Ajax 的強大功能的來源。
在一般的 Web 應用程式中，使用者填寫表單欄位並單擊提交按鈕。然後整個表單發送到伺服器，伺服器將它轉寄給處理表單的指令碼（通常是 PHP 或 Java，也可能是 CGI 進程或者類似的東西），指令碼執行完成後再發送回全新的頁面。該頁面可能是帶有已經填充某些資料的新表單的 HTML，也可能是確認頁面，或者是具有根據原來表單中輸入資料選擇的某些選項的頁面。當然，在伺服器上的指令碼或程式處理和返回新表單時使用者必須等待。螢幕變成一片空白，等到伺服器返回資料後再重新繪製。這就是互動性差的原因，使用者得不到立即反饋，因此感覺不同於傳統型應用程式。
Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web 表單和伺服器之間。當使用者填寫表單時，資料發送給一些 JavaScript 代碼而不是直接發送給伺服器。相反，JavaScript 代碼捕獲表單資料並向伺服器發送請求。同時使用者螢幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript 代碼在幕後發送請求，使用者甚至不知道請求的發出。更好的是，請求是非同步發送的，就是說 JavaScript 代碼（和使用者）不用等待伺服器的響應。因此使用者可以繼續輸入資料、滾動螢幕和使用應用程式。