基本原理

原理很簡單

1. new XHR
2. xhr.onreadystatechange
3. xhr.open(method, url, async)
4. xhr.send()

創建xhr對象

兼容一下ie6，參考司徒正美大大的寫法：

var xhr = new (window.XMLHttpRequest||ActiveXObject)(‘Microsoft.XMLHTTP‘)

XHR創建請求

xhr.open(method, url, async)是創建請求，並接收三個參數：

1. 發送請求的類型，主要是"GET"和"POST"；
2. 請求的url，如果為GET，data參數拼接在url後面，
   如何為POST，xhr.send(data)，並且設置header；

3. async是否異步，默認為true表示異步，false表示同步。

XHR響應請求

onreadychange對象有個readyState屬性，其值有5個

0:未初始化。尚未調用open()方法

1:啟動。已經調用open()方法，但尚未調用send()方法

2:發送。已經調用send()方法，但尚未接收到響應

3:接收。已經接受到部分響應數據

4:完成。已經接受到全部響應數據，並且可以在客戶端使用

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
      var status = xhr.status;
      if (status >= 200 & status < 300 || status === 304) {
          console.log(xhr.responseText)
      }
  }
}
 

發送請求

xhr.send(data)，data的格式為‘param1=value1&param2=value2‘；

需要註意一點，類型為post時，setRequestHeader要放在xhr.open()之後。

小白學AJAX-02-原理