1.什么是 XMLHttpRequest
是浏览器内置的一个构造函数 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR）异步操作 封装出来的！ 请大家思考：我们能否不用 axios 封装的 Ajax 函数，直接基于 XMLHttpRequest 发起 Ajax 请求？ 答案：完全可以！
2.使用 XMLHttpRequest 发起 GET 请求
主要的 4 个实现步骤： 1、创建 xhr 对象 2、调用 xhr.open() 函数 相当于报文的请求行 3、调用 xhr.send() 函数 相当于报文的请求体 4、监听 load 事件 服务器返回给客户端的数据格式是json格式字符串 , 所以需要JSON.parse()
// 1、创建 xhr 对象
let xhr = new XMLHttpRequest();
// 2、调用 **xhr.open()** 函数
xhr.open('GET', 'http://xxx.com/api/xx');
// 3、调用 **xhr.send()** 函数 get方式没有请求体
xhr.send();
// 4、监听 load 事件 load事件，也可以放到 前面
xhr.addEventListener('load', function () {
console.log(JSON.parse(this.response)); // 服务器响应给客户端
})原生方式发起get无参请求和有参
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
// 1.创建异步对象
let xhr = new XMLHttpRequest()
// 2.使用异步对象发起请求:准备好请求报文
// 2.1 请求行：请求方式和请求url，通过open方法可以设置请求行
xhr.open('get', 'http://www.itcbc.com:3006/api/getbooks')
// 如果需要带参数，则需要在url拼接：
// xhr.open('get', 'http://www.itcbc.com:3006/api/getbooks?id=12163')
// 2.2 请求头: 编码格式,get方式不需要设置请求头，因为get方式的参数只能在url拼接，它有默认的编码格式：UTF-8
// 2.3 请求体：传递给服务器的参数,get方式的参数应该在url中拼接，所以get方式没有请求体，但是也需要调用send方法，可以不传递参数或者传递null
xhr.send(null)
// 3.使用异步对象接收响应
// xhr.response：就是响应体
// 当响应完成了，数据可以使用了，就会自动的触发一个load事件,在这个事件中就可以正确的获取到服务器的响应数据
xhr.addEventListener('load', function() {
// 如果不出意外，服务器返回给客户端的数据格式是json格式字符串
console.log(JSON.parse(xhr.response), typeof JSON.parse(xhr.response))
})
})发起 Ajax 请求的核心对象是
XMLHttpRequest通过
load事件 、xhr.response(响应体) 拿到服务器响应回来的数据URL参数，只能拼接在 URL 地址 后面
请求体，放到 send() 里面 如： send(请求体)
细节：
1、get方式没有请求体，但是也需要调用send方法，可以不传递参数或者传递null
2、当响应完成了，数据可以使用了，就会自动的触发一个load事件,在这个事件中就可以正确的获取到服务器的响应数据
3、如果不出意外，服务器返回给客户端的数据格式是json格式字符串
提交请求体数据，需指定Content-Type头
当需要提交请求体数据时，需要在 xhr.open() 之后，调用 xhr.setRequestHeader() 函数，指定请求体的编码格式
let xhr = new XMLHttpRequest();
xhr.addEventListener('load', function () {
console.log(this.response);
})
// 将请求参数拼接到url后面
xhr.open('POST', 'http://www.itcbc.com/api/post');
// 根据请求体格式的不同，需设置对应的Content-Type头
xhr.setRequestHeader('Content-Type', '值')
xhr.send('username=zs&age=20');原生方式发起post方式请求
细节：
1、参数不可在url传递，只能在send()请求体设置
2、一定要设置请求头setRequestHeader（），并且设置的请求头格式要对应你传递什么格式的参数
3、传递参数格式是 key=value&key=value，如果是对象则需要转换json格式，请求头格式也需要相同更换
let btnadd = document.querySelector('.btnadd')
let bookname = document.querySelector('[name="bookname"]')
let author = document.querySelector('[name="author"]')
let publisher = document.querySelector('[name="publisher"]')
btnadd.addEventListener('click', function() {
// 收集数据
let booknameV = bookname.value
let authorV = author.value
let publisherV = publisher.value
// 创建异步对象
let xhr = new XMLHttpRequest()
// 发起请求
// 请求行:post不能在请求行中拼接参数，否则相当于没有传递
xhr.open('post', 'http://www.itcbc.com:3006/api/addbook')
// 请求头:post方式传递普通键值对，需要设置Content-type编码格式，否则后台无法正确的获取到参数
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// json格式，上面的是字符串格式
xhr.setRequestHeader('Content-Type', 'application/json')
// 请求体，参数格式与get一样，除非你进行其它的处理
// xhr.send(`bookname=${booknameV}&author=${authorV}&publisher=${publisherV}`)
// 需要对象方式提交，则需要转换JSON，否则会报错，请求头也需要更换json
xhr.send(
JSON.stringify({
bookname: booknameV,
author: authorV,
publisher: publisherV
})
)
// 接收响应
xhr.addEventListener('load', function() {
console.log(JSON.parse(xhr.response))
})
})为了方便服务器接收数据，当提交请求体时，需要指定一个叫做 Content-Type 的请求头
| 请求体格式 | Content-Type | 是否需要在代码中指定 |
|---|---|---|
| 参数=值&参数=值 | application/x-www-form-urlencoded | 是 |
| '{ "id": 1, "name": "zs" }' | application/json | 是 |
| new FormData() | multipart/form-data; xxxxxxxxx随机字符 | 否，浏览器自动设置 |
使用axios就不用关心这个请求头了，因为axios已经帮我们处理好了加请求头这件事，不过写原生代码，就需要自己指定了