封装自己的Ajax函数

作者：@生活在北极的企鹅
本文为作者原创，转载请注明出处：https://www.cnblogs.com/BJQE/p/16215882.html

---

3.1 定义 options 参数选项

itheima( ) 函数是我们自定义的 Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性:

method   请求的类型
url       请求的URL地址
data    请求携带的数据
success 请求成功之后的回调函数

3.2、处理data参数

需要把 data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData虽数如下:

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

var res = resolveData({ name: 'zs', age: 20 })
console.log(res);

3.3、定义 itheima 函数

在 itheima( )函数中，需要创建xhr对象，并监听onreadystatechange事件:

function itnuima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数转换成查询字符串
  var qs = resolveData(options.data)

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var js = JSON.parse(xhr.responseText)
      options.success(js)
    }
  }
}

3.4、判断请求的类型

不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if... else...的判断:

function itnuima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数转换成查询字符串
  var qs = resolveData(options.data)

  if (options.method.toUpperCase === 'GET') {
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase === 'POST') {
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }
}

 3.5、测试

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

 

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。