前言

页面不刷新、数据实时更新已成为使用者体验的标配。许多开发者刚开始接触 Ajax 时往往会被繁琐的配置和回调地狱困扰。下面用一个简易的 TodoList 示例。带你从基础开始掌握 XMLHttpRequest的主要流程，并在每一步提醒你常见痛点与方法。

一、Ajax 解决了什么问题？不过，

传统页面交互这方面。每次获取新数据都需要刷新整个页面导致使用者体验卡顿。Ajax 的主要价值是：

• 页面局部更新
• 前后端解耦
• 提高响应速度和流畅度

痛点：初学者常误认为 Ajax 必须使用 fetch 或 axios；XHR 是最底层、最直观的实现方式。按理说，

二、后端：提供 JSON 接口

⚠️ 常见错误：忘记设置 CORS 或 Content-Type；导致前端拿不到数据，

const http = require;其实，const todos =;不过，http.createServer => {
if {
// ✅ 必须设置跨域访问
res.setHeader;res.setHeader;res.end)，return;}
res.end，}).listen => {
console.log;})，

接口地址这方面，http://localhost:3000/todos

为什么要用 JSON？老实说，

JSON 是最轻量级的数据交换格式。兼容性好、解析速度快，后端先将对象转成字符串：

JSON.stringify

前端再解析回对象：

JSON.parse

三、前端：使用 XMLHttpRequest 请求接口

⚠️ 常见错误：忘记检查 readyState 与 status；导致空响应或错误处理不到位。

const xhr = new XMLHttpRequest;xhr.open，// true 为异步
xhr.onreadystatechange = function {
if {
const todos = JSON.parse;renderTodos，} else if {
console.error;}
}，xhr.send;function renderTodos {
const container = document.getElementById;按理说，container.innerHTML = list.map.join;}

四、XHR 的基本流程概览

. 创建请求对象

const xhr = new XMLHttpRequest;

. 配置请求

xhr.open;// 第三个参数决定是否异步
// 参数解释
// 方法：GET/POST 等
// URL：接口地址
// async：true 表示异步

. 设置请求头 – 如需携带 token 或自定义字段时使用 setRequestHeader

. 注册状态变化监听器

xhr.onreadystatechange = function {
if { // DONE=4
if { /* 成功 */ }
else { /* 错误 */ }
}
};

. 发起请求 send

xhr.send;
// 对于 GET 可以直接 send；POST 可传入 body 数据

五、渲染数据到页面并处理痛点：

•  如果返回的是数组。请务必使用 map+join 渲染，否则会出现数组转字符串错误。
•  不要直接把 responseText 当作 HTML 注入。先解析成对象再渲染，避免 XSS 风险。
•  大文件或慢网络时可在 onprogress 中展示加载进度，让使用者知道正在等待。
•  跨域报错时要检查服务器是否设置了 Access-Control-Allow-Origin。
•  如果服务器返回非 JSON，需要根据 Content-Type 做相应处理。
•  若需要携带 Cookie，请在 open 后调用 xhr.withCredentials=true 并确保服务器允许跨域 Cookie。

六、异步请求的特点与思维方式调整

XHR 是完全异步的。这代表着代码执行不会被阻塞，但也会引入回调地狱。

• **Promise 封装** – 把 XHR 包装成 Promise，让代码更直观： js function ajax{ return new Promise=>{ const xhr=new XMLHttpRequest;xhr.open，xhr.onload==>{ if resolve);else reject);}，xhr.onerror==>reject);xhr.send，});} ajax.n).catch);
• **async/await** – 在现代浏览器中可以直接使用 async/await 提高可读性： js async function fetchTodos{ try{ const data=await ajax;renderTodos，}catch{ console.error;} }
• **中断与超时** – 在长时间无响应时手动 abort： js const timer=setTimeout=>{ xhr.abort;},5000)，// 超过5秒自动取消
• **并行请求** – 同时发起多个请求。用 Promise.all 聚合结果： js Promise.all,ajax]).n=>{/*...*/});
• **缓存策略** – 对于 GET 请求可以利用 Cache-Control 或 Service Worker 缓存，以减少网络负担。

七、 & 推荐阅读路线图

• 了解 XHR 基础，为后续学习 fetch/axios 打下坚实根基。
*
• 掌握 Promise 和 async/await 能让异步代码更像同步流，更易维护。
*
• 通过实际项目练手。例如添加删除任务按钮、表单提交等 功能，加深对事件循环和状态管理的理解。
*
• 从关注安全细节来看。XSS 防护、CORS 策略，还有 token 的安全传输方式。
*
• 熟悉 RESTful 接口规范。使得前后端沟通更高效，也便于团队协作。老实说，

"真正好的代码。不仅能跑，还能读"