ajax请求函数的封装

最新推荐文章于 2022-06-21 10:07:36 发布

天马行空zqzq

最新推荐文章于 2022-06-21 10:07:36 发布

阅读量144

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/105538952

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 返回数据问题</title>
</head>
<body>
  <script>
    function ajax (method, url, params, done) {
      //可能method用户输入的是小写
      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)
        }
        //tempArr里面的键值对用&分隔开
        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
        //onreadystatechange是一个事件，不知道它啥时候被触发，所以不能有返回值，只能用回调函数接收返回值
        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>
</body>
</html>