js封装ajax方法

最新推荐文章于 2023-09-20 10:27:08 发布

李晨飞_

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量1.5k

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/m0_59878114/article/details/120252596

版权

1、根据Jquery中ajax的方法封装，先创建一个js文件

// 对原生代码进行封装

// 传参，相当于 let 形参 = 实参;
/*
let { type, url, data, success } = {
      type: 'POST',
      url: 'http://www.itcbc.com:3006/api/addbook',
      data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laotang' },
      success: function (res) {
        console.log(res);
      }
    }
*/

function ajax({ type, url, data, success }) {
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let res = xhr.responseText;
      // res 是服务器返回的结果
      success(res);
    } 
  }
  // 需要把传递进来的对象，转成字符串格式
  let arr = [];
  for (let key in data) {
    // key 表示键：id | appkey | bookname
    // data[key] 表示值： 1 | laotang | zs
    arr.push(key + '=' + data[key]);  // 'id=1'
  }
  let str = arr.join('&');

  // 判断是什么请求方式
  if (type === 'GET') {
    xhr.open(type, url + '?' + str);
    xhr.send();
  } else if (type === 'POST') {
    xhr.open(type, url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(str);
  }

}

2、创建html文件调用ajax方法

<body>
  <script src="./js/index.js"></script>

  <script>

    // 因为 $.ajax() 就是这样用。所以我希望，我自己封装的函数，也这样用
    // 所以用法如下：

    ajax({
      type: 'POST',
      url: 'http://www.itcbc.com:3006/api/addbook',
      data: { bookname: 'ss', author: 'xx', publisher: 'uu', appkey: 'laotang' },
      success: function (x) {
        console.log(x);
      }
    });
  </script>

</body>