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

相关推荐
胡gh4 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh4 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴4 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_5 小时前
TailWind CSS
前端·css·postcss
烛阴5 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧5 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment6 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点7 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile7 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年7 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel