Ajax 簡介

Ajax 由 HTML、JavaScript™ 技術、DHTML 和 DOM 組成，這一傑出的方法可以將笨拙的 Web 介面轉化成互動性的 Ajax 應用程式。它是一種構建網站的強大方法。

Ajax 嘗試建立桌面應用程式的功能和互動性，與不斷更新的 Web
應用程式之間的橋樑。可以使用像桌面應用程式中常見的動態使用者介面和漂亮的控制元件，不過是在 Web 應用程式中。

Ajax 應用程式所用到的基本技術：

1. HTML 用於建立 Web 表單並確定應用程式其他部分使用的欄位。 • JavaScript 程式碼是執行 Ajax
2. 應用程式的核心程式碼，幫助改進與伺服器應用程式的通訊。 • DHTML 或 Dynamic HTML，用於動態更新表單。我們將使用
3. div、span 和其他動態 HTML 元素來標記 HTML。 • 文件物件模型 DOM 用於（通過 JavaScript 程式碼）處理
4. HTML 結構和（某些情況下）伺服器返回的 XML。

Ajax 的定義

Ajax= Asynchronous JavaScript and XML（以及 DHTML 等）Asynchronous非同步JS和XML。

XMLHttpRequest這是一個 JavaScript 物件; 是處理所有伺服器通訊的物件,建立該物件很簡單，如清單 1 所示。

清單 1. 建立新的 XMLHttpRequest 物件

<script
 
 language="javascript" type="text/javascript">
    var xmlHttp = new XMLHttpRequest();
</script>

通過 XMLHttpRequest 物件與伺服器進行對話的是 JavaScript 技術。這不是一般的應用程式流，這恰恰是 Ajax的強大功能的來源。

Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 物件放在 Web 表單和伺服器之間。

得到 XMLHttpRequest 的控制代碼後，使用 JavaScript 程式碼完成以下任務：

1. 獲取表單資料：JavaScript 程式碼很容易從 HTML 表單中抽取資料併發送到伺服器。
2. 修改表單上的資料：更新表單也很簡單，從設定欄位值到迅速替換影象。
3. 解析 HTML 和 XML：使用 JavaScript 程式碼操縱 DOM（請參閱 下一節），處理 HTML 表單伺服器返回的 XML資料的結構。

對於前兩點，需要非常熟悉 getElementById() 方法，如 清單 2 所示。

清單 2. 用 JavaScript 程式碼捕獲和設定欄位值

//捕獲欄位值:
// 獲得欄位"phone"的值並用其建立一個變數phone
var phone = document.getElementById("phone").value;
//設定欄位值:
// 從response的陣列中獲得值並將其寫到標籤中
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

DOM的功能

當需要在 JavaScript 程式碼和伺服器之間傳遞 XML 和改變 HTML 表單的時候，我們再深入研究 DOM。

獲取 Request 物件

XMLHttpRequest 是 Ajax 應用程式的核心.

var xmlhttp;
if (window.XMLHttpRequest)
  {// 從 IE7+, Firefox, Chrome, Opera, Safari 中獲得XMLHttpRequest物件
  xmlhttp=new XMLHttpRequest();
  }
