封装一个简易的类ajax函数

Posted 2021-05-25 一个动态类型的幽灵

 1 function resolveData(data) {
 2   // ----------------- 实现方法1-------------
 3   // let arr = [];
 4   // for (const k in data) {
 5   //   const str = `${k}=${data[k]}`;
 6   //   arr.push(str);
 7   // }
 8   //   -------------实现方法-2------------
 9   let arr = Object.keys(data).map((k) => {
10     // Object.keys(data) 为获取data对象的 属性名  返回一个包含所有属性名的数组
11     // .map((k) ------------> 将包含属性名的数组 重新处理后  返回一个新数组   形参k为当前的循环项
12     return `${k}=${data[k]}`; //将结果返回   不要忘记 return
13   });
14   return arr.join("&");   //将返回的数组利用join方法拼接为 字符串
15 }
16 
17 function ajndh(options) {
18   // -----------------------------------
19   // 创建xhr对象
20   const xhr = new XMLHttpRequest();
21   // 把传过来的data 对象 数据  转换为  查询字符串
22   const qs = resolveData(options.data);
23   // -------------------------------------------
24   // 判断请求的类型
25   if (options.method.toUpperCase() == "GET") {
26     // 发起get请求 参数在URL后面拼接
27     xhr.open(options.method, options.url + "?" + qs);
28     xhr.send();
29   } else if (options.method.toUpperCase() == "POST") {
30     // 发起post请求 设置请求的方式 和请求的地址
31     xhr.open(options.method, options.url);
32     // 发起post请求要设置 请求头文件
33     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
34     // 在send函数中  传送   对象转换后的 查询字符串
35     xhr.send(qs);
36   }
37   // --------------------------------------------
38   // 监听状态
39   xhr.onload = function () {
40     if (this.status == 200) {
41       // 把服务器响应的JSON数据 转换为 对象类型
42       const data = JSON.parse(xhr.responseText);
43       // 手动调用下服务器的成功属性 把data 传过去 以便用户调用
44       options.success(data);
45     }
46   };
47 }