/**
 * 处理 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);
    }
  };
}

定义options参数选项

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);
  }