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

學習目的:理解 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