Web通信的演化：从HTML整页刷新到JSON + Fetch驱动的现代前端架构

Web的核心始终是“数据如何在浏览器与服务器之间流动”。从早期HTML整页刷新，到Ajax引入的异步请求，再到JSON成为事实标准，以及Fetch API推动的现代前端开发模式，整个通信体系经历了结构性的演化。

一、引言

现代 Web 应用看似复杂，但其核心问题始终没有变化：浏览器如何与服务器进行数据交互。

围绕这一问题，Web 技术经历了一条清晰的演化路径：从传统的整页 HTML 返回，到 Ajax 异步请求，再到 JSON 统一数据格式，以及 Fetch API 的现代化实现。

本文以发展脉络为主线，梳理 XHR、Ajax、JSON、Fetch、SPA 等核心概念之间的关系。

二、传统 Web：HTML 驱动的时代

早期 Web 的交互模型非常简单：

• 浏览器发送 HTTP 请求
• 服务器返回完整 HTML 页面
• 浏览器重新渲染整个页面

浏览器 → HTTP 请求 → 服务器 → HTML → 整页刷新

这种模式的特点是：

• 强依赖服务端渲染
• 每次交互都需要刷新页面
• 用户体验较为割裂

在这一阶段，Web 更像是“文档浏览系统”，而非应用系统。

三、Ajax 的出现：异步交互的革命

Ajax（Asynchronous JavaScript and XML）是一种开发模式，其核心思想是：

在不刷新页面的情况下，通过 JavaScript 在后台请求数据并局部更新页面。

其典型结构如下：

浏览器页面
   ↓
JavaScript 异步请求
   ↓
XMLHttpRequest（XHR）
   ↓
服务器返回数据（XML/JSON）
   ↓
JS 更新 DOM

Ajax 的关键变化是：

• 页面不再需要整体刷新
• 引入“后台请求数据”的能力
• Web 开始向“应用化”转变

四、XHR：Ajax 的早期实现方式

XMLHttpRequest（XHR）是 Ajax 的核心实现技术之一。

其典型使用方式如下：

const xhr = new XMLHttpRequest();

xhr.open("GET", "/api/user");

xhr.onload = function () {
    console.log(xhr.responseText);
};

xhr.send();

XHR 的特点是：

• 基于事件回调机制
• API 复杂
• 使用体验较原始

尽管如此，它开启了 Web 异步通信的时代。

五、JSON 的崛起：数据格式的统一

在 Ajax 早期，服务器常返回 XML 数据，但随着 Web 的发展，JSON 逐渐成为主流。

JSON（JavaScript Object Notation）具有以下优势：

• 结构简洁
• 易读易写
• 与 JavaScript 对象天然兼容

例如：

{
  "name": "Tom",
  "age": 18
}

相比 XML：

<user>
    <name>Tom</name>
    <age>18</age>
</user>

JSON 更加轻量且易于解析，因此逐渐取代 XML 成为 Web API 的标准数据格式。

六、Fetch：现代网络请求标准

Fetch API 是现代浏览器提供的新一代网络请求接口，用于替代 XHR。

基本使用方式如下：

const res = await fetch("/api/user");
const data = await res.json();

console.log(data);

Fetch 的优势包括：

• 基于 Promise，支持 async/await
• API 更简洁
• 更符合现代 JavaScript 设计理念
• 支持流式处理等高级能力

七、SPA：前端应用化的结果

随着 Ajax 与 Fetch 的普及，Web 架构发生了根本变化：

单页应用（SPA）结构：

一个 HTML 壳
+ JavaScript 应用
+ API 数据驱动

典型流程：

浏览器加载应用
   ↓
JS 运行
   ↓
Fetch 请求 API
   ↓
获取 JSON
   ↓
前端渲染 UI

代表性框架包括 React、Vue、Angular 等。

八、整体演化关系总结

可以将整个 Web 演化抽象为以下结构：

HTML时代：
页面 = 数据 + 展示

Ajax时代：
XHR + XML/JSON + 局部刷新

现代Web：
Fetch + JSON + SPA + API驱动

核心演进方向是：

从“整页文档返回” → “结构化数据驱动应用”

九、本质总结

从本质上看，这一系列技术变化可以归纳为：

• HTML 解决“展示问题”
• HTTP 解决“传输问题”
• JSON 解决“数据结构问题”
• Ajax/Fetch 解决“交互方式问题”
• SPA 解决“应用架构问题”

现代 Web 的本质已经不再是“网页”，而是：

一个运行在浏览器中的分布式应用系统。

十、结语

理解 Ajax、JSON、Fetch 以及 SPA 的关系，本质上是在理解 Web 从“文档系统”演化为“应用平台”的全过程。

这条演化路径不仅影响前端开发，也深刻影响了后端 API 设计、微服务架构乃至当前的 LLM Agent 通信模型。

未来的 Web 仍在演进，但底层逻辑依然围绕一个核心问题展开：

数据如何在系统之间高效流动。

• Web基础
• 前端原理
• Ajax
• JSON
• 网络通信