如何手动封装一个ajax请求？

最新推荐文章于 2021-11-30 21:49:34 发布

原创最新推荐文章于 2021-11-30 21:49:34 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #http #封装 #post

本文介绍了一个简单的手动封装Ajax请求的方法，通过定义一个名为MyAjax的函数来实现GET和POST请求的发送。该函数接受一个参数对象，其中包括请求类型（GET或POST）、URL地址等，并根据不同的请求类型进行相应的处理。

如何手动封装一个ajax请求，用函数方式调用即可？

废话不多说，直接上代码

 <script>
    function MyAjax(params) {
      let xhr = new XMLHttpRequest();
      //将传递过来的method 转换为大写 转小写也可以，为了后面的if判断条件
      params.method = params.method.toUpperCase();
      if (params.method === "GET") {
        xhr.open(params.method, params.url);
        xhr.send();
      }
      if (params.method === "POST") {
        xhr.open(params.method, params.url, params.data);
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-wwww-form-urlencoded"
        );
        xhr.send();
      }
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
        // 定义一个变量 接收服务器返回来的数据 并用JOSN.parse转换为对象
          let res = JSON.parse(xhr.responseText);
         //打印看看服务器返回来的数据
          console.log(res);
        }
      };
    }

	//直接调用MyAjax 里面传递你要发送的get/post请求及参数
    MyAjax({
      method: "GET",
      url: "http://www.xxxx",
    });
  </script>