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

代码实例（对应购物车代码）

// 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() 正式发起请求。

知识点汇总表

蓝桥杯考点提示

• 蓝桥杯 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 字符串（偶考，用于提交数据）。

知识点汇总表

代码实例（对应购物车代码）

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) 将新元素插入页面。

知识点汇总表

代码实例（对应购物车代码）

<!-- 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，多加练习类似题型（如动态生成商品列表、实现简单的购物车加减功能），就能应对这类高频考点。