/**
 * 处理 data参数
 * @prarm {data}需要发送到服务器的数据
 * @returns{string} 返回拼接好的查询字符串 k=v&v=k
 */
function resolveData(data) {
  var arr = [];
  for (const k in data) {
    var str = `${k}=${data[k]}`;
    arr.push(str);
  }
  return arr.join("&");
}
function itheima(option) {
  var xhr = new XMLHttpRequest();
  // 将外界传进来的参数对象转为查询字符串
  var qs = resolveData(option.data);
  if ((option.method.toUpperCase() === "GET")) {
    // 发起GET请求
    // xhr.open(option.method, option.url + '?' + qs)
    xhr.open(option.method, qs ? option.url + "?" + qs : option.url);
    xhr.send();
  } else if (option.method.toUpperCase() === "POST") {
    //发起POST请求
    xhr.open(option.method, option.url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(qs);
  }
  // 注册监听
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText);
      option.success(result);
    }
  };
}

定义option参数选项

itheima()函数是我们自定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：

• method： 请求的类型
• url: 请求的url地址
• data： 请求携带的数据
• success： 请求成功之后的回调函数

处理data函数

需要把data对象，转化成查询字符串的格式，从而提交给服务器，一次提前定义resolveData函数如下：

/**
 * 处理 data参数
 * @prarm {data}需要发送到服务器的数据
 * @returns{string} 返回拼接好的查询字符串 k=v&v=k
 */
function resolveData(data) {
  var arr = [];
  for (const k in data) {
    var str = `${k}=${data[k]}`;
    arr.push(str);
  }
  return arr.join("&");
}

定义itheima函数

在itheima()函数中，需要创建xhr对象，并监听onreadystatechange事件：

function itheima(option) {
  var xhr = new XMLHttpRequest();
  // 将外界传进来的参数对象转为查询字符串
  var qs = resolveData(option.data);
  // 注册监听
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText);
      option.success(result);
    }
  };
}

判断请求的类型

不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if... else ... 判断：

 if ((option.method.toUpperCase() === "GET")) {
    // 发起GET请求
    // xhr.open(option.method, option.url + '?' + qs)
    xhr.open(option.method, qs ? option.url + "?" + qs : option.url);
    xhr.send();
  } else if (option.method.toUpperCase() === "POST") {
    //发起POST请求
    xhr.open(option.method, option.url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(qs);
  }