零基础快速入门前端蓝桥杯 Web 备考：AJAX 与 XMLHttpRequest 核心知识点及实战(可用于备赛蓝桥杯Web应用开发)

优质文章学习记录

— 7 min read
零基础快速入门前端蓝桥杯 Web 备考：AJAX 与 XMLHttpRequest 核心知识点及实战(可用于备赛蓝桥杯Web应用开发)

在 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 题的核心答题框架，必须严格牢记。

流程分解

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

Read more

5分钟搞定GPT-OSS部署，WEBUI界面太友好了

5分钟搞定GPT-OSS部署，WEBUI界面太友好了 你是不是也试过：下载模型、配环境、改配置、调端口……折腾两小时，连“你好”都没打出来？这次不一样。用 gpt-oss-20b-WEBUI 镜像，真·5分钟完成部署，打开浏览器就能对话——不用写一行代码，不碰终端命令，连显卡型号都不用查，只要你的算力平台支持双卡4090D（vGPU），点几下鼠标，GPT-OSS就坐在你面前等你提问。 这不是Demo，不是简化版，是基于OpenAI最新开源的 GPT-OSS-20B 模型，搭载 vLLM高性能推理引擎，内置完整WebUI交互界面的真实本地大模型服务。它不依赖云端API，不上传数据，不设token限额，更不让你在config.yaml里找错缩进。它就是为你“开箱即用”而生的。 下面我就带你从零开始，手把手走完全部流程。全程截图式描述，每一步都可验证，每一步都有明确反馈。小白放心跟，老手省时间。 1. 先搞清它到底是什么
利用 Claw Cloud Run 免费应用部署前端网页

利用 Claw Cloud Run 免费应用部署前端网页

一、注册 1. 使用注册180天的github账户注册Claw Cloud账户，可获得每月5$的免费配额 2. 官网链接 - https://run.claw.cloud/ （ps：直接github账号登录应该就不用写了吧） 二、创建应用 开启外部访问 CPU选0.1即可，当然大点也没问题，就是费用多点 点击Create App 打开App Launchpad 三、查看Nginx信息，挂载空间部署 1. 确认update重启 挂载空间 关闭控制台点击update 最下方选择local Storage挂载空间（默认的就填上面查到的，改配置文件的就填你选择的路径） cd进入目录下通过配置文件查看Nginx默认路径（当然你也可以自己改，到时候换个地方挂载就好） 输入nginx -t查询Nginx配置文件信息 点进刚刚创建的App，拖到最下面打开控制台（旁边的文件夹是要挂载之后才有的） 四、上传文件 点击控制台旁边的文件图标，将打包后的文件上传即可

添加中文支持：修改前端界面实现双语切换功能

添加中文支持：修改前端界面实现双语切换功能 📖 背景与需求 随着 AI 生成技术的普及，越来越多非英语用户开始使用图像转视频工具。然而，当前 Image-to-Video 图像转视频生成器 的 Web 界面仅支持英文提示词输入和操作指引，对中文用户的使用体验造成了显著障碍。 尽管模型推理本身依赖英文 prompt（如 I2VGen-XL 模型训练数据为英文语料），但前端交互界面完全可本地化。为了提升中文用户的操作效率与友好度，我们决定在保留英文核心逻辑的基础上，为前端添加中英双语切换功能。 本篇文章将详细介绍如何在现有 Gradio 构建的 WebUI 上，通过配置语言包、封装翻译函数、动态更新组件文本，实现一个轻量级、可扩展的双语切换系统。 🧩 技术选型分析 可行方案对比 | 方案 | 实现方式 | 优点 | 缺点 | |------|----------|------|------| | Gradio 内置 i18n | 使用 gr.Interface(

别再手动切图！用 ClaudeCode+Figma-MCP 实现 UI 设计 1:1 前端还原

使用 Figma-MCP 实现设计还原 Figma-MCP（Measure Copy Paste）是 Figma 的插件，能够快速提取设计稿中的间距、颜色、尺寸等参数，避免手动测量。安装后选中元素即可查看属性，按 Alt 键复制数值，直接粘贴到代码中。 配置 ClaudeCode 生成代码 ClaudeCode 是 Claude 的代码生成功能，支持根据设计参数输出前端代码。在对话中描述需求并附上 Figma-MCP 提取的数据，例如： 生成一个 React 按钮组件，参数如下： - 宽度：120px - 高度：40px - 背景色：#3B82F6 - 圆角：8px - 文字："