在 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 | 返回响应的文本内容(字符串格式) |


