JavaScript：Ajax（异步通信技术）

一只小风华~2025-08-04 13:37

一、Ajax 核心概念

Ajax（Asynchronous JavaScript and XML）是一种异步通信技术，核心特点：

无刷新更新：无需重新加载整个页面
异步处理：后台发送/接收数据不阻塞用户
数据格式：支持 XML/JSON/HTML/纯文本
应用场景：表单验证、实时搜索、无限滚动等

二、XMLHttpRequest 工作流程

三、代码解析

html 复制代码

<!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条件