前端蓝桥杯 Web 备考：AJAX 与 XMLHttpRequest 核心知识点及实战

在 Web 开发中，AJAX（Asynchronous JavaScript and XML） 是实现页面异步数据交互的核心技术。本文将结合一段购物车实战代码，深入拆解 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 题的核心答题框架，建议掌握。

流程分解

1. 创建对象：初始化 XMLHttpRequest 实例。
2. 配置请求：调用 open() 指定方法和地址。
3. 绑定完成回调：通过 onload 处理响应数据。
4. 绑定错误回调：通过 onerror 处理异常。
5. 发送请求：调用 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}">
          <div>
            <div>${rowData.name}</div>
            <div>${rowData.price}</div>
          </div>
        `;
        
        // 5. 将 item 添加到 list 容器中
        list.appendChild(item);
      }
    }
  };
</script>

五、蓝桥杯考点总结与实战建议

在蓝桥杯 Web 应用开发赛道中，'AJAX 请求本地 JSON + 动态 DOM 渲染' 是经典题型（如购物车、商品列表、成绩管理等）。结合本题代码，需重点掌握：

1. 固定 AJAX 五步流程：严格按 '创建对象→open→onload→onerror→send' 书写，缺一不可。
2. 本地 JSON 请求：open() 的 URL 直接写题目提供的相对路径（如 ./data.json）。
3. 状态码判断：必须在 onload 中判断 ajax.status === 200，再解析数据。
4. 动态渲染三步骤：获取容器→循环创建元素→appendChild 添加，熟练使用模板字符串拼接内容。
5. 易错点提醒：
   1. HTML 中必须有对应的容器元素（如 id="list"），否则 querySelector 获取不到会报错。
   2. JSON.parse() 必须在 status === 200 后执行，避免解析失败。

总结

本文围绕购物车代码，拆解了 XMLHttpRequest、AJAX 流程、JSON 解析、DOM 操作四大核心模块，每个模块都通过 '知识点讲解 + 表格汇总 + 代码实例' 的形式呈现。蓝桥杯 Web 备考中，掌握这些固定流程和 API，多加练习类似题型（如动态生成商品列表、实现简单的购物车加减功能），就能应对这类高频考点。