如何封装自己的Ajax函数

落日映苍穹つ 2024-04-01 18:43 88阅读 0赞

#### 封装Ajax函数 ####

*  一、要实现的效果

--------------------

## 一、要实现的效果 ##

![在这里插入图片描述][30207e0483f34af0b3f970c10ace2f0a.png]

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

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

> 需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：  
> ![在这里插入图片描述][8ce6340ee67042708ccd9f5882d2cfd1.png]

![在这里插入图片描述][6064a7788023447e908da1aeae08a03d.png]  
![在这里插入图片描述][289abde2e1bd4c7a88e104bc9fd41e8d.png]

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)
    
    function itheima(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)
      }
    
      xhr.onreadystatechange = function () {
        
        if (xhr.readyState === 4 && xhr.status === 200) {
        
          var result = JSON.parse(xhr.responseText)
          options.success(result)
        }
      }
    }

[30207e0483f34af0b3f970c10ace2f0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/af9e3462f2df4494871bd322bc7cf15f.png
[8ce6340ee67042708ccd9f5882d2cfd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d80f47e2354b4316a71e6bd507103250.png
[6064a7788023447e908da1aeae08a03d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c8cfb4b8212f445783a4ff64d9768759.png
[289abde2e1bd4c7a88e104bc9fd41e8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0f2cf68267c3487b9dd827de08f3038a.png