AJAX的工作流程如下圖：

?

#1. 發(fā)生某個事件：一般為oclick事件、onchange事件、onkeyup事件等

註：

#oclick事件：在物件被點擊時發(fā)生

onchange事件：在網(wǎng)域的內(nèi)容改變時發(fā)生

onkeyup事件：在鍵盤按鍵被放開時發(fā)生

2.?建立XMLHttpRequest物件

由於瀏覽器版本差異，所以建立時需要做一個常規(guī)判斷，具體程式碼如下

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

#3.?發(fā)送HttpRequest

使用XMLHttpRequest 物件的open() 和send() 方法將請求傳送至伺服器

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

註：注意請求的格式，具體格式如下

4.?處理HTTPRequest,建立回應並將資料暑假回傳瀏覽器

• 當請求被傳送到伺服器時，我們需要執(zhí)行一些基於回應的任務。

每當 readyState 改變時，就會觸發(fā) onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態(tài)資訊。

XMLHttpRequest 物件的三個重要的屬性如下：

在onreadystatechange 事件中，我們規(guī)定當伺服器回應已做好被處理的準備時所執(zhí)行的任務。

當。 readyState 等於4?? 且狀態(tài)為200 時，表示回應已就緒

註：onreadystatechange 事件被觸發(fā)5 次（0 - 4），對應readyState 的每個變更

• ?想要取得伺服器的回應，則可以使用XMLHttpRequest 物件的responseText 或responseXML 屬性。

範例：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

5.?使用js處理被傳回的數(shù)據(jù)，更新頁面

js透過id取得表單的一部分區(qū)域，將XMLHttpRequest 物件傳回的資料填入上去。