js 封装 ajax

最新推荐文章于 2023-09-20 10:27:08 发布

菜鸟zero队

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量259

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43074269/article/details/106383365

版权

话不多说，直接上最全代码【看代码之前，一定要看思路，代码有注释，很详细】
思路：

先将 ajax 请求数据的基本步骤实现，也就是，实例化，发起请求，发送，处理数据；
首先判断请求的方式是get ，还是 post；
根据请求方式，处理参数，get 方式，要求的数据格式：属性名称=属性值&属性名称=属性值，通过？连接请求地址。post 方式，要求的数据格式为 json：{ “name”: “zhangsan”, “age”: 14 }。如果是post 请求，那就要将json 格式，转化成 json字符串，使用 JSON.stringify（）。
请求之后，判断服务器返回的数据格式，是不是标准版的 json 数据格式。
如果用户没有传递任何数据，那么要给他一个默认值，就是 defaults ,之后，用对象方法：object.assign(defaults, obj) ，用 obj 【客户端传递的数据】覆盖默认的数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax 封装</title>
</head>
<body>
  
</body>
<script>
  // 定义一个函数，用来发送 ajax 数据请求
  function ajax(obj) {
    // 定义一个默认值,如果用户不传递数据，就用 defaults
    var defaults = {
      type:'get',
      url: '',
      data: {},
      header:{
        'Content-Type': 'application/x-www-from-urlcoded'
      }
    }
    // 用户传递数据，则用 obj 覆盖 defaults
    Object.assign(defaults, obj) 

    // 实例 ajax
    var xhr = new XMLHttpRequest()
    // 先将传递的参数，转化成字符串形式
    var params = '';
    // 循环用户传进来的参数的对象
    for(var item in defaults.data) {
      params += item + '=' +defaults.data[item] + '&'
    }
    // console.log(params) // 最后会多出一个 &
    params = params.slice(0,params.length-1)
    // console.log(params)
    // 接下来，判断请求的方式
    if (defaults.type == 'get') {
      defaults.url = defaults.url + '?' + params
    }
    xhr.open(defaults.type, defaults.url)

    if(defaults.type == 'post') {
      var contentType = defaults.header['Content-Type']
      // 如果是post请求，就要设置请求数据的格式为 json
      xhr.setRequestHeader('Content-Type', contentType)
      if (contentType == 'application/json') {
        xhr.send(JSON.stringify(defaults.data))
      }else{
        xhr.send(params)
      }  
    }else {
      xhr.send()
    }
    // 配置 ajax 对象
    // xhr.open(obj.type,obj.url)
    // 发送请求
    // xhr.send()
    // 接收数据的返回
    xhr.onload = function(){
      console.log(xhr.responseText)
      var responseText = xhr.responseText
      // 判断返回的数据是不是 json 格式
      // 先获取到数据格式，判断是不是 application/json
      var contentType = xhr.getResponseHeader('Content-Type')
      if (contentType.includes('application/json')) {
        responseText = JSON.parse(responseText)
      }
      // 成功之后，调用 seccess 属性方法
      if (xhr.status == 200) {
        obj.success(responseText)
      }else{
        obj.error(responseText)
      }
    }
  }
  /*
  请求参数的传递需要注意的事项
    1.get请求方式，就将参数放在请求地址后面
    2.post 请求方式，要将请求的参数，放在请求体当中，也就是 send（）里面
    3.请求参数的数据格式
        1.格式为： application/x-www-form-urlencoded ,这是一般的网站和 get 方式发送请求的格式
                  属性名称=属性值&属性名称=属性值
                  name=zhangsan&age=14
        2.格式为：application/json ,就是 json 格式的数据，是 post 请求的参数格式
                  {'name':'zhangsan', 'age':14}
  */
  ajax({
    type: 'post',
    url: 'http://localhost:3000/postData',
    data: {
      'name':'zhangsan',
      'age':14
    },
    header: {
      'Content-Type':'application/json'
    },
    success: function(data){
      console.log(data)
    },
    error: function(){
      console.log('数据请求失败！')
    }  
  })
</script>
</html>