使用XMLHttpRequest對象完成原生的AJAX請求

1.大家眼中的Ajax

說到Ajax，只要有過前端開發經驗的童鞋一定都不陌生，大都知道它就是一種與后端之間的通信技術，通過這個神奇的家伙，我們不用像傳統表單那樣填完信息一點提交就呼啦呼啦跳轉了。Ajax最大的一個優勢就是通過異步請求達到局部刷新的目的，這樣就大大提高了用戶體驗。可是Ajax就是我們平時使用得最多的jQuery中的$.ajax()嗎？答案肯定不是的，那我們就來一起看看原生的Ajax究竟長啥樣把！

2.獲取XMLHttpRequest

• 2.1 為什么要獲取XMLHttpRequest對象

Ajax技術的核心是XMLHttpRequest對象（簡稱XHR）

• 2.2 如何獲取XMLHttpRequest對象

  • 由於IE5是第一款引入XHR對象的瀏覽器，所以在IE7之前其實都不是叫XMLHttpRequest，具體要兼容IE7之前瀏覽器的話可以查閱一下《高級程序設計》本文重點是討論如何實現Ajax請求，所以，默認在內置了XHR的IE7+和其他現代瀏覽器下，所以：

  function getXhr(){
   	if (typeof XMLHttpRequest != 'undefined') {
   		return new XMLHttpRequest();
   	}
   }
  

  • 這樣就得到了一個XHR的實例對象

3.大體的流程

• 3.1 初始化請求

  • 使用XHR對象時，使用的第一個方法就是open()，這個方法不會發送請求，但會初始化一個請求准備發送，第三個參數默認是true，也就是異步的

  xhr.open('get', 'example.php', false);
  

• 3.2 發送請求

  • GET請求:發送的值為空，一般寫上null，適配有些瀏覽器

  xhr.open('GET', url);
  xhr.send(null);
  

  • POST請求,要模擬表單提交請求的話就將Content-type頭部信息設置為application/x-www-form-urlencoded，並且發送的是一個經過序列化之后的字符串

  xhr.open('POST', url);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(stringData);
  

• 3.3 監控請求狀態，處理請求數據

  • xhr對象有且僅有一個事件onreadystatechange，注意所有字母都是小寫的，javascript和Java一樣都是區分大小寫的。
  • 每一次xhr對象的readyState狀態值改變都會觸發該事件，但是該方法不能為單獨的一個xhr對象綁定多個事件處理邏輯，即onreadystatechange只能綁定一個事件處理的function，如果你想處理多件事情，那么只能在綁定的function中進行多事件處理的邏輯調用。

  xhr.onreadystatechange = function(){  
    if(xhr.readyState == 4){  
        if(xhr.status == 200){  
            document.getElementById("unInfo").innerHTML = xhr.responseText;  
        }  
    }  
  }
  

4.重要屬性

• 4.1 readyState屬性，這個屬性可能的取值如下：

  • 0：未初始化，尚未調用open()方法
  • 1：啟動。已經調用open()方法，但尚未調用send()方法
  • 2：發送：已經調用send()方法，但尚未收到響應
  • 3：接收。已經接收到部分響應數據。
  • 4：完成。已經接收到全部響應數據，而且已經可以在客戶端使用了。

• 4.2 響應的數據會自動填充XHR對象的屬性，包含以下屬性

  • responseText：作為響應主題被放回的文本
  • responseXML：如果響應的內容類型是"text/xml"或"application/xml",這個屬性中將保存包含着響應數據的XMLDOM文檔
  • status：響應的HTTP狀態
  • statusText：HTTP狀態的說明

5.一次完整的XHR請求

• GET

function getXhr(){
if (typeof XMLHttpRequest != 'undefined') {
  return new XMLHttpRequest();
}
}
var xhr = getXhr();
//GET請求
xhr.open('GET', '/user/checkLogin');
xhr.send(null);
xhr.onreadystatechange = function(res) {
if (xhr.readyState == 4) {
  if (xhr.status == 200) {
    console.log(JSON.parse(xhr.responseText))
  }
}
}

• POST

  function getXhr(){
    if (typeof XMLHttpRequest != 'undefined') {
      return new XMLHttpRequest();
    }
  }
  var xhr = getXhr();
  var stringData = {
    uname: '123',
    password: '123',
    code: ''
  }
  stringData = JSON.stringify(stringData);
  //POST請求
  xhr.open('POST', '/user/login');
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(stringData)
  xhr.onreadystatechange = function(res) {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
  }

參考文章：

• 【AJAX】XmlHttpRequest對象詳解（API）
• XMLHttpRequest API 使用指南
• 《JavaScript高級程序設計》第21章