539day(ajax-fn3.html)

最新推荐文章于 2024-09-10 10:09:51 发布

原创最新推荐文章于 2024-09-10 10:09:51 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的AJAX封装方法及其实现过程。通过该封装，可以轻松地发起GET请求并处理服务器返回的数据。示例代码展示了如何定义一个通用的AJAX函数以及如何调用它来获取服务器时间。

《2019年3月27日》【连续 539天】

标题：ajax-fn3.html；
内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 返回数据问题</title>
</head>
<body>
  <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>
</body>
</html>