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

相关推荐
csgo打的菜又爱玩1 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
ding_zhikai2 小时前
SD:在一个 Ubuntu 系统安装 stable diffusion Web UI
前端·ubuntu·stable diffusion
gerrgwg3 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
你的人类朋友4 小时前
【Node】单线程的Node.js为什么可以实现多线程?
前端·后端·node.js
iナナ5 小时前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者5 小时前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了5 小时前
自定义脚手架
前端·javascript
星晨雪海7 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6667 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist7 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式