在前面的文章中介绍了一下ajax的使用方法跟注意事项后，在真实开发环境中，大家总不可能没发一次请求就写一次ajax吧，在后期代码维护中，你会感受到什么是绝望。

因此ajax肯定是需要封装的，下面代码附上，大家自行参考。

function ajax(options) {
  //设置默认参数
  var defaultData = {
    methods: "get",
    url: "",
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    data: {},
    success: function() {},
    error: function() {}
  };
  //将传递过来的参数进行拷贝，没有则使用默认参数
  Object.assign(defaultData, options);

  var xhr = new XMLHttpRequest();
  xhr.open(defaultData.methods, defaultData.url);
  if (defaultData.methods == "get") {
    //调用参数拼接方法进行参数拼接
    let parms = parmsConcat(defaultData.data);
    xhr.setRequestHeader("Content-Type", defaultData.header["Content-Type"]);
    defaultData.url = defaultData.url + "?" + parms;
  }
  //当请求方式为post 则判断请求头是json还是x-www-form-urlencoded
  if (defaultData.methods == "post") {
    //获取参数中的请求头
    let contentType = defaultData.header["Content-Type"];
    //post请求设置请求头
    xhr.setRequestHeader("Content-Type", contentType);
    //判断是请求头是json格式则将数据转成json字符串进行传递
    if ("application/json" == contentType) {
      xhr.send(JSON.stringify(defaultData.data));
    } else {
      let parms = parmsConcat(defaultData.data);
      xhr.send(parms);
    }
  } else {
    xhr.send();
  }
  xhr.onload = function() {
    //判断http状态码是否是200
    if (200 == xhr.status) {
      var contentType = xhr.getResponseHeader("Content-Type");
      //判断返回的数据类型是否是json格式，是则转成对象形式
      if (contentType.includes("application/json")) {
        defaultData.success(JSON.parse(xhr.responseText), xhr);
      } else {
        defaultData.success(xhr.responseText, xhr);
      }
    } else {
      defaultData.error(xhr.responseText, xhr);
    }
  };
}
//封装参数拼接方法
function parmsConcat(data) {
  //传递的参数
  var parms = "";
  //拼接参数
  for (let attrs in data) {
    parms += `attrs=${data[attrs]}&`;
  }
  //去除参数最后一个&
  parms = parms.slice(0, parms.length - 1);
  return parms;
}

//调用封装好的ajax发个请求玩一玩，效果还不错
ajax({
  methods: "post",
  url: "http://127.0.0.1:3000/get",
  header: {
    "Content-Type": "application/json"
  },
  data: {
    name: "zs",
    age: 23
  },
  success: function(res) {
    console.log(res);
  },
  error(err) {
    console.log(err);
  }
});