概述

jquery退出歷史舞臺之後，我們怎麼來發送ajax請求呢？可以用相關的庫，也可以自己製作一個簡易的ajax。

需要說明的是，我們使用的是XMLHttpRequest 2，它幾乎相容所有主流瀏覽器：XMLHttpRequest advanced features

參考：

stackoverflow答案

實現get請求

先從支援get請求開始，程式碼如下：

function ajax(a, b, c){ // URL, callback, just a placeholder
    c = new XMLHttpRequest;
    c.open('GET', a);
    c.onload = b;
    c.send();
}
 

這裡的c是一個佔位符，可以避免我們宣告變數，雖然影響了一點可讀性。

進行如下測試：

ajax('https://api.github.com/repositories/91545010/issues/1', function(e) {
    console.log(this.response);
});

可以看到能夠返回資料。

實現post請求

很多時候，我們需要post請求，支援post請求也很簡單，程式碼如下：

// URL, callback, method, formdata, just a placeholder
function ajax(a, b, e, d, c){
    c = new XMLHttpRequest;
    c.open(e||'GET', a);
    c.onload = b;
    c.send(d||null);
}
 

可以利用如下方式傳送get和post請求：

ajax(url, callback);
ajax(url, callback, 'post', {'key': 'val'});

實現錯誤處理

錯誤處理是請求api中必不可少的東西，實現也很簡單，程式碼如下：

// URL, callback, errorCallback, method, formdata, just a placeholder
function ajax(a, b, f, e, d, c){
    c = new XMLHttpRequest;
    c.open(e||'GET', a);
    c.onload = b;
    c.onerror = f;
    c.send(d||null);
}
 

可以利用如下方式傳送get和post請求，並且定製error錯誤處理回撥。

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}

ajax(url, callback, error);
ajax(url, callback, error, 'post', {'key': 'val'});

學到了什麼

我學到了什麼？

1. 自己一步步包裝實現常用api其實沒有那麼難。
2. ajax的內部原理。