原生ajax的封装写法以及总结

查看知识点梳理思维导图

1.原生 ajax  GET  请求
2.原生 ajax  POST 请求
3.封装 ajax 请求

1、原生ajax GET 请求

步骤：
     1、创建xhr
     2、监听xhr.onreadystatechange事件 ajax状态发生变化的事件
     3、判断ajax请求的状态 
     4、设置请求方式和url
     5、发送请求

<script>
        //使用xhr对象发送get方式请求
        //   创建xhr
        let xhr = new XMLHttpRequest();
        // 监听xhr.onreadystatechange事件 ajax状态发生变化的事件
        xhr.onreadystatechange = function () {
            // 固定写法 readyState 表示 ajax的状态 
            //ajax的状态总共有（0 1 2 3 4 ）五种状态 状态为4表示请求完成 status === 200表示成功
            if (xhr.readyState == 4 && xhr.status === 200) {
                // xhr.responseText;  // 接收响应结果
                let res = xhr.responseText;  // 结果是JSON字符串
                // 转化为数组对象
                JSON.parse(res)
            }
        }
        // 调用xhr.open()函数 设置请求方式和url
        // 查询字符串的写法 key=value&key=value....  字符串和接口之间用？隔开
        xhr.open('GET', '接口文档url地址')
        // 调用xhr.send()函数 发送请求
        xhr.send()
    </script>

2、原生ajax POST 请求

步骤：
     1、创建xhr
     2、监听xhr.onreadystatechange事件 ajax状态发生变化的事件
     3、判断ajax请求的状态 
     4、设置请求方式和url
     5、告诉服务器请求头（前端提交的是什么类型数据）
     6、发送请求

 <script>
        // 创建xhr对象
        let xhr = new XMLHttpRequest();
        // 注册事件
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let res = JSON.parse(this.responseText)
            }
        }
        // 调用open 设置请求方式和url
        xhr.open('POST', '接口文档url地址');
        // 请求头 必须写在open和send之间
        // 告诉服务器 前端提交数据是什么类型  表示查询字符串类型
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // send里面写 查询字符串 格式：key=value&key=value....
        xhr.send('查询字符串')
    </script>

3、封装ajax 请求

步骤：
 第一大步：
     1、创建xhr
     2、监听xhr.onreadystatechange事件 ajax状态发生变化的事件
     3、判断ajax请求的状态 
     4、接受响应结果 并且转为数组对象形式
     5、调用参数里面的  success函数

 第二大步：
     1、处理参数中data数据 遍历对象
     2、将data数据转为查询字符串
     3、判断请求方式时 get 还是 post  并 设置请求方式 发送请求
   
 第三大步： 
     调用封装的函数 并且 传参

 <script>
  // 封装一个函数
        function ajax(option) {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    let res = JOSN.parse(this.responseText);
                    option.success(res)   //这里调用success函数  
                }
            };
            // 处理data数据  将对象形式的 处理查询字符串形式的  
            // 因为下面open 或者 send只能加字符串形式 
            let arr = []
            for (let i in option.data) {
                // i表示对象的key
                // option.data[i]表示对象的值
                arr.push(i + '=' + option.data[i]);  // ['bookname=aaa', 'author=bbb', ...]
            }
            //join() 把数组转化为字符串，元素是通过指定的分隔符进行分隔的，如果没有默认为逗号
            let querystring = arr.join('&');  // bookname=aaa&author=bbb&publiser=ccc

            // toUpperCase()  转大写
            let method = option.type.toUpperCase(); // 把请求方式转成大写   识别 post / POST
            //  判断请求
            if (option.type === 'GET') {
                xhr.open('GET', option.url + '?' + querystring);
                xhr.send();
            } else if (option.type === 'POST') {
                xhr.open('POST', option.url);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(querystring);
            }
        };
        
	   //调用  传参 数数就是数据
        ajax({
            type: 'GET',  //或者 ‘post’
            url: '接口文档 url地址,
            data: {数据，根据接口文档提供属性},
            success: function (res) {}
        });
    </script>