一、Ajax 核心概念
Ajax（Asynchronous JavaScript and XML）是一种异步通信技术，核心特点：
无刷新更新：无需重新加载整个页面
异步处理：后台发送/接收数据不阻塞用户
数据格式：支持 XML/JSON/HTML/纯文本
应用场景：表单验证、实时搜索、无限滚动等
二、XMLHttpRequest 工作流程
三、代码解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 实战</title>
</head>
<body>
<div id="saze"></div>
<script>
// 1. 创建XHR对象
const xhr = new XMLHttpRequest();
// 2. 配置请求（GET异步）
xhr.open(
"GET",
"https://mock.mengxuegu.com/mock/67da2f89b3f51e45c0f7bfb1/data_copy/sa",
true
);
// 3. 发送请求（GET无需参数）
xhr.send();
// 4. 事件监听（推荐使用onload）
xhr.onload = function() {
// 状态码200表示成功
if (xhr.status === 200) {
try {
// 5. 解析JSON数据
const pageData = JSON.parse(xhr.responseText);
// 6. 获取DOM容器
const container = document.getElementById('saze');
// 7. 高效DOM操作（减少重绘）
let htmlContent = '';
pageData.data.admain.forEach(user => {
htmlContent += `用户名：${user.username} 密码：${user.password}<br>`;
});
container.innerHTML = htmlContent;
} catch (e) {
console.error("JSON解析失败:", e);
}
} else {
console.error(`请求失败，状态码：${xhr.status}`);
}
};
// 8. 错误处理（网络层）
xhr.onerror = function() {
alert("网络请求发生错误");
};
</script>
</body>
</html>四、关键点详解
1.XMLHttpRequest 生命周期
readyState状态码：0：未初始化
1：open() 已调用
2：send() 已调用
3：接收响应中
4：响应完成（需在此处理数据）
2.HTTP 状态码处理
200：成功
201：创建成功
400：客户端错误
401：未授权
404：资源不存在
500：服务器错误
六、常见问题排查
跨域错误：检查服务端CORS配置
状态码0：通常是网络断开或跨域限制
解析错误：确保响应是合法JSON
未触发回调：检查
readyState和status条件