JavaScript：Ajax（异步通信技术）
一、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条件