else
  {//從 IE6, IE5 中獲得XMLHttpRequest物件
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

清單 4. 以支援多種瀏覽器的方式建立 XMLHttpRequest 物件

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

這段程式碼的核心分為三步：

1. 建立一個變數 xmlHttp 來引用即將建立的 XMLHttpRequest 物件。
2. 嘗試在 Microsoft 瀏覽器中建立該物件：
   1）嘗試使用 Msxml2.XMLHTTP 物件建立它。
   2）如果失敗，再嘗試 Microsoft.XMLHTTP 物件。
3. 如果仍然沒有建立 xmlHttp，則以非 Microsoft 的方式建立該物件。 最後，xmlHttp 應該引用一個有效的XMLHttpRequest 物件，無論執行什麼樣的瀏覽器。

Ajax 的請求/響應

與伺服器上的 Web 應用程式打交道的是 JavaScript 技術，而不是直接提交給那個應用程式的 HTML 表單。
發出請求
如何使用XMLHttpRequest 物件?
首先–需要一個能夠呼叫JavaScript 方法 的Web 頁面 。
接下來就是在所有 Ajax 應用程式中基本都雷同的流程：

1、從 Web 表單中獲取需要的資料。
2、建立要連線的 URL。
3、開啟到伺服器的連線。
4、設定伺服器在完成後要執行的函式。
5、傳送請求。

清單 5 中的示例 Ajax 方法就是按照這個順序組織的：

清單 5. 發出 Ajax 請求

function callServer() {
  // 獲得city和state的值
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // 當它們的值任一個不存在的時候結束JS
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // 建立連線的URL物件
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // 開啟一個連線伺服器的連線
  xmlHttp.open("GET", url, true);

  // 設定一個方法,當請求返回的時候呼叫這個方法
  xmlHttp.onreadystatechange = updatePage;
  //xmlhttp.onreadystatechange=function()
  //{
  //    if (xmlhttp.readyState==4 && xmlhttp.status==200)
  //    {
  //   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  //    }
  //}

  // 發生連結
  xmlHttp.send(null);
}

開始的程式碼使用基本 JavaScript 程式碼獲取幾個表單欄位的值。 然後設定一個 PHP 指令碼作為連結的目標。 要注意指令碼 URL
的指定方式，city 和 state（來自表單）使用簡單的 GET 引數附加在 URL 之後。 最後一個引數如果設為
true，那麼將請求一個非同步連線（這就是 Ajax 的由來）。 如果使用 false，那麼程式碼發出請求後將等待伺服器返回的響應。
如果設為 true，當伺服器在後臺處理請求的時候使用者仍然可以使用表單（甚至呼叫其他 JavaScript 方法）。
onreadystatechange
屬性可以告訴伺服器在執行完成後做什麼。因為程式碼沒有等待伺服器，必須讓伺服器知道怎麼做以便您能作出響應。
在這個示例中，如果伺服器處理完了請求，一個特殊的名為 updatePage() 的方法將被觸發。
最後，使用值 null 呼叫send()。因為已經在請求 URL 中添加了要傳送給伺服器的資料（city 和state），所以請求中不需要傳送任何資料。這樣就發出了請求，伺服器按照您的要求工作。

處理響應

1.什麼也不要做，直到 xmlHttp.readyState 屬性的值等於 4。
2.伺服器將把響應填充到 xmlHttp.responseText 屬性中。

其中的第一點，即就緒狀態;
第二點，使用 xmlHttp.responseText 屬性獲得伺服器的響應,清單 6中的示例方法可供伺服器根據 清單 5 中傳送的資料呼叫。

清單 6. 處理伺服器響應

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

它等待伺服器呼叫，如果是就緒狀態，則使用伺服器返回的值（這裡是使用者輸入的城市和州的 ZIP 編碼）設定另一個表單欄位的值。
一旦伺服器返回 ZIP 編碼，updatePage() 方法就用城市/州的 ZIP 編碼設定那個欄位的值，使用者就可以改寫該值。這樣做有兩個原因：

保持例子簡單，說明有時候可能希望使用者能夠修改伺服器返回的資料。

要記住這兩點，它們對於好的使用者介面設計來說很重要。

連線 Web 表單

一個 JavaScript 方法捕捉使用者輸入表單的資訊並將其傳送到伺服器，另一個 JavaScript 方法監聽和處理響應，並在響應返回時設定欄位的值。所有這些實際上都依賴於呼叫 第一個 JavaScript 方法，它啟動了整個過程。
利用 JavaScript 技術更新表單。

清單 7. 啟動一個 Ajax 過程

<form>
    <p>City: <input type="text" name="city" id="city" size="25" 
           onChange="callServer();" /></p>
    <p>State: <input type="text" name="state" id="state" size="25" 
           onChange="callServer();" /></p>
    <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

當用戶在 city 或 state 欄位中輸入新的值時，callServer() 方法就被觸發，於是 Ajax 開始運行了。

結束語

在下一期文章中，您將掌握:

XMLHttpRequest 物件
學會如何處理 JavaScript 和伺服器的通訊
如何使用 HTML 表單以及如何獲得 DOM 控制代碼。