目录
ajax 方法实现步骤
ajax 是一种前后端交互的方法,有固定的方法和步骤;
a :async 异步
j :JavaScript 脚本语言
a :and 和
x :xml 严格的 html 格式
1. 创建 ajax 对象
// xhr 就是创建出来的 ajax 对象,可以发送一个请求
var xhr = new XMLHttpRequest()
2. 配置请求信息
/*
语法: xhr.open('请求方式', '请求地址', 是否异步)
=> 请求方式: 'GET', 'POST'
=> 请求地址: 基准地址 + 接口地址
=> 是否异步: 选填,默认是异步
*/
xhr.open('GET', 'url...')
3. 发送请求信息
xhr.send()
4. 配置请求完成事件
/*
语法: xhr.onload = function () { ... }
触发:请求完成以后触发(后端给回对应的响应)
响应数据:
=> 在 ajax对象 内有一个 responseText 成员
=> 请求完成后 responseText 中就是响应数据
*/
xhr.onload = function () {
console.log(xhr.responseText)
}
ajax 状态码
用一个数字来描述当前这个 ajax 处于什么步骤;
1. 语法
+ ajax对象.readyState
+ 得到:当前 ajax 状态码
const xhr = new XMLHttpRequest()
console.log(xhr.readyState)
2. 意义
0 : 表示创建 ajax 对象成功
1 : 表示配置请求信息成功
2 : 表示请求已经发送出去,并且响应已经到了浏览器
3 : 浏览器正在解析响应报文,并且把真实响应体内容逐步赋值给 xhr 的 responseText
4 : 浏览器解析完成,xhr 对象内已有完整响应体
3. 事件
+ xhr.onreadystatechange = function () {}
+ 当 ajax 状态码改变的时候触发
xhr.onreadystatechange = function () {
console.log(xhr.readyState)
}