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

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

下面是 Ajax 應用程式所用到的基本技術：
• HTML 用於建立 Web 表單並確定應用程式其他部分使用的欄位。
• JavaScript 代碼是運行 Ajax 應用程式的核心代碼，協助改進與伺服器應用程式的通訊。
• DHTML 或 Dynamic HTML，用於動態更新表單。我們將使用 div、span 和其他動態超文字標記語言 元素來標記 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 對象

 

Code
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. 發送請求。

Code
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 屬性中。

響應函數：

Code
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，從而實現在用戶端無重新整理的修改資料。