Pjax、AJAX、Fetch 与 SPA 前端路由机制的区别与对比，帮助理解过去的旧技术和现代常用的SPA单页应用

---

一、整体定位对比（一句话总览）

技术	核心作用	是否改变 URL	是否整页刷新	是否局部刷新	使用时代
AJAX（XHR）	异步数据请求	❌	❌	✔	早期主力
Fetch	更现代的异步请求	❌	❌	✔	当前主力
Pjax	MPA 无刷新切页	✔（pushState）	❌	✔（HTML片段）	过渡技术
SPA（前端路由）	完整前端页面管理	✔（pushState）	❌	✔（组件渲染）	当前主流

---

二、实现方式对比

1. AJAX（XHR）

• 通过 XMLHttpRequest 与服务器通信
• 返回 JSON 或 XML
• 前端手动更新 DOM
• 不会改变 URL
• 不解决“无刷新换页”，只是局部数据加载

定位：数据通信技术

---

2. Fetch

• 使用 Promise/async await
• 替代 AJAX 的现代方案
• 不负责渲染页面或管理 URL
• 不会刷新页面，但也不会修改 URL

定位：更先进的数据请求技术

---

3. Pjax

• Ajax + pushState 的组合
• 用 Ajax 请求“部分 HTML”
• 用 pushState 改 URL
• 在多页面网站（MPA）中模拟类似 SPA 的无刷新切换
• 有前进/后退支持，但逻辑复杂

定位：MPA → SPA 体验的过渡技术

---

4. SPA（单页应用）

• 使用 Vue/React 等进行组件化渲染
• 通过前端路由（pushState + onpopstate）控制 URL
• 页面结构由 JS 渲染，而非服务器返回完整 HTML
• 局部刷新完全由框架的响应式机制完成

定位：现代前端架构体系（当前主流）

---

三、核心区别（从最本质的角度）

维度	AJAX	Fetch	Pjax	SPA
关注点	数据	数据	页面片段 + URL	全页面结构 + URL
是否需要后端返回 HTML？	可选	可选	必须	❌
是否有路由管理？	❌	❌	半路由（依赖 pushState）	完整路由系统
是否组件化？	❌	❌	❌	✔（组件驱动）
是否适合复杂交互？	一般	一般	不适合	非常适合
使用难度	中	简单	高	中（需框架学习）

---

四、SPA 为什么最终胜出？

SPA 解决了几个根本痛点：

1. 前端组件化 → 可维护性高
2. 响应式系统 → 局部刷新自动化
3. Router → 完整路由逻辑，而不是拼凑 URL
4. 后端返回 JSON → 前端全面接管渲染
5. SSR + CSR + Hydration → SEO/性能兼得

Pjax 和 AJAX 都只能解决局部问题，而 SPA 形成了完整体系，因此成为主流。

---

五、学习记忆法（高效归纳）

• AJAX / Fetch = 数据请求
• Pjax = URL + 局部 HTML 刷新（MPA半SPA体验）
• SPA = 前端接管页面 + 组件化 + 完整路由体系

一句话记住：

**AJAX/Fetch 做“数据”，
Pjax 做“页面片段 + URL”，
SPA 做“整站界面 + 路由 + 状态”。**

---

六、最终总结（简洁版）

• AJAX → 实现异步请求（老技术）
• Fetch → 更现代的异步请求（AJAX 替代）
• Pjax → 用 Ajax+pushState 改 URL + 局部替换 HTML（过渡方案）
• SPA → 用 JS 渲染整个页面 + pushState 前端路由（当前主流）

---