JavaScript大前端
前端 AJAX 与 XMLHttpRequest 核心知识点及实战
前端 AJAX 技术，涵盖 XMLHttpRequest 对象创建、请求流程、JSON 数据解析及 DOM 动态渲染。结合购物车实战案例，通过代码示例与表格总结，帮助开发者掌握异步数据交互的核心实现方法，适用于 Web 应用开发学习与竞赛备考。
前端 AJAX 技术，涵盖 XMLHttpRequest 对象创建、请求流程、JSON 数据解析及 DOM 动态渲染。结合购物车实战案例，通过代码示例与表格总结，帮助开发者掌握异步数据交互的核心实现方法，适用于 Web 应用开发学习与竞赛备考。
在 Web 开发中，AJAX（Asynchronous JavaScript and XML） 是实现页面异步数据交互的核心技术。本文将结合一段购物车实战代码，深入拆解 XMLHttpRequest、AJAX 请求流程、JSON 解析及 DOM 动态渲染等核心知识点。
XMLHttpRequest 是 AJAX 的核心对象，用于在浏览器与服务器之间异步传输数据。代码中通过 const ajax = new XMLHttpRequest(); 创建了该对象，下面详解其核心方法与属性。
new XMLHttpRequest() 初始化请求实例。onload（请求完成）、onerror（请求出错）处理响应。status（HTTP 状态码）、responseText（响应文本）。方法 / 属性 | 描述 | 代码示例 |
| 创建 AJAX 核心对象，用于与服务器交互数据 |
|
| 初始化请求，指定请求方法（GET/POST 等）和请求地址 |
|
| 发送请求 |
|
| 请求完成时触发的回调函数（无论成功或失败） |
|
| 请求出错时触发的回调函数 |
|
| 返回 HTTP 状态码（200 表示成功，404 未找到，500 服务器错误） |
|
| 返回响应的文本内容（字符串格式） |
|
// 1. 创建 XMLHttpRequest 对象
const ajax = new XMLHttpRequest();
// 2. 配置请求：GET 方法，请求本地 carList.json
ajax.open("GET", "./carList.json");
// 3. 请求完成回调
ajax.onload = () => {
if (ajax.status === 200) {
// 判断 HTTP 状态码是否成功
console.log("响应数据：", ajax.responseText);
}
};
// 4. 错误处理
ajax.onerror = () => {
console.error("请求出错！");
};
// 5. 发送请求
ajax.send();
代码中完整展示了 AJAX 请求的五个标准步骤，这是 Web 题的核心答题框架。
XMLHttpRequest 实例。open() 指定方法和地址。onload 处理响应数据。onerror 处理异常。send() 正式发起请求。步骤 | 说明 | 代码片段 |
1 | 创建 XMLHttpRequest 对象，作为数据交互的基础 |
|
2 | 配置请求方法和地址（常用 GET 请求本地 JSON） |
|
3 | 绑定 |
|
4 | 绑定 |
|
5 | 调用 |
|
carList.json、data.json），open() 的 URL 直接写相对路径即可。status === 200，否则可能解析到错误数据。接口返回的数据几乎都是 JSON 格式（轻量级数据交换格式），需要通过 JSON.parse() 将字符串转为 JavaScript 对象 / 数组，才能进行后续渲染。
'{"name":"苹果","price":5}'）。方法 | 描述 | 代码示例 |
| 将 JSON 格式的字符串转换为 JavaScript 对象 / 数组 |
|
| 将 JavaScript 对象 / 数组转换为 JSON 格式的字符串 |
|
ajax.onload = () => {
if (ajax.status === 200) {
// 将 JSON 字符串解析为 JS 数组（假设 carList.json 返回数组）
const data = JSON.parse(ajax.responseText);
console.log("解析后的数组：", data);
console.log("第一个商品：", data[0]);
}
};
拿到解析后的数据后，需要动态创建 DOM 元素并渲染到页面，这是 Web 题的最终落脚点（如生成商品列表、购物车项等）。
document.querySelector() 获取页面中的父容器。document.createElement() 创建新标签。innerHTML 拼接 HTML 结构（结合模板字符串 `${}` 更方便）。parent.appendChild(child) 将新元素插入页面。方法 / 属性 | 描述 | 代码示例 |
| 通过 CSS 选择器获取第一个匹配的元素（ |
|
| 创建指定标签名的 DOM 元素 |
|
| 设置或获取元素内部的 HTML 内容（可解析标签） |
|
| 将子元素添加到父元素的末尾 |
|
| 设置或获取元素的 class 名称 |
|
<!-- HTML 中需先准备容器 -->
<div id="list"></div>
<script>
ajax.onload = () => {
if (ajax.status === 200) {
const data = JSON.parse(ajax.responseText);
// 1. 获取容器
const list = document.querySelector('#list');
// 2. 循环数据，动态创建元素
for (let i = 0; i < data.length; i++) {
const rowData = data[i]; // 当前商品数据
// 3. 创建 div 容器
const item = document.createElement('div');
item.className = "item"; // 设置 class
// 4. 拼接 HTML 内容（模板字符串）
item.innerHTML = `
<img src="${rowData.img}">
<div>
<div>${rowData.name}</div>
<div>${rowData.price}</div>
</div>
`;
// 5. 将 item 添加到 list 容器中
list.appendChild(item);
}
}
};
</script>
在 Web 应用开发赛道中，'AJAX 请求本地 JSON + 动态 DOM 渲染' 是经典题型（如购物车、商品列表、成绩管理等）。结合本题代码，需重点掌握：
open() 的 URL 直接写题目提供的相对路径（如 ./data.json）。onload 中判断 ajax.status === 200，再解析数据。appendChild 添加，熟练使用模板字符串拼接内容。id="list"），否则 querySelector 获取不到会报错。JSON.parse() 必须在 status === 200 后执行，避免解析失败。本文围绕购物车代码，拆解了 XMLHttpRequest、AJAX 流程、JSON 解析、DOM 操作四大核心模块，每个模块都通过 '知识点讲解 + 表格汇总 + 代码实例' 的形式呈现。Web 备考中，只需牢记这些固定流程和 API，多加练习类似题型（如动态生成商品列表、实现简单的购物车加减功能），就能掌握此类高频考点。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online