AJAX請求的五個步驟

感謝原文作者：0x29a
原文鏈接：https://www.cnblogs.com/0x29a/p/11231950.html

1. 創建XMLHttpRequest異步對象

步驟一代碼引自：https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }

圖片引自：https://www.cnblogs.com/hyj0608/p/6726852.html?utm_source=itdadao&utm_medium=referral

主流創建ajax對象的方法：

IE6以下版本瀏覽器創建ajax對象方法是：

2. 設置回調函數

xhr.onreadystatechange = callback

3. 使用open方法與服務器建立連接

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

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

4. 向服務器發送數據

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

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

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

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

補充

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
-	0: 請求未初始化
-	1: 服務器連接已建立
-	2: 請求已接收
-	3: 請求處理中
-	4: 請求已完成，且響應已就緒
status	200: “OK”      404: 未找到頁面

解析JSON數據