538day(ajax-fn2.html)-优快云博客

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/88833043

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《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')