ajax

目录

ajax 方法实现步骤

1. 创建 ajax 对象

2. 配置请求信息

3. 发送请求信息

4. 配置请求完成事件

ajax 状态码

1. 语法

2. 意义

3. 事件

---

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