ajax请求封装函数

• 写封装函数的套路

1.先写出这个函数原来的基本用法

2.写一个没有形参空函数，将上一步的代码直接作为函数体，

3.根据使用过程中，抽象出来需要变的东西作为形参

function ajax (method, url, params, fun) {
      method = method.toUpperCase()            //在传入method的时候可以忽略大小写
      var xhr = new XMLHttpRequest()

      if (typeof params === 'object') {        //如果在地址传入的东西是一个对象，我们将它的格式转化为urlencoded
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + '=' + value)
        }
        params = tempArr.join('&') //===>这里的格式就为parsms=[key1=value&key2=value2]
      }

      if (method === 'GET') {
        url += '?' + params
      }

      xhr.open(method, url, false)

      var data = null
      if (method === 'POST') {    //如果请求的方式为POST，需要手动设置请求头的Content-Type
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        data = params
      }

      xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return
        
        // console.log(this.responseText)  //这里可以得到响应体，但是后面要处理的内容应该根据使用者的需要来处理
      
        fun(this.responseText)
      }

      xhr.send(data)
    }

    // 调用者
    // ============================

    var fun = function (res) {
    console.log(res);
    }

    ajax('get', 'test.php', {}, fun)

 

转载于:https://www.cnblogs.com/xxm980617/p/10460106.html