AJAX的工作流程如下圖：

?

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

注：

oclick事件：在對象被點擊時發(fā)生

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

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

2.?創(chuàng)建XMLHttpRequest對象

由于瀏覽器版本差異，所以創(chuàng)建時需要做個常規(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() 方法將請求發(fā)送至服務(wù)器

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

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

4.?處理HTTPRequest,創(chuàng)建響應(yīng)并將數(shù)據(jù)暑假返回瀏覽器

• 當請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

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

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

XMLHttpRequest 對象的三個重要的屬性如下：

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

當。 readyState 等于 4 且狀態(tài)為 200 時，表示響應(yīng)已就緒

注：onreadystatechange 事件被觸發(fā) 5 次（0 - 4），對應(yīng)著 readyState 的每個變化

• ?想要獲得服務(wù)器的響應(yīng)，則可以使用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 對象返回的數(shù)據(jù)填充上去。