根据XHR封装一个自己的Ajax

  /**
   * 处理data参数
   * @param {data} 需要发送到服务器的数据
   * @return {string} 返回拼接好的查询字符串 name=zs&age=28
   */

  function resolveData(data) {
    let arr = []
    for (let k in data){
      arr.push(k + '=' + data[k])
    }
    return arr.join('&')
  }

  let obj = {
    name:'莫德里奇',
    work:'中场',
    num:10
  }
  console.log(resolveData(obj));

  // 反向操作也可以把查询字符串 转成对象  成就达成
  let str_ = 'name=zs&age=28&nickname=法外狂徒'
  function fData(str) {
      let arr = str.split('&')
      let obj = {}
      arr.forEach(function (value) {
        let arr_ = value.split('=')
        obj[arr_[0]] = arr_[1]
      })
    return obj
  }
  console.log(fData(str_));


  function myAjax(options) {
    //初始化参数 把data 转化为 查询字符串
    let data = resolveData(options.data)
    //1、创建xhr对象
    let xhr = new XMLHttpRequest()
    //2、调用open函数 指定请求方式和URL地址
    if (options.method === 'GET'){
      xhr.open(options.method,options.url+'?'+data)
      xhr.send()
    }else {
      xhr.open(options.method,options.url)
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
      xhr.send(data)
    }
    xhr.onreadystatechange = function () {
      // 4.1 监听xhr 对象的请求状态 readyState 和服务器的相应状态 status 固定写法 这里的status 和 res 返回的不是同一个
      if (xhr.readyState === 4 && xhr.status === 200){
        // 4.2 打印服务器相应回来的数据 responseText
        let  res = JSON.parse(xhr.responseText)
        //JSON.parse() 将JSON字符 转换成 对象数据
        options.success(res) // 把数据返回给参数的回调函数
      }
    }
  }


  myAjax({
    method:'GET',
    url:'http://www.liulongbin.top:3006/api/getbooks',
    data:{id:1},
    success:function (res) {
      console.log(res)
    }
  })

  myAjax({
    method:'POST',
    url:'http://www.liulongbin.top:3006/api/addbook',
    data:{
      bookname:'仙逆',
      author:'耳根',
      publisher:'仙罡大陆'
    },
    success:function (res) {
      console.log(res)
    }
  })