JavaScript:Ajax(异步通信技术)

一、Ajax 核心概念

Ajax(Asynchronous JavaScript and XML)是一种异步通信技术,核心特点:

  1. 无刷新更新:无需重新加载整个页面

  2. 异步处理:后台发送/接收数据不阻塞用户

  3. 数据格式:支持 XML/JSON/HTML/纯文本

  4. 应用场景:表单验证、实时搜索、无限滚动等

二、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:服务器错误

六、常见问题排查

  1. 跨域错误:检查服务端CORS配置

  2. 状态码0:通常是网络断开或跨域限制

  3. 解析错误:确保响应是合法JSON

  4. 未触发回调 :检查readyStatestatus条件

相关推荐
艾小码16 分钟前
前端别再乱存数据了!这3种存储方案让你的应用快如闪电
前端·javascript
黄毛火烧雪下16 分钟前
HTML 的底层原理
前端·html
球球和皮皮18 分钟前
Babylon.js学习之路《添加自定义摇杆控制相机》
javascript·3d·前端框架·babylon.js
Moment19 分钟前
面经分享——字节前端一面
前端·javascript·面试
十步杀一人_千里不留行2 小时前
Google 登录集成教程(Web + Expo 移动端)
前端
gAlAxy...5 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁5 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖5 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响7 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL7 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统