JS AJAX函数封装

AJAX，英文全称：Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML，主要用于在与服务器交换数据时无需重新加载页面。AJAX 的实现是通过创建 XMLHttpRequest 对象，向服务器发送请求，再根据服务器返回的响应决定客户端接下来的动作。

以下是 AJAX 函数封装代码：

function AJAX(options) {
  var xhr, header, k, data, arr;

  options = options || {};
  options.method = options.method || 'GET';
  options.url = options.url || null;
  options.async = options.async || true;
  options.contentType = options.contentType || 'application/x-www-form-urlencoded';
  options.data = options.data || null;
  options.header = options.header || null;
  options.success = options.success || null;
  options.error = options.error || null;

  xhr = new XMLHttpRequest(); // 忽略兼容低版本IE

  xhr.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 300) {
        if (typeof options.success === 'function') {
          options.success(this.responseText, this.status, this);
        }
      }
      else {
        if (typeof options.error === 'function') {
          options.error(this, this.status, this.responseText);
        }
      }
    }
  };

  xhr.open(options.method, options.url, options.async);

  if (Object.prototype.toString.call(options.header) === '[object Object]') {
    header = options.header;

    for (k in header) {
      xhr.setRequestHeader(k, header[k]);
    }
  }

  if (options.contentType) {
    xhr.setRequestHeader('Content-Type', options.contentType);
  }

  if (Object.prototype.toString.call(options.data) === '[object Object]') {
    data = options.data;

    arr = [];

    for (k in data) {
      arr.push(k + '=' data[k]);
    }

    xhr.send(arr.join('&'));
  }
  else {
    xhr.send();
  }
}

AJAX({
  method: 'GET',
  url: 'http://www.zhangxin7.cn/',
  success: function(res) {
    console.log(res);
  },
  error: function(xhr, status, res) {
    console.log(status, res);
  },
});