二、封装AJAX

近来觉得自己JavaScript基础较为薄弱，去啃一些知识(例如: JavaScript设计模式等)越来越困难，所以现在想要巩固一下JavaScript知识，此节就来写一个如何自己封装AJAX。

可能我们使用AJAX的时候都是使用JQuery这些已经封装好的类库，或者是使用类似Angular的Http、HttpClient这些框架已经封装好的方法协议，但是如果我们想用原生去写一个项目时怎么办呢？

这时候引用类库或者框架就不符合原生的标准了，所以我们需要自己去实现一个Ajax封装。

/**
 * 封装ajax函数
 * @param {string} opt.method http连接的方式，包括POST和GET两种，默认使用GET
 * @param {string} opt.url 发送的url请求
 * @param {boolean} opt.async 是否为异步请求，true为异步，false为同步，默认为true
 * @param {object} opt.data 传到服务器的数据
 * @param {function} opt.success ajax发送并接收成功时调用的回掉函数
 */
function ajax(opt) {
  var opt = opt || {},
      type = opt.type || 'GET',
      url = opt.url || '',
      async = opt.async || true,
      data = opt.data || null,
      success = opt.success || function() {},
      xmlHttp = null;
  
  if(XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else {
    xmlHttp = new ActiveXObject('Miscroft.XMLHTTP');
  }

  var params = [];
  for(var key in data) {
    params.push(key + '=' + data[key]);
  }
  var dataStr = params.join('&');
  if(type === 'POST') {
    xmlHttp.open(type, url, async);
    xmlHttp.setRequestHander('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
    xmlHttp.send(dataStr);
  } else {
    xmlHttp.open(type, url + '?' + dataStr, async);
    xmlHttp.send(null);
  }
  xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState === 4 && xmlHttp.status === 200) {
      success(xmlHttp.responseText);
    }
  }
}