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

相关推荐
destinying7 分钟前
当部分请求失败时,前端如何保证用户体验不崩溃?
前端·javascript·程序员
幼儿园技术家13 分钟前
Diff算法的简单介绍
前端
陈随易14 分钟前
为VSCode扩展开发量身打造的UI库 - vscode-elements
前端·后端·程序员
子壹16 分钟前
大文件分片上传
javascript·node.js
叁金Coder17 分钟前
业务系统跳转Nacos免登录方案实践
前端·javascript·nginx·nacos
蓝倾18 分钟前
京东商品销量数据如何获取?API接口调用操作详解
前端·api·fastapi
stoneship18 分钟前
满帮微前端
前端
GKDf1sh19 分钟前
【前端安全】聊聊 HTML 闭合优先级和浏览器解析顺序
前端·安全·html
前端老鹰20 分钟前
HTML <dialog> 元素:原生弹窗解决方案,无需再写复杂遮罩
前端·html
CodeTransfer25 分钟前
今天给大家带来的是一个简单的小球抛物线动画效果
前端·javascript