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

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

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

用法：

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)
            })
        }