原生AJAX

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest物件用於在後臺與伺服器交換資料   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4說明請求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 從伺服器獲得資料 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // data應為'a=a1&b=b1'這種字串格式，在jq裡如果data為物件會自動將物件轉成這種字串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 新增http頭，傳送資訊至伺服器時內容編碼型別
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}
 

ES6中Promise結合Ajax寫法

const ajaxPromise =  param => {
  return new Promise((resovle, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open(param.type || "get", param.url, true);
    xhr.send(param.data || null);
 
    xhr.onreadystatechange = () => {
     var DONE = 4; // readyState 4 代表已向伺服器傳送請求
     var OK = 200; // status 200 代表伺服器返回成功
     if(xhr.readyState === DONE){
      if(xhr.status === OK){
        resovle(JSON.parse(xhr.responseText));
      } else{
        reject(JSON.parse(xhr.responseText));
      }
     }
    }
  })
}