在 Web 开发中AJAXAsynchronous 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请求出错处理响应。状态与数据statusHTTP 状态码、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 请求本地 JSONajax.open(GET, ./carList.json);3绑定onload回调判断状态码并解析数据ajax.onload () { if (ajax.status200) { ... } };4绑定onerror回调处理网络错误等异常情况ajax.onerror () { console.error(请求出错); };5调用send()正式发送请求ajax.send();蓝桥杯考点提示蓝桥杯 Web 题中请求本地 JSON 文件是最常见的考法如carList.json、data.jsonopen()的 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 idlist/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 classitem-img div classitem-info div classitem-name${rowData.name}/div div classitem-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 中必须有对应的容器元素如idlist否则querySelector获取不到会报错。JSON.parse()必须在status 200后执行避免解析失败。总结本文围绕购物车代码拆解了XMLHttpRequest、AJAX 流程、JSON 解析、DOM 操作四大核心模块每个模块都通过“知识点讲解 表格汇总 代码实例”的形式呈现。蓝桥杯 Web 备考中只需牢记这些固定流程和 API多加练习类似题型如动态生成商品列表、实现简单的购物车加减功能就能轻松拿下这类高频考点。