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

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