原生js发送ajax请求的两种方法之函数封装

释放双眼,带上耳机,听听看~!
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我发送ajax请求</button>


    
<script>
//自己封装的ajax请求函数 
//自执行函数
(function (window) {
  let bloglab = {
    get: function (options) {
      //a.创建一个XMLHttpRequest对象
      let xhr = new XMLHttpRequest();

      //处理url
      options.url += "?";
      options.url += options.data;

      //b.调用这个对象的open方法,设置请求方式和请求地址.
      xhr.open("get", options.url);
      //c.设置请求成功后的回调函数.
      xhr.onload = function () {
        //console.log(xhr.response);

        //调用success
        options.success(xhr.response); //调用success函数,传递的参数那就是实参
      };
      //d.调用这个对象的send方法,开始发送.
      xhr.send();
    },
    post: function (options) {
      //a.创建XMLHttpRequest对象
      let xhr = new XMLHttpRequest();
      //b.调用这个对象的open方法,设置请求方式和请求地址.
      xhr.open("post", options.url);
      //c.设置请求头(固定的代码)
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      //d.设置请求成功后要执行的回调函数.
      xhr.onload = function () {
        // console.log(xhr.response);

        //调用success回调函数
        options.success(xhr.response); //传递的参数就是实参
      };
      //e.调用这个对象的send方法.
      xhr.send(options.data);
    },
    //type, url,data,success
    ajax: function (options) {
      //a.创建XMLHttpRequest对象
      let xhr = new XMLHttpRequest();

      //判断
      if (options.type == "get") {
        options.url += "?";
        options.url += options.data;
      }

      //b.调用这个对象的open方法,设置请求方式和请求地址.
      xhr.open(options.type, options.url);

      //判断
      if (options.type == 'post') {
        //c.设置请求头(固定的代码)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      }
      //d.设置请求成功后要执行的回调函数.
      xhr.onload = function () {
        //console.log(xhr.response);
        options.success(xhr.response);
      }
      //e.调用这个对象的send方法.
      //判断
      if (options.type == 'get') {
        xhr.send();
      } else {
        xhr.send(options.data);
      }
    },
  };

  //把bloglab这个对象交给window对象
  window.bloglab = bloglab;
})(window);

    </script>



    <!-- 验证自己封装的ajax请求函数 -->
    <script>
        document.getElementById('btn').onclick = function () {

            // bloglab.get();
            // bloglab.post();

            //验证我们自己写的ajax方法发送get请求
            bloglab.ajax({
                type: 'get',
                url: 'https://autumnfish.cn/api/joke/list',
                data: 'num=5',
                success: function (backData) {
                    console.log(backData);
                }
            });

            // 验证我们自己写的ajax方法发送post请求
            bloglab.ajax({
                type: 'post',
                url: 'https://autumnfish.cn/api/user/check',
                data: 'username=刘德华',
                success: function (backData) {
                    console.log(backData);
                }
            });
            // $.get();
            // $.post();
            // $.ajax();

        }
    </script>

</body>

</html>
内容投诉

人已赞赏
JavaScript

原生js发送ajax请求-数据处理

2020-8-13 11:16:21

ES6JavaScript

JavaScript-ES6 - const常量[常用]

2020-8-21 17:39:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索