AJAX---基本的封装

Posted 2020-11-25 jane_panyiyun

基本的封装

• 函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。
• 将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

 

    封装：

    1. 写一个相对比较完善的用例

    2. 写一个空函数，没有形参，将刚刚的用例直接作为函数的函数体

    3. 根据使用过程中的需求抽象参数

 

 

AJAX 请求封装

    /**
    * 发送一个 AJAX 请求
    * @param {String} method 请求方法
    * @param {String} url 请求地址
    * @param {Object} params 请求参数
    * @param {Function} done 请求完成过后需要做的事情（委托/回调）
    */

 

  <script>
    // 封装者=============================
    function ajax(method, url, params, done) {
      method = method.toUpperCase()
      var xhr = new XMLHttpRequest()
      if (typeof params === ‘object‘) {
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + ‘=‘ + value)
        }
        params = tempArr.join(‘&‘)
      }
      if (method === ‘GET‘) {
        url += ‘?‘ + params
      }
      xhr.open(method, url, false)
      var data = null
      if (method === ‘POST‘) {
        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘)
        data = params
      }
      xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return
        // 不应该在封装的函数中主观的处理响应结果
        // console.log(this.responseText)
        // 你说我太主观，那么你告诉我应该做什么
        done(this.responseText)
      }
      xhr.send(data)
    }

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

    var onDone = function (res) {
      console.log(‘hahahahaha‘)
      console.log(‘hohohohoho‘)
      console.log(res)
      console.log(‘做完了‘)
    }
    ajax(‘get‘, ‘time.php‘, {}, onDone)
  </script>

 

 

function ajax(method, url, params, done) {
      // 统一转换为大写便于后续判断
      method = method.toUpperCase()
      // 对象形式的参数转换为 urlencoded 格式
      var pairs = []
      for (var key in params) {
        pairs.push(key + ‘=‘ + params[key])
      }
      var querystring = pairs.join(‘&‘)
      var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
        ActiveXObject(‘Microsoft.XMLHTTP‘)
      xhr.addEventListener(‘readystatechange‘, function () {
        if (this.readyState !== 4) return
        // 尝试通过 JSON 格式解析响应体
        try {
          done(JSON.parse(this.responseText))
        } catch (e) {
          done(this.responseText)
        }
      })
      // 如果是 GET 请求就设置 URL 地址 问号参数
      if (method === ‘GET‘) {
        url += ‘?‘ + querystring
      }
      xhr.open(method, url)
      // 如果是 POST 请求就设置请求体
      var data = null
      if (method === ‘POST‘) {
        xhr.setRequestHeader(‘Content‐Type‘, ‘application/x‐www‐form‐urlencoded‘)
        data = querystring
      }
      xhr.send(data)
    }