js习题（用原生js封装Ajax函数）_js的ajax练习题-CSDN博客

本文链接：https://blog.csdn.net/weixin_46611729/article/details/109300509

以下是js代码：

/**
 * 处理data参数
 * @param data{Object} 需要发送到服务的数据
 * @return {String} 返回拼接好的查询字符串
 * @author 不知猫 2020/10/26
 */
function resolveData(data) {
  const arr = [];
  for (let key in data) {
    arr.push(key + '=' + data[key]);
  }
  return arr.join('&');
}

/**
 * 封装Ajax函数
 * @param options{Object} 需要有请求类型，请求地址，回调函数，[参数]
 */
function myAjax(options) {
  //1.创建一个XMLHttpRequest的实例对象
  let xhr = new XMLHttpRequest();
  //2.把需要传给服务器的数据从对象类型转换成查询字符串类型
  let queryStr = resolveData(options.data);
  //3.判断请求类型，对应xhr对象的不同操作
  if (options.method.toUpperCase() === 'GET') {
    //发起GET请求
    //调用open函数，指定请求方式与url
    xhr.open(options.method, options.url + '?' + queryStr);
    //调用send函数，发情ajax请求
    xhr.send();
  } else if (options.method.toUpperCase() === 'POST') {
    //发起POST请求
    //调用open函数，指定请求方式与url
    xhr.open(options.method, options.url);
    //设置Content-Type属性
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //调用send函数，发送ajax请求,并将查询字符串作为参数传入里面
    xhr.send(queryStr);
  }

  //监听onreadystatechange事件
  xhr.onreadystatechange = function () {
    //判断是否有服务器的响应数据
    if (xhr.readyState === 4 && xhr.status === 200) {
      //将响应的数据由JSON字符串格式解析成对象格式
      let result = JSON.parse(xhr.responseText);
      //调用执行请求成功之后的回调函数，并把响应的数据作为参数传入里面
      options.success(result);
    }
  };
}

以下是html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步：导入自定义的ajax函数库 -->
    <script src="./js/myAjax.js"></script>
</head>

<body>
    <script>
        // 第二步：调用自定义的myAjax函数，发起Ajax数据请求
        myAjax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            // data: {/*"请求参数对象"*/ },
            success(res) {//成功的回调函数
                console.log(res);//打印数据
            }
        })

        /*  myAjax({
             method: 'POST',
             url: 'http://www.liulongbin.top:3006/api/addbook',
             data: { bookname: 'kk', author: 'hhe', publisher: '11' },
             success(res) {//成功的回调函数
                 console.log(res);//打印数据
             }
         }) */
    </script>
</body>

</html>