Ajax學習（1）---Ajax 入門簡介

Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫.

下面是 Ajax 應用程序所用到的基本技術：
• HTML 用於建立 Web 表單並確定應用程序其他部分使用的字段。
• JavaScript 代碼是運行 Ajax 應用程序的核心代碼，幫助改進與服務器應用程序的通信。
• DHTML 或 Dynamic HTML，用於動態更新表單。我們將使用 div、span 和其他動態 HTML 元素來標記 HTML。
• 文檔對象模型 DOM 用於（通過 JavaScript 代碼）處理 HTML 結構和（某些情況下）服務器返回的 XML。

從上面可以看出,Ajax不是什麼新的技術,而是幾個老的技術通過新的方法結合起來,從而實現了新的效果!很多事物都是多元化的,可以說Ajax是一個新技術，也可以說Ajax是一個新的思路，一個新的架構！

Ajax的基本工作原理及流程：

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

Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web 表單和服務器之間。當用戶填寫表單時，數據發送給一些 JavaScript 代碼而不是 直接發送給服務器。相反，JavaScript 代碼捕獲表單數據並向服務器發送請求。同時用戶屏幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript 代碼在幕後發送請求，用戶甚至不知道請求的發出。更好的是，請求是異步發送的，就是說 JavaScript 代碼（和用戶）不用等待服務器的響應。因此用戶可以繼續輸入數據、滾動屏幕和使用應用程序。

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

XMLHttpRequest 對象：

open()：建立到服務器的新請求。

send()：向服務器發送請求.

abort()：退出當前請求。

readyState：提供當前 HTML 的就緒狀態。

responseText：服務器返回的請求響應文本。

由於前兩年的瀏覽器大戰，使得各種瀏覽器獲得 XMLHttpRequest 對象採用的方法有所不同。

支持多種瀏覽器的方式創建 XMLHttpRequest 對象


var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

這段代碼的核心分爲三步：
1. 建立一個變量 xmlHttp 來引用即將創建的 XMLHttpRequest 對象。
2. 嘗試在 Microsoft 瀏覽器中創建該對象：
嘗試使用 Msxml2.XMLHTTP 對象創建它。
如果失敗，再嘗試 Microsoft.XMLHTTP 對象。
3. 如果仍然沒有建立 xmlHttp，則以非 Microsoft 的方式創建該對象。
最後，xmlHttp 應該引用一個有效的 XMLHttpRequest 對象，無論運行什麼樣的瀏覽器。

Ajax中的請求/響應

發出請求：Ajax 應用程序中基本相同的流程：
1. 從 Web 表單中獲取需要的數據。
2. 建立要連接的 URL。
3. 打開到服務器的連接。
4. 設置服務器在完成後要運行的函數。
5. 發送請求。

function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.aspx?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}

處理響應：

readyState可能返回的值：

0：請求未初始化（還沒有調用 open()）。

1：請求已經建立，但是還沒有發送（還沒有調用 send()）。

2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。

3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。

4：響應已完成；您可以獲取並使用服務器的響應了。

必須知道兩點：

1.什麼也不要做，直到 xmlHttp.readyState 屬性的值等於 4。

2.服務器將把響應填充到 xmlHttp.responseText 屬性中。


響應函數：

function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}





開始的代碼使用基本 JavaScript 代碼獲取幾個表單字段的值。然後設置一個 asp 腳本作爲鏈接的目標。要注意腳本 URL 的指定方式，city 和 state（來自表單）使用簡單的 GET 參數附加在 URL 之後。

然後打開一個連接，這是您第一次看到使用 XMLHttpRequest。其中指定了連接方法（GET）和要連接的 URL。最後一個參數如果設爲 true，那麼將請求一個異步連接（這就是 Ajax 的由來）。如果使用 false，那麼代碼發出請求後將等待服務器返回的響應。如果設爲 true，當服務器在後臺處理請求的時候用戶仍然可以使用表單（甚至調用其他 JavaScript 方法）。

xmlHttp（要記住，這是 XMLHttpRequest 對象實例）的 onreadystatechange 屬性可以告訴服務器在運行完成 後（可能要用五分鐘或者五個小時）做什麼。因爲代碼沒有等待服務器，必須讓服務器知道怎麼做以便您能作出響應。在這個示例中，如果服務器處理完了請求，一個特殊的名爲 updatePage() 的方法將被觸發。

最後，使用值 null 調用 send()。因爲已經在請求 URL 中添加了要發送給服務器的數據（city 和 state），所以請求中不需要發送任何數據。這樣就發出了請求，服務器按照您的要求工作。

簡單總結的Ajax的工作流程：

javascript獲得要向服務器段傳遞的參數或變量，然後利用創建的XMLHttpRequest 對象發送個服務器段，如果服務器端接受數據並返回數據，則保存在responseText 屬性中，最後通過javascript修改DOM，從而實現在客戶端無刷新的修改數據。

參考資料：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html