538day(ajax-fn2.html)

AJAX请求详解

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

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

0 ·

CC 4.0 BY-SA版权

本文介绍了三种不同版本的AJAX函数实现方式，包括GET和POST请求的处理方法，并演示了如何传递参数以及设置请求头等内容。通过示例展示了如何使用这些函数进行实际的数据请求。

《2019年3月26日》【连续 538天】

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

  // ## version 1 =======================================
    // function ajax (method, url, params) {
    //   var xhr = new XMLHttpRequest()
    //   xhr.open(method, url)
    //   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

    //   params = params || null

    //   xhr.send(params)
    //   xhr.onreadystatechange = function () {
    //     if (this.readyState !== 4) return
    //     console.log(this.responseText)
    //   }
    // }

    // // ## version 2 ========================================
    // function ajax (method, url, params) {
    //   var xhr = new XMLHttpRequest()

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

    //   xhr.open(method, url)

    //   var data = null
    //   if (method === 'POST') {
    //     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    //     data = params
    //   }

    //   xhr.send(data)
    //   xhr.onreadystatechange = function () {
    //     if (this.readyState !== 4) return
    //     console.log(this.responseText)
    //   }
    // }

    // // ## version 3 ========================================
    // function ajax (method, url, params) {
    //   var xhr = new XMLHttpRequest()

    //   // 将 object 类型的参数转换为 key=value&key=value
    //   if (typeof params === 'object') {
    //     var tempArr = []
    //     for (var key in params) {
    //       var value = params[key]
    //       tempArr.push(key + '=' + value)
    //     }
    //     // tempArr => [ 'key1=value1', 'key2=value2' ]
    //     params = tempArr.join('&')
    //     // params => 'key1=value1&key2=value2'
    //   }

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

    //   xhr.open(method, url)

    //   var data = null
    //   if (method === 'POST') {
    //     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    //     data = params
    //   }

    //   xhr.send(data)
    //   xhr.onreadystatechange = function () {
    //     if (this.readyState !== 4) return
    //     console.log(this.responseText)
    //   }
    // }

    // ajax('GET', 'time.php', { id: 1 })
    // ajax('POST', 'add.php', { key1: 'value1', key2: 'value2' })
    // ajax('POST', 'add.php', 'key1=value1')