在 Web 开发中，AJAX（Asynchronous JavaScript and XML） 是实现页面异步数据交互的核心技术，也是蓝桥杯 Web 应用开发赛道的高频必考点 。本文将结合一段购物车实战代码，深入拆解 XMLHttpRequest、AJAX 请求流程、JSON 解析及 DOM 动态渲染等核心知识点，并通过表格汇总 + 代码实例的形式，帮助你高效备考。
一、XMLHttpRequest 对象基础
XMLHttpRequest 是 AJAX 的核心对象，用于在浏览器与服务器之间异步传输数据。代码中通过 const ajax = new XMLHttpRequest(); 创建了该对象，下面详解其核心方法与属性。
核心知识点
-
创建对象 ：通过
new XMLHttpRequest()初始化请求实例。 -
open(method, url)：配置请求方法（如 GET/POST）和请求地址。
-
send()：正式发送请求。
-
事件回调 ：
onload（请求完成）、onerror（请求出错）处理响应。 -
状态与数据 ：
status（HTTP 状态码）、responseText（响应文本）。
知识点汇总表
|----------------------------|-----------------------------------------|---------------------------------------|
| 方法 / 属性 | 描述 | 代码示例 |
| new XMLHttpRequest() | 创建 AJAX 核心对象，用于与服务器交互数据 | const ajax = new XMLHttpRequest(); |
| open(method, url) | 初始化请求，指定请求方法（GET/POST 等）和请求地址 | ajax.open("GET", "./carList.json"); |
| send() | 发送请求 | ajax.send(); |
| onload | 请求完成时触发的回调函数（无论成功或失败） | ajax.onload = () => { ... }; |
| onerror | 请求出错时触发的回调函数 | ajax.onerror = () => { ... }; |
| status | 返回 HTTP 状态码（200 表示成功，404 未找到，500 服务器错误） | if (ajax.status === 200) { ... } |
| responseText | 返回响应的文本内容（字符串格式） | const data = ajax.responseText; |
代码实例（对应购物车代码）
// 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 请求完整流程（五步核心）
代码中完整展示了 AJAX 请求的五个标准步骤 ，这是蓝桥杯 Web 题的核心答题框架，必须严格牢记。
流程分解
-
创建对象 ：初始化
XMLHttpRequest实例。 -
配置请求 ：调用
open()指定方法和地址。 -
绑定完成回调 ：通过
onload处理响应数据。 -
绑定错误回调 ：通过
onerror处理异常。 -
发送请求 ：调用
send()正式发起请求。
知识点汇总表
|----|--------------------------------|-----------------------------------------------------------|
| 步骤 | 说明 | 代码片段 |
| 1 | 创建 XMLHttpRequest 对象，作为数据交互的基础 | const ajax = new XMLHttpRequest(); |
| 2 | 配置请求方法和地址（蓝桥杯常用 GET 请求本地 JSON） | ajax.open("GET", "./carList.json"); |
| 3 | 绑定onload回调，判断状态码并解析数据 | ajax.onload = () => { if (ajax.status===200) { ... } }; |
| 4 | 绑定onerror回调，处理网络错误等异常情况 | ajax.onerror = () => { console.error("请求出错"); }; |
| 5 | 调用send()正式发送请求 | ajax.send(); |
蓝桥杯考点提示
-
蓝桥杯 Web 题中，请求本地 JSON 文件 是最常见的考法（如
carList.json、data.json），open()的 URL 直接写相对路径即可。 -
必须判断
status === 200，否则可能解析到错误数据。
三、JSON 数据解析
蓝桥杯 Web 题中，接口返回的数据几乎都是 JSON 格式 （轻量级数据交换格式），需要通过 JSON.parse() 将字符串转为 JavaScript 对象 / 数组，才能进行后续渲染。
核心知识点
-
JSON ：本质是字符串，格式与 JS 对象 / 数组一致（如
'{"name":"苹果","price":5}'）。 -
JSON.parse()：将 JSON 字符串转为 JS 对象 / 数组。
-
JSON.stringify()：将 JS 对象 / 数组转为 JSON 字符串（偶考，用于提交数据）。
知识点汇总表
|---------------------------|-------------------------------------|---------------------------------------------------------|
| 方法 | 描述 | 代码示例 |
| JSON.parse(str) | 将 JSON 格式的字符串转换为 JavaScript 对象 / 数组 | const data = JSON.parse('{"name":"苹果","price":5}'); |
| JSON.stringify(obj) | 将 JavaScript 对象 / 数组转换为 JSON 格式的字符串 | const jsonStr = JSON.stringify({name:"苹果", price:5}); |
代码实例（对应购物车代码）
ajax.onload = () => {
if (ajax.status === 200) {
// 将JSON字符串解析为JS数组（假设carList.json返回数组）
const data = JSON.parse(ajax.responseText);
console.log("解析后的数组：", data);
console.log("第一个商品：", data[0]);
}
};四、DOM 操作与动态渲染
拿到解析后的数据后，需要动态创建 DOM 元素 并渲染到页面，这是蓝桥杯 Web 题的最终落脚点（如生成商品列表、购物车项等）。
核心知识点
-
获取容器 ：通过
document.querySelector()获取页面中的父容器。 -
创建元素 ：通过
document.createElement()创建新标签。 -
设置内容 ：通过
innerHTML拼接 HTML 结构（结合模板字符串${}更方便）。 -
添加到 DOM ：通过
parent.appendChild(child)将新元素插入页面。
知识点汇总表
|-----------------------------------|------------------------------------------|-------------------------------------------------|
| 方法 / 属性 | 描述 | 代码示例 |
| document.querySelector(sel) | 通过 CSS 选择器获取第一个匹配的元素（#id、.class、标签等） | const list = document.querySelector('#list'); |
| document.createElement(tag) | 创建指定标签名的 DOM 元素 | const item = document.createElement('div'); |
| element.innerHTML | 设置或获取元素内部的 HTML 内容（可解析标签） | item.innerHTML = ``; |
| parent.appendChild(child) | 将子元素添加到父元素的末尾 | list.appendChild(item); |
| element.className | 设置或获取元素的 class 名称 | item.className = "item"; |
代码实例（对应购物车代码）
<!-- 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}" alt="" class="item-img">
<div class="item-info">
<div class="item-name">${rowData.name}</div>
<div class="item-price">${rowData.price}</div>
</div>
`;
// 5. 将item添加到list容器中
list.appendChild(item);
}
}
};
</script>五、蓝桥杯考点总结与实战建议
在蓝桥杯 Web 应用开发赛道中，"AJAX 请求本地 JSON + 动态 DOM 渲染" 是经典题型（如购物车、商品列表、成绩管理等）。结合本题代码，需重点掌握：
-
固定 AJAX 五步流程：严格按 "创建对象→open→onload→onerror→send" 书写，缺一不可。
-
本地 JSON 请求 ：
open()的 URL 直接写题目提供的相对路径（如./data.json）。 -
状态码判断 ：必须在
onload中判断ajax.status === 200，再解析数据。 -
动态渲染三步骤 ：获取容器→循环创建元素→
appendChild添加，熟练使用模板字符串拼接内容。 -
易错点提醒：
-
HTML 中必须有对应的容器元素（如
id="list"），否则querySelector获取不到会报错。 -
JSON.parse()必须在status === 200后执行，避免解析失败。
-
总结
本文围绕购物车代码，拆解了 XMLHttpRequest、AJAX 流程、JSON 解析、DOM 操作四大核心模块，每个模块都通过 "知识点讲解 + 表格汇总 + 代码实例" 的形式呈现。蓝桥杯 Web 备考中，只需牢记这些固定流程和 API，多加练习类似题型（如动态生成商品列表、实现简单的购物车加减功能），就能轻松拿下这类高频考点。