原生js封装ajax,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>