封裝原生Ajax

封裝ajax函數

/**
 * 建立Ajax
 * @param options
 */
function Ajax(options) {
  // 新建一個對象，用途接受XHR對象
  var xhr = null;

  // 第一步建立XMLHttpRequest對象 || 同時兼任IE
  // 首先檢測原生XHR對象是否存在，若是存在則返回它的新實例
  if (typeof XMLHttpRequest != "undefined") {
    xhr = new XMLHttpRequest();

    // 而後若是原生對象不存在，則檢測ActiveX對象
  } else if (typeof ActiveXObject != "undefined") {

    // 若是存在,則建立他的對象,但這個對象須要一個傳入參數,以下:
    if (typeof arguments.callee.activeXString != 'string') {
      // 對象版本
      var versions = [
        'Microsoft.XMLHTTP',
        'Msxml2.XMLHTTP.7.0',
        'Msxml2.XMLHTTP.6.0',
        'Msxml2.XMLHTTP.5.0',
        'Msxml2.XMLHTTP.4.0',
        'MSXML2.XMLHTTP.3.0',
        'MSXML.XMLHTTP'
      ], i, len;

      for (i = 0, len = versions.length; i < len; i++) {
        try {
          // 須要versions數組中的某個項,數組的7個項分別對應7個版本.
          new ActiveXObject(versions[i]);

          // arguments是javascript函數的內置對象,表明傳入參數的集合，
          // callee就表明對象自己即new createXHR
          arguments.callee.activeXString = versions[i];
          break;

        } catch (e) {
          // 跳過
        }
      }
    }
    // 直到循環建立成功爲止,而後給本身添加一個屬性叫activeXString
    xhr = new ActiveXObject(arguments.callee.activeXString);

  } else {
    // 若是這兩種對象都不存在，就拋出一個錯誤
    throw new Error('No XHR object available');
  }

  /**
   ** options形參解析：
   * data 發送的參數，格式爲對象類型
   * url 發送請求的url，服務器地址（api）
   * async 否爲異步請求，true爲異步的，false爲同步的
   * method http鏈接的方式，包括POST和GET兩種方式
   */
  options = options || {};
  options.success = options.success || function () {
  };
  options.fail = options.fail || function () {
  };

  var data = options.data,
       url = options.url,
       async = options.async === undefined ? true : options.async,
       method = options.method.toUpperCase(),
       dataArr = [];

  // 遍歷參數
  for (var k in data) {
    dataArr.push(k + '=' + data[k]);
  }

  // GET請求
  if (method === 'GET') {
    url = url + '?' + dataArr.join('&');
    xhr.open(method, url.replace(/\?$/g, ''), async);
    xhr.send();
  }

  // POST請求
  if (method === 'POST') {
    xhr.open(method, url, async);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(dataArr.join('&'));
  }

  // 響應接收完畢後將觸發load事件
  xhr.onload = function () {

    /**
     * XHR對象的readyState屬性
     * 0：未初始化。還沒有調用open()方法。
     * 1：啓動。已經調用open()方法，但還沒有調用send()方法。
     * 2：發送。已經調用send()方法，但還沒有接收到響應。
     * 3：接收。已經接收到部分響應數據。
     * 4：完成。已經接收到所有響應數據，並且已經能夠在客戶端使用了。
     */
    if (xhr.readyState == 4) {
      // 獲得響應
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        // 處理成功數據
        var res;
        if (options.success && options.success instanceof Function) {
          res = xhr.responseText;
          if (typeof res === 'string') {
            res = JSON.parse(res);
            options.success.call(xhr, res);
          }
        }
      } else {
        // 處理錯誤數據
        if (options.fail && options.fail instanceof Function) {
          options.fail.call(xhr, res)
        }
      }

    } else {
      // 拋出檢測XHR對象的readyState屬性
      console.log('XHR was readyState：', xhr.readyState);
    }
  }
}

options參數說明

參數	類型	描述	默認值	是否填
url	string	發送請求的url，服務器地址（api）	''	必填
method	string	http鏈接的方式，包括POST和GET兩種方式	true	選填
async	boolean	是否爲異步請求，true爲異步的，false爲同步的	true	選填
data	json	發送的參數，格式爲對象(json)類型	null	選填
success	function	請求成功回調函數	function () { }	必填
fail	function	請求失敗回調函數	function () { }	必填

示例：

Ajax({
  url: 'http://localhost:3000/api/v1/article',
  method: 'GET',
  async: true,
  success: function (res) {
    console.log('successful', res);
  },
  fail: function (err) {
    console.log('fail', err);
  }
})

成功返回數據：

successful {code: 200, msg: "查詢文章列表成功！", data: {…}}