1.XMLHttpRequest物件

XMLHttpRequest是Ajax開發的基礎，它提供客戶端與伺服器端進行非同步通訊的功能。一方面它向伺服器提交一個請求，獲取頁面的內容；另一方面將資料通過JavaScript傳送到伺服器端後，按預期的方式對資料進行處理，結合XML和CSS，做出各種應用程式。

2.利用XMLHttpRequest物件構建Ajax應用

利用 XMLHttpRequest物件，每次構建Ajax應用遵循步驟

  1. 建立XHR物件

  2.建立Ajax請求

 3.傳送Ajax請求

 4.處理伺服器響應

3.建立XMLHttpRequest物件

   XMLHttpRequest物件的建立方式和不同的瀏覽器相關

  var xmlhttp;

 try{

      xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');

}catch(e){

   try{

     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

   }catch(e){

      try{

           xmlhttp = new XMLHttpRequest()

      }catch(){}

   }

}

這樣就用指令碼實現了跨瀏覽器的相容性

4.使用open方法建立一個請求

Open(method, url , asynchronous,user,password)

引數的含義：

  method：指定請求的型別，一般為get和post

  url：指定請求的地址，可以使用絕對路徑或相對地址，可以附帶傳參

  asynchronous：可選引數，標識請求是同步還是非同步，非同步請求為true，同步請求為false，預設請求為true

  user：可選引數，指定請求的使用者名稱，沒有則省略

  password：可選引數指定請求的密碼，沒有則省略

5.使用send的方法傳送一個請求

   send(body)   該方法僅有一個body引數，指要想向伺服器傳送的資料，其格式為查詢字串格式、

  如果用post請求必須在send的之前設定HTTP頭資訊

 xmlhttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）

 使用onreadystatechange實現捕獲請求的狀態變化

在傳送請求後往往不知道請求的什麼時候完成，利用事件機制捕獲請求的狀態

  在呼叫open 與send的方法都會觸發onreadystatechange事件

  使用readyState屬性判斷請求的狀態

   0：表示物件已經建立，但還沒有初始化

   1:當呼叫open方法後，redyState=1，表示XMLHttpRequest物件已經被初始化 

   2：當呼叫send方法後，XHR在向伺服器傳送請求的這段時間內readyState=2

   3：當呼叫send方法，伺服器成功接收到所有請求後，readyState=3

   4：表示已經成功接收到來自伺服器的相應資料

 使用status屬性判斷HTTP相應程式碼

200:請求成功

202：請求被接受，但處理未完成

400：錯誤請求

404：請求資源為找到

500：伺服器內部錯誤

<script type="text/javascript">

function checkname(){

//ajax校驗使用者名稱

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState==4){

document.getElementById('result').innerHTML = xhr.responseText;

}

}

//獲得輸入的使用者名稱，並傳遞個伺服器端

var username = document.getElementById('username').value;

//對ming變數的特殊符號資訊進行編碼

username = encodeURIComponent(username);

xhr.open('get','./04.php?nm='+ming+'&age=23', true);

//xhr.open第三個引數預設非同步請求為true, 改成同步請求為false;

xhr.send(null);

}

</script>