【Ajax】- 封装自己的 ajax 函数

封装一个名为 itheima 的 Ajax 函数，调用它可以发起 GET 或 POST 请求：

let btn = document.querySelector('button')
btn.addEventListener('click', function() {
// 使用自己封装的工具函数发请求和处理响应
  itheima({
      method: 'get',
      url: 'http://www.itcbc.com:3006/api/getbooks',
      success(res) {
          console.log(res);
      }
  })
})

// js文件 ------------------ 以下是封装ajax函数
function parseObjectToString(obj) {
  let arr = []
  for (let key in obj) {
    arr.push(key + '=' + obj[key])
  }
  return arr.join('&')
}

// option.method:请求方式
// option.url:请求地址
// option.params:url参数
// option.data:请求体参数
// success:请求成功之后的回调函数
function ajax({ method = 'get', url, params, data, success }) {
  // 1.创建异步对象
  let xhr = new XMLHttpRequest()
  // 2.使用异步对象发起请求
  // 2.1 设置请求行
  if (method.toLowerCase() == 'get' && params) {
    url += '?' + parseObjectToString(params)
  }
  xhr.open(method, url)
// 2.2 设置请求头
// 2.3 设置请求体
// instanceof:判断一个的构造函数是否是某个构造函数，意味着判断对象是否是某个构造函数创建的
  if (data && data instanceof FormData) {
// 说明传递了formdata ,不用设置请求头
// 因为formdata会对数据进行编码处理，所以我们不能再添加编码处理了，否则两者会冲突
    xhr.send(data)
  } else if (typeof data == 'object') {
    // 说明传递了一个对象
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.send(JSON.stringify(data))
  } else if (typeof data == 'string') {
    // 说明这里传递邓key=value&key=value
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(data)
  } else {
    xhr.send()
  }

  // 3.使用异步对象接收响应
  xhr.addEventListener('load', function() {
    // 调用用户传入的回调函数，且将后台的响应数据做为参数回传
    success(JSON.parse(xhr.response))
  })
}