來撰寫您第一個Ajax程式，使用非同步的方式向伺服端取得文字檔案，並加以顯示，首先請準備一個HTML網頁：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Big5" http-equiv="content-type">
<title>Hello! Ajax! Examples...</title>
<script type="text/javascript" src="HelloAjaxEx-1.js"></script>
</head>
<body>
<center><input value="Ajax請求" onclick="startRequest();" type="button"></center>
</body>
</html>
這個HTML網頁會取得JavaScript檔案，而按下按鈕後，會執行startRequest()函式，JavaScript檔案如下所示：
var xmlHttp;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "HelloAjaxEx-1.txt");
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("伺服端回應：" + xmlHttp.responseText);
}
}
}
在startRequest()中會建立XMLHttpRequest，並發出非同步請求取得HelloAjaxEx-1.txt，在當中只是簡單的文字訊息，注意如果當中要撰寫中文，則文字檔案必須儲存為UTF8，假設HelloAjaxEx1.txt如下撰寫：
這是非同步請求的回應文字
您可以按下
鏈結 來觀看結果。
您可以結合DOM來顯示取得的回應文字，不必使用對話方塊或重清（Refresh）網頁，例如在網頁中設定一個<div>：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Big5" http-equiv="content-type">
<title>Hello! Ajax! Examples...</title>
<script type="text/javascript" src="HelloAjaxEx-2.js"></script>
</head>
<body>
<center>
<input value="Ajax請求" onclick="startRequest();" type="button">
<br>
<div id="response"></div>
</center>
</body>
</html>
而HelloAjaxEx-2.js可以改寫如下：
var xmlHttp;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "HelloAjaxEx-2.txt");
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById("response").innerHTML =
xmlHttp.responseText;
}
}
}
在Ajax應用程式中，如果是Mozilla/Firefox/Safari中，可以透過XMLHttpRequest來發出非同步請求，如果是在IE6 或IE先前版本，則是使用ActiveXObject來發出非同步請求，為了各個不同瀏覽器間的相容性，必須進行測試可取得XMLHttpRequest 或ActiveXObject，例如：
var
xmlHttp;
function
createXMLHttpRequest() {
if
(window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari
}
else
if (window.ActiveXObject) { // 如果可以取得ActiveXObject
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
}
這段程式碼可以滿足大部份的瀏覽器，您可以再進一步檢查是否真正生成了物件，例如：
if(xmlHttp)
{
// do
request
}
else
{
alert("您的瀏覽器不支援這個Ajax程式的功能");
}
在建立XMLHttpRequest之後，則可以使用以下的幾種方法：
- void open(string method, string url, boolean asynch, string username, string
password)
開啟對伺服端的連結；method為請求方式（GET、POST）；url為伺服端位址，如果是GET的話，可加上請求參數與值；asynch為非同步設定，預設是true，表示使用非同步方式。
對伺服端傳送請求，content這以放XML、輸入串流、字串、JSON格式的內容，放進去會放在POST本體中發送。
- void setRequestHeader(string header, string value)
為HTTP請求設定一個給定的 header 設定值。
用來中斷請求。
- string getAllResponseHeaders()
傳回一個字串，其中包含HTTP請求的所有回應標頭。
- string getResponseHeader(string header)
傳回一個字串，其中包含指定的回應標頭值。
XMLHttpRequest包括以下幾個標準屬性：
參考至callback函式，readyState每次改變時，都會呼叫onreadystatechange所參考的函式。
會有0到4的數值，分別表示不同的請求狀態：
0 =
未初始化的連線（uninitialized），還沒呼叫open()
1 = 載入中（loading），呼叫open()，還沒呼叫send()
2 =
已載入（loaded），呼叫send()，請求header/status準備好
3 = 互動中（interactive），正在與伺服器互動中
4 =
請求完成（completed），完成請求
伺服器傳來的請求回應文字，會設定給這個屬性。
伺服器傳來的請求回應如果是XML，會成為DOM設定給這個屬性。
伺服器回應的狀態碼，例如200是OK，404為Not Found…
伺服器回應的狀態文字。
一個基本的Ajax請求可以是以下的片段：
function
startRequest() {
createXMLHttpRequest(); // 建立非同步請求物件
xmlHttp.onreadystatechange = handleStateChange; // 設定callback函式
xmlHttp.open("GET", "simpleResponse.txt"); // 開啟連結
xmlHttp.send(null); // 傳送請求
}
function
handleStateChange() { // 在這邊處理非同步回應
…
}
當每次readyState改變時，都會呼叫以上程式片段中設定的handleStateChange()函式，通常會在請求完成進行處理，所以您可以如以下的程式片段來處理回應：
function
handleStateChange() {
if
(xmlHttp.readyState == 4) { // 測試狀態是否請求完成
if
(xmlHttp.status == 200) { // 如果伺服端回應OK
alert("伺服器回應" + xmlHttp.responseText);
// 這邊只取得回應文字
}
}
}
Ajax這個名詞是由 Jesse James
Garrett 提出，在他發表的 Ajax:
A New Approach to Web Applications 這篇文章中談到 Google Suggest 與 Google Maps 所使用到的技術，是他們在 Adaptive Path 中稱之為Ajax的新方法：
Google Suggest
and Google Maps are two examples of a new approach to web applications that we
at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it
represents a fundamental shift in what’s possible on the Web.
在文中指出，Ajax是Asynchronous JavaScript +
XML的簡稱，這指出了Ajax的核心觀念（Asynchronous）與所使用到的主要兩個技術（JavaScript、XML）。
Asynchronous為非同步，要了解Ajax，必須先了解為何要非同步。
現在許多的應用程式都是在Web上展現，這託了網際網路的普及之福，然而網路當初是Web應用程式繁榮的舞台，現在卻也成了限制Web應用程式發展的因素。
限制的原因來自於網路延遲的不可確定性，網路連線其實是個很耗資源的行為，程式必須序列化、通訊協定溝通、實體路由傳送等動作，這些動作都很耗時間與資源，所有透過網路必需的額外操作，常足以拖慢一個系統，就Web應用程式而言，通常只能透過表單進行資料提交，在同步的情況下，使用者送出表單之後，就只能等待遠端伺服器回應，在這段時間內，使用者無法作進一步的操作。
上圖中陰影部份為送出表單之後，使用者必須等待的時間，瀏覽器預設是使用同步的方式送出請求並等待回應，這也可以想像成存取一個很慢的硬碟，如果這是桌面應用程式，您就可以想像這種等待有多枯燥，人們之所以可以忍受Web應用程式的這種等待，某些原因是因為無從選擇而習慣了。
如果可以把請求與回應改為非同步進行，也就是發出請求後，瀏覽器無需苦等伺服器的回應，而可以讓使用者對瀏覽器中的Web應用程式進行其它的操作，當伺服器終於處理完請求並送出回應，而電腦接收到回應時，再回過頭來呼叫瀏覽器所設定的對應動作進行處理。
現在的問題是，誰來發送非同步請求，事實上有幾種解決方案，在Ajax這個名詞被提出之前，早就有著用IFrame的方式，也就是在HTML頁面中內嵌另一個HTML頁面，由內嵌的頁面來發出請求，而外圍的HTML頁面還是可以繼續讓使用者進行操作，有時候IFrame的解決方式會是簡單的，甚至比較好的。
不過現在談到Ajax，都著重在
XMLHttpRequest
物件，您可以使用JavaScript來建立，其實Firefox、NetScape、Safari、Opera中才叫XMLHttpRequest， Internet
Explorer中是Microsoft.XMLHTTP或Msxml2.XMLHTTP的ActiveX物件，不過IE7中也正名為
XMLHttpRequest。
Ajax應用程式是必須由客戶端、伺服端一同合作的應用程式，JavaScript是用來撰寫Ajax應用程式客戶端的語言，XML則是請求時或回應時，建議使用的交換資料格式，Ajax的客戶端與伺服端基本上是可以獨立開發的，只要協議好溝通的資料格式，伺服端不限於使用何種技術。
发表于 @ 2008年07月09日 22:00:11|评论(loading...)|编辑|收藏