使用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章