持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
XMLHttpRequest 的概念
XMLHttpRequest 是浏览器内置的一个构造函数。
axios 中的 axios.get() 、axios.post() 、axios() 方法，都是基于 XMLHttpRequest 封装的！
作用 ： 基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
XMLHttpRequest的使用
主要的 4 个实现步骤：
1. 创建 XMLHttpRequest 实例对象
- 语法 :
const xhr = new XMLHttpRequest()
2. 调用 open() 方法创建请求
- 语法 :
xhr.open('请求方式', '请求路径'...);
3. 调用 send() 发送请求
- 语法 :
xhr.send()
4. 监听 load 事件, 对响应数据做处理
- 语法 :
xhr.addEventListener('load', function() { })
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数
xhr.open('GET', '请求路径');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log(xhr.response);
});
复制代码
XMLHttpRequest 的常用方法
open() 方法 : 创建了 HTTP 请求
- 第一个参数是请求方式 (get, post)
- 第二个参数是 url 路径
- 第三个参数表示异步还是同步,布尔值( true表示异步,false表示同步,默认值true )
- 第四第五个参数一般不用写( 用于 HTTP 认证 )
setRequestHeader() 方法 : 用来设置请求头信息, post 请求才会用到 , get 请求不需要
- 第一个参数对应的是请求头字段 ( 例 : 'Content-type' )
- 第二个参数是请求头字段所对应的值 ( 例 : 'application/x-www-form-urlencoded' )
send() 方法 : 发送请求给服务器
- get 请求不需要填写参数
- post 请求把要提交的参数写里面
XMLHttpRequest 的常用属性
onreadystatechange : 请求状态改变的事件触发器( readyState 发生变化是调用 ),一般用于会回调
readyState : 请求状态, 总共有五种状态
- 0 : 未初始化
- 1 : open 方法调用
- 2 : 服务器应答客户请求
- 3 : 交互中, HTTP 头信息被接收, 响应数据未接收
- 4 : 数据接收完成
responseText : 服务器返回的文本内容
reponsseXML : 服务器返回的XML内容(兼容dom)
status : 服务器返回的状态码
statusText : 服务器返回状态码的文本信息
GET请求携带参数
GET请求参数直接放到路径的最末尾就可以！
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// 调用 xhr.open() 函数 -- get参数
xhr.open('GET', '请求路径?id=1&name=小掘');
// 调用 xhr.send() 函数
xhr.send();
// 监听 load 事件
xhr.addEventListener('load', function() {
console.log(xhr.response);
});
