AJAX的工作流程如下圖：

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

注：

oclick事件：在對(duì)象被點(diǎn)擊時(shí)發(fā)生

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

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

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

由于瀏覽器版本差異，所以創(chuàng)建時(shí)需要做個(gè)常規(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 對(duì)象的 open() 和 send() 方法將請(qǐng)求發(fā)送至服務(wù)器

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

注：注意請(qǐng)求的格式，具體格式如下

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

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

每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。

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

XMLHttpRequest 對(duì)象的三個(gè)重要的屬性如下：

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

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

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

•  想要獲得服務(wù)器的響應(yīng)，則可以使用XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

例子：

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

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

js通過(guò)id獲取表單的一部分區(qū)域，將XMLHttpRequest 對(duì)象返回的數(shù)據(jù)填充上去。