昨天想写个最简单的待办列表。前端页面画好了后端也用 Node 搭了个接口，结果死活拿不到数据，控制台还报了个红。我盯着屏幕看了十分钟，突然反应过来我好像一直没真正搞懂 Ajax 到底是怎么回事。

这是我当时的项目结构。就俩文件夹，一个后端一个前端，简单到不能再简单了。

说出来你可能不信。我用了这么久的 axios 和 fetch，从来没亲手写过一次原生的 XMLHttpRequest。总觉得这玩意儿是上古时代的东西，没必要学。结果真到自己写的时候，连基本的执行顺序都搞不清楚。按理说，

原来 Ajax 就是个 “跑腿的服务员”

以前我总觉得 Ajax 是个很高大上的词。后来才明白，它就是专门负责传菜的服务员。

以前的网页啊，就像那种老式餐厅。你点个菜，服务员把单子拿到后厨，你就得坐着等，啥也干不了。等菜做好了服务员端上来整个桌子都给你换一遍。这就是传统同步请求——点一下链接，整个页面刷新。

而 Ajax 呢，就是能让你点完菜后继续刷刷手机、聊聊天。它把请求交给后台处理，而前台保持不变，这就是我们现在说的 “无刷新更新页面”。也是 Web 时代能这么繁荣的根本原因。

说白了Ajax 的本质就是让 JS 可以主动发起 HTTP 请求，接下来根据返回的数据动态更新页面不用刷新整个页面。

先写个能跑的最小后端

先看后端代码。用的是 Node 内置 http 模块，只需几行就能起一个服务器。其实，

 // backend/index.js
const http = require;http.createServer => {
// 使用者服务函数，每次有请求进来都会执行这里
const todos =;if {
res.end;老实说，}
if {
// 注意这一行，坑了我半小时！解决跨域问题
res.setHeader;// 解决中文乱码问题：告诉浏览器返回的是 JSON，用 utf-8 编码
res.setHeader;// 把对象转成 JSON 字符串，并格式化输出
res.end);}
}).listen => {
console.log;})，

接下来在 backend 目录下执行 node index.js 就能开启服务器。打开浏览器访问 http://localhost:3000/todos，就能看到返回的 JSON 数据。

前端用原生 XHR 发请求

前端这边最原始的 Ajax 实现就是用 XMLHttpRequest 对象。实际来说，我第一次看到这个名字的时候，以为它只能处理 XML。现在大家都用 JSON，这名字算是历史遗留问题了。

按钮

你有没有遇到过这种“先打印 start。再打印 end，却没有看到 readyState”？

最让我懵的执行顺序

I wrote this code and was confused about execution order. I first printed “start”,called xpath.send。n printed “end”. I thought output would be something like:

start
start send
// 等待请求完成...
readyState:
readyState:
readyState:
end

The real output was:

start
start send
end
readyState:
readyState:
readyState:

The question?Why does “end” appear before readyState callbacks?The answer lies in JavaScript’s single-threaded nature.

• You’re looking at a single window‑like bank where everyone must queue up.
• If one customer needs a long loan approval that blocks everyone else – impossible.
• The bank puts that customer in a lounge,processes or customers while waiting.
• Your browser works same way with network requests.
• A request is sent out asynchronously via;JavaScript immediately continues executing subsequent synchronous code .
• The callback will run later when response arrives.

PITFALL FOR BEGINNERS: I once tried to store data returned from  into a global variable and use it right after calling it – always got null/undefined. That’s because request hadn’t finished yet.

• 0： - 未初始化。还没调用 open
• 1： - 启动阶段：已调用 open，还未调用 send
• 2： - 已发送：已调用 send，还未收到响应
• 3： - 正在接收响应数据中...
• 4： - 完成：响应数据接收完毕，可读取并解析数据！
如果要判断是否成功，需要同时满足：
if{ /* 成功 */ } 这才可以安全处理返回的数据。--- **痛点**
- CORS 跨域报错：前后端口不一致时浏览器会阻止请求。- 中文乱码：忘记设置 Content‑Type 或 charset，会导致中文显示为问号。- 异步顺序混乱：直接在 `send` 后使用返回值会得到 undefined，因为回调是在异步完成后才执行。- readyState 与 status 判断错误导致无法正确捕获成功状态。

# 接下来怎么写更简洁？#

# 我踩过的一些坑 #

1. CORS 跨域问题：I 一开始没有添加 `Access-Control-Allow-Origin` header，于是浏览器直接报 CORS 错误；说起来，这正是前后端分离常见坑之一。
2. 中文乱码：I 没设置 `Content-Type` header 时返回的是全问号；记得告诉浏览器使用 utf‑8 编码才能正常显示中文。
3. 异步执行顺序：I 想在 `send` 后立刻拿到返回的数据却永远得到 undefined；答案就在事件循环里——不要把异步结果当作同步处理！

# 用 Fetch 替代 XHR #

# 当前主流方案 #

javascript

// 用 fetch 替换 XHR：

fetch .n) .n(data=>{ document.getElementById.innerHTML= data.map.join })

// 更推荐 async/await 写法：

async function getTodos{ const res=await fetch;const data=await res.json;document.getElementById.innerHTML= data.map.join } getTodos

---

---

---

- 最主要三点：① Ajax 能让 JS 主动发起 HTTP 请求并无刷新更新页面；② JS 单线程 + 事件循环决定异步执行顺序；③ 前后端通过 HTTP 接口交换数据 —— 后端提供、前端展示。其实，- 虽然 XHR 有许多缺点，但它是所有高级封装的基础。一旦了解其原理，对日后的框架和库使用大有裨益。- 如果你跟我一样，一直稀里糊涂地使用 Ajax。到此终于彻底搞懂它——欢迎留下评论分享你的经验或疑问！

---

---

---

---

---

---

---