AJAX onreadystatechange事件详解
编程小白也能理解的完整指南
AJAX是什么？
AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术：
- 无需重新加载整个页面即可更新部分网页内容
- 异步与服务器交换数据（异步意味着不会阻塞用户操作）
- 使用XMLHttpRequest对象（简称XHR）与服务器通信
生活化比喻理解AJAX
想象你在餐厅点餐（网页）：
- 传统方式：每次点餐都需要把整桌菜撤掉，然后重新上所有菜（重新加载整个页面）
- AJAX方式：只需要告诉服务员你要加什么菜（发送请求），服务员去厨房拿（服务器处理），然后把新菜端上来（页面局部更新）
XMLHttpRequest对象
这是AJAX的核心对象，用于与服务器交换数据：
var xhr = new XMLHttpRequest(); // 创建XHR对象
xhr.open(‘GET’, ‘data.txt’, true); // 配置请求 (方法, URL, 异步)
xhr.send(); // 发送请求
xhr.open(‘GET’, ‘data.txt’, true); // 配置请求 (方法, URL, 异步)
xhr.send(); // 发送请求
XHR对象有几个重要属性：
- readyState – 请求的状态（0到4）
- status – 服务器返回的状态码（如200表示成功）
- responseText – 服务器返回的文本数据
onreadystatechange事件详解
这是AJAX的核心事件处理器，用于监听XHR对象状态的变化：
基本原理
- 每当XMLHttpRequest对象的readyState属性发生变化时
- 浏览器就会自动调用onreadystatechange事件处理函数
- 我们需要在这个函数中检查请求状态并处理响应
生活化比喻
把AJAX请求比作送快递：
- readyState：快递状态（已下单、已发货、运输中、派送中、已签收）
- onreadystatechange：每当快递状态变化时的通知
- 你的代码：收到通知后检查快递状态并决定做什么
// 创建XHR对象
var xhr = new XMLHttpRequest();
// 设置onreadystatechange事件处理函数
xhr.onreadystatechange = function() {
// 当请求完成且成功时
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理服务器返回的数据
document.getElementById(“result”).innerHTML = xhr.responseText;
}
};
var xhr = new XMLHttpRequest();
// 设置onreadystatechange事件处理函数
xhr.onreadystatechange = function() {
// 当请求完成且成功时
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理服务器返回的数据
document.getElementById(“result”).innerHTML = xhr.responseText;
}
};
readyState的五种状态
| 值 | 状态 | 说明 |
|---|---|---|
| 0 | UNSENT | 请求未初始化（还未调用open()方法） |
| 1 | OPENED | 已建立服务器连接（已调用open()但未调用send()） |
| 2 | HEADERS_RECEIVED | 请求已接收（已收到响应头部） |
| 3 | LOADING | 正在处理请求（响应体正在下载中） |
| 4 | DONE | 请求已完成，且响应已就绪（整个响应已下载完成） |
重要提示
在大多数情况下，我们只关心readyState=4（请求完成）的状态，但要特别注意：
- 请求完成并不等于请求成功！
- 必须同时检查status属性是否为200（表示成功）
- 其他常见状态码：404（未找到），500（服务器错误）
完整AJAX请求流程
- 创建XMLHttpRequest对象：var xhr = new XMLHttpRequest();
- 设置onreadystatechange事件处理函数
- 调用open()方法配置请求：xhr.open(“GET”, “data.txt”, true);
- 调用send()方法发送请求：xhr.send();
- 在onreadystatechange函数中处理响应
完整代码示例
// 1. 创建XHR对象
var xhr = new XMLHttpRequest();
// 2. 设置状态变化回调函数
xhr.onreadystatechange = function() {
// 检查请求是否完成
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 成功 – 处理数据
console.log(“成功获取数据:”, xhr.responseText);
} else {
// 请求出错
console.error(“请求失败! 状态码:”, xhr.status);
}
}
};
// 3. 配置请求（GET方法，请求data.txt，异步）
xhr.open(“GET”, “data.txt”, true);
// 4. 发送请求
xhr.send();
var xhr = new XMLHttpRequest();
// 2. 设置状态变化回调函数
xhr.onreadystatechange = function() {
// 检查请求是否完成
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 成功 – 处理数据
console.log(“成功获取数据:”, xhr.responseText);
} else {
// 请求出错
console.error(“请求失败! 状态码:”, xhr.status);
}
}
};
// 3. 配置请求（GET方法，请求data.txt，异步）
xhr.open(“GET”, “data.txt”, true);
// 4. 发送请求
xhr.send();
常见问题与最佳实践
什么时候设置onreadystatechange？
建议在调用open()方法之前就设置好事件处理函数，以确保能捕获所有状态变化。
为什么readyState=4时还要检查status？
因为readyState=4只表示请求完成，但请求可能失败（如404页面不存在）。status=200才表示请求成功。
现代替代方案：onload事件
现代浏览器支持更简洁的onload事件，它只在请求成功完成时触发：
xhr.onload = function() {
if (xhr.status === 200) {
// 处理响应数据
}
};
if (xhr.status === 200) {
// 处理响应数据
}
};
错误处理
除了检查status，还可以添加onerror事件处理网络错误：
xhr.onerror = function() {
console.error(“网络请求出错！”);
};
console.error(“网络请求出错！”);
};
AJAX请求演示
点击按钮模拟从服务器获取数据：
这里将显示从服务器获取的数据…