XMLHttpRequest发送网络请求的基本使用,和封装自己的ajax

1,233 阅读2分钟

XMLHttpRequest

XMLHttpRequest是浏览器内置的一个构造函数

作用: 基于new出来的XMLHttpRequest实例对象,可以发起ajax请求

XMLHttpRequest的基本使用

用法:

1. 使用XMLHttpRequest发起GET请求(不带参数)

代码示例:

// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 调用open函数填写请求方式和url地址
xhr.open('GET', 'http://*****')
// 调用send函数发送请求
xhr.send()
// 监听load事件,响应请求后的结果
xhr.addEventListener('load', function (
    console.log(this.response)
})

2. 使用XMLHttpRequest发起GET请求(带参数)

代码示例:

// 创建一个XMLHttpRequest
let xhr = new XMLHttpRequest()
// 设置请求方式和地址和参数
xhr.open('GET', 'http://xxxxx?name=xxx&sex=xx')
// 发送请求
xhr.send()
// 监听load事件
xhr.addEventListener('load', function () {
    console.log(this.response);
})

3. 使用XMLHttpRequest发送post请求(有请求体)

由于post请求要带请求体,请求体有三种格式,为了方便服务器接收数据,当提交请求时,需要指定一个叫做Content-Type的请求头

请求体格式:

  1. 参数=值&参数=值

    代码示例:

     const data = {
           name: 'xxx',
           age: xx,
           ...
            }
    
    // 创建一个XMLHttpRequest对象
    let xhr = new XMLHttpRequest()
    
    // 设置请求方式和请求地址
    xhr.open('POST', 'http://XXXX')
    // 创建一个URLSearchParams对象吧data数据转换成 参数=值&参数=值格式
    const usp = new URLSearchParams(data)
    const query = usp.toString()
    
    // 设置对应的content-type
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    
    // 发送请求
    xhr.send(query)
    
    // 监听load 响应请求获取响应结果
    xhr.addEventListener('load', function () {
        console.log(this.response)
    })
    
  2. json格式传参

    代码示例:

    const data = {
        name: 'xxx',
        age: xx,
        ...
    }
    
    // 创建一个XMLHttpRequest对象
    let xhr = new XMLHttpRequest()
    
    // 设置请求方式和请求地址
    xhr.open('POST', 'http://XXXX')
    
    // 利用JSON.stringify()把数据转换成JSON格式的
     const str = JSON.stringify(data)
    // 设置对应的content-type
    xhr.setRequestHeader('Content-type', 'application/json')
    
    // 发送请求
    xhr.send(str)
    
    // 监听load 响应请求获取响应结果
    xhr.addEventListener('load', function () {
         console.log(this.response)
    })
    
  3. new ForData()格式

    const data = {
                name: 'xxx',
                age: xx,
                ...
            }
    
    // 创建一个XMLHttpRequest对象
    let xhr = new XMLHttpRequest()
    
    // 设置请求方式和请求地址
    xhr.open('POST', 'http://XXXX')
    // 创建一个FormData对象,把数据变成FormData 格式
    const formdata = new FormData(data)
    
    // 设置对应的content-type (可以不设置)
    xhr.setRequestHeader('Content-type', 'application/form-data')
    
    // 发送请求
    xhr.send(formdata)
    
    // 监听load 响应请求获取响应结果
    xhr.addEventListener('load', function () {
        console.log(this.response)
    })
    

利用XMLHttpRequest来封装自己的ajax

function ajax ({ url, type, data = '', success }) {
            // 创建一个XMLHttpRequest对象
            const xhr = new XMLHttpRequest()
            // 判断type请求方式
            if (type === 'get') {
                // 判断data的数据类型转换成字符串
                if (typeof data === "object") {
                    data = (new URLSearchParams(data)).toString()
                }
                // 设置请求方式和请求地址
                xhr.open(type, url + '?' + data)
                // 发送请求
                xhr.send()
            } else if (type === 'post') {
                // 设置请求方式和请求地址
                xhr.open(type, url)
                // 判断数据是不是字符串
                if (typeof data === "string") {
                    // 设置对应的content-type
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhr.send(data)
                } else if (typeof data === "object") {
                    if (data instanceof FormData) {
                        xhr.send(data)
                    } else {
                        xhr.setRequestHeader('Content-type', 'application/json')
                        const str = JSON.stringify(data);
                        console.log(typeof str)
                        xhr.send(str)
                    }
                }
            }
    // 监听load 获取响应结果
            xhr.addEventListener('load', function () {
                // 把json格式的数据转换成对象
                const obj = JSON.parse(this.response)
                // 就是返回结果
                success(obj)
            })
        }