模拟$.ajax封装方法

需求：模拟$.ajax封装方法，调用效果如下：

调用$ajax（）函数

$ajax({
  type: "post",
  url: "http://www.liulongbin.top:3006/api/addbook",
  data: {
    author: "aaaaa",
    bookname: "zzzzz",
    publisher: "ass阿萨德"
  },
  success: function (res) {
    console.log(res);
  }
});

封装方法

function $ajax(obj) {


  // 0.  无论 GET / POST ，需要对data数据进行加工：字符串，进行编码！
  let data = obj.data;
  let str = "";
  for (let key in data) {
    let val = data[key];
    str += `${key}=${val}&`;
  }
  str = str.substring(0, str.length - 1);
  str = encodeURI(str);


  // 1.xhr 实例化
  let xhr = new XMLHttpRequest();

  // 2.准备请求方式和url地址；区分: get与Post
  // 3.发送数据，执行发送请求！
  if (obj.type == "get" || obj.type == "GET") {
    xhr.open(obj.type, obj.url + "?" + str);
    xhr.send(null)
  }
  // POST
  else if (obj.type == "post" || obj.type == "POST") {
    xhr.open(obj.type, obj.url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(str);
  }


  // 4.注册状态变化事件
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let result = xhr.responseText; // JSON格式字符串
      result = JSON.parse(result); // JSON转化

      // 结果如何在 success里面 打印？传参！
      obj.success(result);
    }
  }






}











// ****************************************************************************************

补充：将对象转换为键=值&键=值&键=值

let opts = {
  id: 1,
  name: "张三",
  age: 18
};


// 步骤：
//     1. "id=3" 字符串里面：出现键 和 值; 
//        键值 同时出现？  for in
//        每一对： `${key}=${val}`  拼接出来

//    2.  每对字符串 加在一起！再次拼接为一个大字符串；
let str = '';
for (let key in opts) {
  let val = opts[key];
  str += (`${key}=${val}&`);
}
console.log(str);
//    3.  最后拼接后字符串，末尾多了一个&; 不是数组！字符串的截取！
//        开始下标,截取下标；  包左不包右
str = str.substring(0, str.length - 1);
console.log(str);    //id=1&name=张三&age=18







// 自己的方法数组
// 步骤：
//     1. "id=3" 字符串里面：出现键 和 值; 
//        键值 同时出现？  for in
//        每一对： `${key}=${val}`  拼接出来

//    2.  每对字符串加到数组里
let arr = [];
for (let key in opts) {
  let val = opts[key];
  arr.push(`${key}=${val}`);
}
console.log(arr);
// 把数组分割成字符串
let newarr = arr.join('&')
console.log(newarr); //id=1&name=张三&age=18