ajax請求的五個步驟

創建XMLHttpRequest非同步對象

var xhr = new XMLHttpRequest()

設置回調函數

xhr.onreadystatechange = callback

使用open方法與伺服器建立連接

// get 方式
xhr.open("get", "test.php", true)

// post 方式發送數據 需要設置請求頭
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

向伺服器發送數據

// get 不需要傳遞參數
xhr.send(null)

// post 需要傳遞參數
xhr.send("name=jay&age=18")

在回調函數中針對不同的響應狀態進行處理

function callback() {
  // 判斷非同步對象的狀態
  if(xhr.readyState == 4) {
    // 判斷交互是否成功
    if(xhr.status == 200) {
      // 獲取伺服器響應的數據
      var res = xhr.responseText
      // 解析數據
      res = JSON.parse(res)
    }
  }
}