ajax 封裝

ajax 的封裝分為三個步驟

1. 建立 xhr 的例項，不考慮瀏覽器問題，基本使用 XMLHttpRequest 就可以了
2. xhr.onreadystatechange 事件觸發，監聽回撥
3. 執行 xhr 請求步驟
   • xhr.open(), 在此之前，引數程式設計queryString的格式，引數要進行 encodeURIComponent 編碼
   • xhr.setRequestHeader() 設定請求頭，一般設定 post 請求的 Content-Type: application/x-www-form-urlencoded
   • xhr.send()

(function () {
  // 引數的編碼問題
  const _stringfyParams = function (data) {
    var ary = [];
    for (var i in data) {
      var item = encodeURIComponent(i) + '=' + encodeURIComponent(data[i])
      ary.push(item)
    }
    return ary.join('&')
  }
  // xhr 瀏覽器版本問題
  function _createXHR() {
    if (typeof XMLHttpRequest !== 'undefined') {
      return new XMLHttpRequest();
    } else if (typeof ActiveXObject != 'undefined') {
      var versions = [
        'MSXML2.XMLHttp.6.0',
        'MSXML2.XMLHttp.3.0',
        'MSXML2.XMLHttp'
      ];
      for (var i = 0; i < versions.length; i++) {
        try {
          return newActiveXObject(version[i]);
        } catch (e) {
          //跳過
        }
      }
    } else {
      thrownewError('您的瀏覽器不支援 XHR物件！')
    }
  }

  function $ajax(obj) {
    // 第 1 步 建立一個 XMLHttpRequest 例項
    var xhr = new _createXHR();
    obj.url = obj.url + '?rand=' + Math.random()
    obj.data = _stringfyParams(obj.data)
    if (!('async' in obj)) obj.async = true
    if (obj.method === 'get')  obj.url += obj.url.indexOf('?') === -1 ? '?' + obj.data : '&' + obj.data
    // 第 2 步宣告事件監聽回撥
    if (obj.async === true) {
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) _callback()
      }
    }
    // 第 3 步 執行 xhr 發生請求步驟 1. open，2. 設定post的請求頭 3. send
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === 'post') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(obj.data);
    } else {
      xhr.send(null);
    }
    if (obj.async === false) {
      _callback();
    }

    // 回撥函式
    function _callback() {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        obj.success(xhr.responseText)
      } else {
        alert('資料返回失敗！狀態程式碼：' + xhr.status + '，狀態資訊：' + xhr.statusText)
      }
    }
  }
  window.$ajax = $ajax
})()
複製程式碼

測試

document.addEventListener('click', function () {
  $ajax({
    method: 'get',
    url: './get.json',
    data: {
      'name': '無樣'
    },
    success: function (text) {
      console.log(text)
    },
    async: true
  })
}, false)
複製程式碼

測試原始碼地址

總結：

對 ajax 的使用，基本上使用 jquery 的 $.ajax()、axios、fetch的api。