JavaScript 原生 封装 Ajax 函数

要实现的效果

<!-- 导入自定义的 ajax() 文件 -->
<script src="./ajax.js"></script>

<script>
    // 调用自定义的 ajax()，发起数据请求
    ajax({
        method: '请求类型',
        url: '请求地址',
        data: { /* 请求参数对象 */ },
        success(res) {			// 数据请求成功后的回调函数
            console.log(res);	// 打印数据
        }

    })
</script>

定义 option 形参

在 自定义 ajax() 函数内 接收一个配置对象作为参数，配置队中可以配置如下属性：

参数名	参数值
method	请求类型
url	请求地址
data	请求参数
success	请求成功之后的回调函数

处理 data 请求参数

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

function resolveData(data) {
  let arr = [];
  for (let k in data) {
    arr.push(`${k}=${data[k]}`);
  }
  return arr.join("&");
}

封装 主函数

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

function ajax(option) {
  let xhr = new XMLHttpRequest();
    
  // 拼接 查询参数
  let qs = resolveData(option.data);
    
  // 判断请求的类型
  // 不同的请求类型，对应 xhr 对象的不同操作，因此需要对请求类型进行 if … else … 的判断：
  if (option.method.toUpperCase() === "GET" || option.method === "get") {
    xhr.open("GET", `${option.url}?${qs}`);
    xhr.send();
  } else if (
    option.method.toUpperCase() === "POST" ||
    option.method === "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) {
      option.success(JSON.parse(xhr.responseText));
    }
  };
}