前端开发的发展(3)：动态交互时代（2000s）

银安
222 阅读25分钟

上一篇文章，我们讲到了前端开发起点——静态网页时代。本篇文章中，我们继续顺着历史的脉络，从 1990s 的“静态网页” 往前走，进入 2000s 的“动态交互时代” 。这一时期的关键词就是：

用户要互动 → 网页要更灵活 → 技术堆栈不断补丁式进化。

初步认识

历史背景：从“只读网页”到“可交互应用”

到 1990s 后期，互联网的普及速度飞快。人们开始在网上做更多事：

  • 填写表单、提交数据（比如注册、登录）。
  • 动态显示内容（新闻、股票、天气）。
  • 网页要像桌面软件一样“即时响应”，而不是每次都整页刷新。

👉 问题出现了：

  • HTML + CSS 是静态的，只能展示。
  • JavaScript（早期）功能有限，主要是小脚本（表单校验、弹窗）。
  • 想要“动态内容”，几乎只能依赖后端（PHP、ASP、JSP），每次都要刷新整个页面。

这种“整页刷新”的体验非常差：

  • 页面闪烁，用户要等待。
  • 网络负担大，效率低。

关键突破：Ajax（2005）

1. 遭遇的问题
  • 用户希望网页能“局部刷新”，而不是整页重载。
  • 例如：你在网页里填写注册表单，如果输错一个用户名，还要整页刷新告诉你“用户名已存在”，体验很差。
2. 解决思路
  • Ajax（Asynchronous JavaScript and XML） 的核心思想：
    • 浏览器里运行的 JS 可以异步请求服务器数据，
    • 然后只更新页面的一部分，而不是刷新整页。
3. 使用方式
// 简单的 Ajax 调用
const xhr = new XMLHttpRequest()
xhr.open("GET", "/api/data", true)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById("box").innerHTML = xhr.responseText
  }
}
xhr.send()

👉 效果：

  • 页面不再闪烁，用户能“无感知”地获取新数据。
  • 这直接催生了 Web2.0 应用（比如 Gmail、Google Maps）。

jQuery（2006）：JS 的大众化革命

1. 遭遇的问题
  • 原生 JS 操作 DOM 很复杂：
    • 兼容性差（IE vs Firefox）。
    • API 冗长（document.getElementById...）。
  • 稍微复杂点的交互代码，就会像“面条”一样缠绕。
2. 出现的技术
  • jQuery（2006 John Resig 发布）：一句口号就是

“Write less, do more.”

  • 它封装了 DOM 操作、事件绑定、Ajax 调用，统一浏览器兼容性。
3. 使用方式
// jQuery 选择器 + Ajax
$("#btn").click(function () {
  $("#box").load("/api/data")
})

👉 只用几行代码，就能做复杂的事。

前端动态化的其他补充

1. Flash（1996–2010）
  • 出现问题：早期网页动画和多媒体播放几乎不可能。
  • 解决方式：Flash 插件，能播放视频、做动画、做小游戏。
  • 结果：一度成为网页交互的标配（优酷、4399、小广告）。
  • 局限：依赖插件、不安全、耗电，最终被 HTML5 淘汰。
2. 模块化的萌芽
  • JS 代码越写越多，组织困难。
  • 出现了 模块加载器：
    • RequireJS (AMD 规范)
    • SeaJS (CMD 规范)
  • 为后来的 ES6 模块化铺路。

用户体验的飞跃：案例对比

注册表单验证（2000 vs 2006）

  • 没有 Ajax（2000 前）

    1. 用户输入用户名 → 点击提交。
    2. 页面整页刷新 → 后端验证 → 返回结果。
    3. 用户等待 3~5 秒，体验割裂。

  • 有 Ajax + jQuery（2006 后）

    1. 用户输入用户名，光标移出输入框。
    2. JS 立即用 Ajax 异步请求后端。
    3. 页面不刷新，提示“用户名已存在”。

👉 用户感觉：

  • 以前是“报纸式体验”（一页一页翻）。
  • 现在是“应用式体验”（即时反馈）。

这一阶段的智慧总结

  1. 核心问题：网页要从“静态文档”进化为“动态应用”。
  2. 关键突破：Ajax（异步请求，局部刷新）。
  3. 大众化工具：jQuery（封装 DOM & Ajax，统一兼容性）。
  4. 补充角色：Flash（动画/视频）、模块化加载器（组织 JS）。

整体逻辑链

  • 1990s：网页只能展示 → 静态。
  • 2000s：用户想要交互，不能每次都整页刷新 → 动态交互（Ajax + jQuery + Flash）。

了解完上面的内容后，我们知道了之所以会如此发展，是因为JS不具备动态刷新能力，那么为什么呢？

当时的 JS 为什么不具备动态刷新能力

1. 什么是“动态内容”？

在网页语境下，“动态”就是 内容不是死写在 HTML 文件里，而是根据用户操作、数据库数据、时间等因素临时生成的。

举几个 2000 年左右的例子：

  • 静态页面（无动态）

    • 比如一个“关于我们.html”文件，里面写死了公司介绍，不管谁访问，看到的都是一样的内容。

  • 动态页面（后端生成）

    • 用户输入账号密码 → 服务器查询数据库 → 拼接 HTML → 返回带有“欢迎，张三”的页面。
    • 新闻网站首页，每次访问展示的新闻可能不同，这是服务器根据最新数据动态生成的。
    • 电商网站的“搜索结果”，根据你搜索的关键词生成，而不是一个写死的文件。

所以，动态内容= 随用户、时间、数据不同而生成或变化的内容。

2. 为什么当时 JavaScript 不具备“动态刷新”的能力？

要理解这个，要看 JS 的初衷和浏览器的能力限制：

（1）JS 的设计初衷

1995 年，Brendan Eich 在 Netscape 浏览器里发明了 JavaScript，最初定位只是：

  • 小脚本语言

  • 用来增强表单验证、触发一些简单交互，比如：

    • 表单没填就弹窗 alert("请输入邮箱！")
    • 点击按钮改变文字颜色

它并不是为“更新页面数据”设计的，而是“辅助 HTML 的小工具”。

（2）浏览器限制：没有数据通信能力

要想“动态刷新”，本质上需要：

  • 浏览器向服务器请求数据
  • 拿到数据后在页面上更新展示

但是在 1990s ~ 2000s 初期：

  • 浏览器里没有专门的 API 来做“异步请求”
  • 每次获取数据只能 整页刷新（即重新加载一个新 HTML 页面）
  • JS 只能操作已经加载好的 DOM，不能去拉新数据
（3）转折点：AJAX 的出现（2004 年左右）

真正让 JS 拥有“动态刷新”能力的，是微软 IE 的一个“副产品” → XMLHttpRequest 对象。

  • 最早是用来在 Outlook Web Access（网页版邮箱）里做“收发邮件无需刷新整个页面”。
  • 后来被开发者发现：可以用来在后台偷偷请求数据，再用 JS 更新页面。

Google 在 2004 年用 AJAX 技术做了 Gmail、Google Maps，用户第一次体验到“网页像桌面软件一样丝滑”，这才让 JS 进入真正的“动态交互”时代。

3. 总结对比

时代动态的来源浏览器/JS 能力用户体验
静态 HTML（1990s）无动态，内容写死JS 只能改颜色/弹窗刷新=换页面，死板
动态网页（2000s 初期）服务器拼 HTML（PHP/ASP/JSP）JS 不能拉新数据，只能处理现有 DOM每次操作要整页刷新
AJAX（2000s 中后期）JS 可以请求数据、更新 DOMJS + XMLHttpRequest无刷新体验，真正动态交互

所以我们看到的“当时动态内容靠后端”= 因为浏览器不给 JS“拿数据”的能力，JS 只能在现有 HTML 上玩花活。直到 AJAX 出现，JS 才具备“动态刷新”的能力。

2000 年前后（动态交互刚兴起） JS不具备动态刷新能力的情况下，是如何做到动态页面的？

前后端分离在当时是什么情况？

今天我们常说的“前后端分离”（前端写 Vue/React，后端写 API，前端直接调 JSON 数据）是在 2010 年后 AJAX 普及 + 单页应用（SPA） 出现后才逐渐成熟的。

而 2000 年前后：

  • 没有真正的前后端分离

    • 前端：HTML + CSS + JavaScript（只能做很轻的交互，比如按钮点击、表单校验、弹窗）。
    • 后端：PHP、ASP、JSP、Perl、ColdFusion 等，负责“生成 HTML 文件”。

  • 用户访问页面时：

    1. 浏览器发起请求。
    2. 服务器的后端程序（PHP/ASP/JSP）运行，把数据库的数据拼接进 HTML 模板里。
    3. 返回一个完整的 HTML 给浏览器。
    4. 浏览器整个页面刷新，用户才能看到“动态”变化。

👉 所以那时候所谓的“动态页面”，其实是 服务器动态生成的 HTML，而不是浏览器端“即时刷新”的效果。

当时的“动态页面”指的是什么？

“动态”相对于“静态 HTML 文件”来说的。

  • 静态页面：

    • 直接写死在 .html 文件里，所有人访问都一样，没变化。
    • 例：about.html、contact.html。

  • 动态页面：

    • 页面内容不是写死的，而是后端程序根据情况“实时生成”。

    • 例：

      • 访问 profile.php?id=123 → 后端查询数据库 → 生成用户123的页面。
      • 访问 search.jsp?keyword=book → 后端查数据库 → 把结果写进 HTML 表格里 → 发给浏览器。

👉 本质上，“动态”= 每次请求，服务器重新算、重新拼 HTML。

为什么当时 JS 没法直接动态刷新？

有两个原因：

  1. 浏览器限制（安全 & 技术未成熟）：

    • 1990s 末，JS 的主要用途是 小脚本（校验表单、防止重复提交、弹窗提示）。
    • 浏览器根本没给 JS 提供“直接请求服务器数据”的能力。
    • 直到 1999 年，IE5 才引入 XMLHttpRequest 对象（也就是 AJAX 的前身）。

  2. 没有 DOM 操作能力（非常弱）：

    • 早期 JS 甚至对 HTML 元素的修改能力有限（比如不能灵活地插入/删除元素）。
    • 页面要改数据，只能靠刷新整张页面，浏览器重新渲染。

👉 所以当时即使想“刷新局部内容”，也做不到，只能：

  • 整页刷新（由后端重新生成 HTML）。
  • 或者用一些“伪动态”手段，比如 <iframe> 嵌套小页面（类似局部刷新，但笨重）。

一次动态页面刷新的完整过程

背景

时间点：大约 1995–2004（PHP/ASP/JSP 兴盛期）
浏览器：IE 4/5/6、Netscape 4/6
特点：

  • 前端很弱，只能写 HTML + CSS（非常有限）+ 一点点 JavaScript（表单验证、弹窗）。
  • 动态内容主要靠 服务器端模板 技术。

举个例子：你访问一个“新闻网站”，想查看新闻列表，并点击“下一页”。

1. 用户操作
  • 用户在浏览器中点击「下一页」按钮（其实就是一个 <a href="news.php?page=2">下一页</a> 链接）。
  • 浏览器马上发起一个 HTTP 请求，地址带上 ?page=2 这个参数。
2. 浏览器请求 → 服务器
  • 浏览器把请求发到服务器，比如：
GET /news.php?page=2 HTTP/1.1
Host: www.example.com

  • 服务器（Apache/IIS/Tomcat）接收到请求后，会把它交给对应的程序语言处理：

    • PHP（配合 Apache）
    • ASP（配合 IIS）
    • JSP/Servlet（配合 Tomcat）
3. 服务器端生成 HTML
  • 程序会读取数据库，比如 SELECT * FROM news LIMIT 10 OFFSET 10。
  • 把结果嵌入到模板里，比如：
<html>
<body>
  <h1>新闻列表</h1>
  <ul>
    <?php foreach($news as $item): ?>
      <li><?php echo $item['title']; ?></li>
    <?php endforeach; ?>
  </ul>
  <a href="news.php?page=1">上一页</a>
  <a href="news.php?page=3">下一页</a>
</body>
</html>
  • 最终生成一份完整的 HTML 文本。
4. 服务器返回 HTML
  • 服务器把生成好的 HTML 文件返回给浏览器：
HTTP/1.1 200 OK
Content-Type: text/html

<html> ... 新的新闻列表 ... </html>
5. 浏览器渲染
  • 浏览器清空原本的页面（白屏），重新加载新的 HTML。
  • 重新下载里头的 CSS、JS、图片资源（如果没缓存）。
  • 重新渲染出新的新闻列表。
总结

  • 整页刷新 = 浏览器重新请求 + 服务器重新生成 + 浏览器重新渲染。

  • 页面里每一个动态变化（分页、登录、发帖、搜索…）都要走这个完整流程。

  • 当时根本没有“前后端分离”的概念，HTML、逻辑、数据库访问全都写在一起：

    • PHP 里 echo "<div>$title</div>"
    • JSP 里 <% out.println(newsTitle); %>
    • ASP 里 <%= newsTitle %>

和今天对比

  • 当年：点一下 = 整页重新来过
  • 今天：点一下 = 前端 JS 通过 AJAX/Fetch 请求 JSON 数据，直接局部更新 DOM，不会白屏

所以我们现在很难想象当时的“笨重”，但在 2000 年初这已经是革命性体验了，因为相比 FTP/Gopher 时代，这种「数据库 + 动态模板 + 浏览器」模式已经能做 BBS、博客、新闻站、网店了。

对上述过程的思考
1. 请求是谁发的？

👉 请求是由浏览器发送的。

  • 用户点击网页上的链接（<a href="...">），或提交表单（<form action="...">），或直接在地址栏输入 URL。
  • 浏览器就会向目标服务器发起一个 HTTP 请求。

这时候，浏览器相当于客户端（Client），而网站的程序（比如 PHP/ASP/JSP）运行在服务器（Server）上，走的是 典型的 C/S 架构。

2. 浏览器靠什么发送请求？

浏览器使用 HTTP 协议（超文本传输协议），基于 TCP/IP 传输。
整个过程：

  1. 浏览器先通过 DNS 查询 把域名（如 www.example.com）解析成 IP 地址。
  2. 通过 TCP 三次握手连接服务器的 80 端口（当时主要是 HTTP，还没普及 HTTPS 443）。
  3. 浏览器打包好一个 HTTP 请求报文（比如 GET 请求），发给服务器。

示例（用户点击了一个链接）：

GET /profile?id=123 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
3. 服务器通过什么方式响应？

服务器上跑着 Web Server 软件（比如 Apache、IIS、Nginx）。

  • 如果请求的是 静态文件（如 index.html、style.css、image.png），Web Server 直接从磁盘读取文件，打包成 HTTP 响应返回。

  • 如果请求的是 动态页面（如 .php、.asp、.jsp），Web Server 会把请求交给后端解释器处理：

    • Apache + PHP → PHP 解析器读取数据库，生成 HTML
    • IIS + ASP → ASP 脚本生成 HTML
    • Tomcat + JSP → Java Servlet 生成 HTML

最后，服务器返回一个完整的 HTTP 响应报文：

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 4521

<html>
  <head><title>User Profile</title></head>
  <body>
    <h1>欢迎你，张三！</h1>
    <p>这是你的资料页面</p>
    ...
  </body>
</html>
4. 响应的对象是谁？

👉 响应的对象就是浏览器。
浏览器收到 HTTP 响应后，开始按 HTML 规则解析，并渲染到屏幕上。

  • 浏览器先读到 <html>...</html> 结构，构建 DOM 树。
  • 如果发现 <link>、<script>、<img> 等资源，会再次发起新的 HTTP 请求。
  • 最后生成完整的页面显示。
5. 页面是如何刷新的？

在这个过程中，每次用户点击一个链接/提交表单：

  1. 浏览器丢掉旧页面。
  2. 向服务器重新发 HTTP 请求。
  3. 服务器返回一个新的 HTML 页面。
  4. 浏览器重新渲染整个页面。

所以，这种机制下：

  • 每次交互都是整页刷新。
  • 页面之间的状态（比如滚动位置、输入框内容）会丢失，除非后端写逻辑保存。
  • 用户体验相比现代的 “局部刷新 / SPA” 很笨重。

让我们总结一下：
当时的“动态”就是 浏览器发 HTTP 请求 → 服务器动态生成 HTML → 整页返回 → 浏览器重新渲染。
JavaScript 只能在页面加载后搞点小动作，不能请求新数据。直到 2005 年 AJAX 出现，才真正有了“无刷新更新内容”的能力。

我们了解当时动态的含义，那么深入一些：既然前后端并未分离，是一体化的，那么浏览器访问的地址是整个项目（包含页面代码和服务代码）的地址，这种情况下，服务代码咋返回给浏览器数据？返回的内容具体是什么？如何实现返回数据？

2000 年前后前后端一体化网页是怎么生成和返回内容

前后端一体化的本质

当时的开发模式可以总结为：

  • 前端：HTML + CSS + JavaScript（很弱）

  • 后端：PHP / ASP / JSP（处理业务逻辑和数据库）

  • 一体化：

    • 一个 URL 对应一个后端程序文件（比如 profile.php），
    • 同一个文件里 同时包含 HTML 结构和服务逻辑，甚至数据库操作。

所以浏览器访问的 URL 并不是“前端文件夹的静态页面”，而是直接访问一个 服务端程序入口。

浏览器访问的地址

例如：

http://www.example.com/profile.php?id=123
  • 浏览器看到的是一个 URL，发起 HTTP 请求。
  • 服务器根据 URL 找到 profile.php 脚本并执行。

这个文件里可能有：

  1. 服务逻辑：取数据、判断权限、处理业务
  2. 模板 HTML：展示页面的结构
  3. 混合输出：用 echo / print / <%= ... %> 输出 HTML
服务代码如何返回数据
1. PHP 举例
<?php
// profile.php

// 1️⃣ 取数据
$userId = $_GET['id'];
$user = getUserFromDB($userId); // 数据库查询

// 2️⃣ 输出 HTML + 数据
?>
<html>
  <head><title>用户资料</title></head>
  <body>
    <h1>欢迎 <?php echo $user['name']; ?>！</h1>
    <p>邮箱：<?php echo $user['email']; ?></p>
  </body>
</html>

  • 浏览器访问 profile.php?id=123

  • PHP 执行：

    • 先从数据库拿到数据
    • 拼接到 HTML 里
    • 把完整 HTML 输出到 HTTP 响应体
2. ASP / JSP 也是类似
  • ASP：
<%
Dim user
Set user = GetUser(Request.QueryString("id"))
%>
<h1>欢迎 <%= user.Name %>!</h1>
  • JSP：
<%
User user = UserDao.getUser(request.getParameter("id"));
%>
<h1>欢迎 <%= user.getName() %>!</h1>

特点：

  • HTML 模板和服务逻辑混在一起
  • 服务器执行后输出 纯 HTML 给浏览器
返回给浏览器的内容是什么？
  • 浏览器收到的 HTTP 响应体 是完整 HTML 文本，例如：
<html>
  <head><title>用户资料</title></head>
  <body>
    <h1>欢迎 张三！</h1>
    <p>邮箱：zhangsan@example.com</p>
  </body>
</html>
  • 浏览器 完全不知道数据来源（数据库 / 文件 / API），它只看到 HTML
  • 页面渲染就是直接把 HTML 显示出来
总结机制
步骤角色/操作输出
用户访问 URL浏览器发 HTTP 请求请求报文
服务器执行脚本PHP/ASP/JSP 读取数据库 → 拼 HTMLHTML 文本（HTTP 响应体）
浏览器接收渲染 HTML → 显示页面页面呈现

特点：

  1. 前后端一体化：HTML + 业务逻辑在同一文件
  2. 浏览器永远只接收 HTML，不直接接触数据库
  3. 整页刷新：每次操作都走这个完整流程

总结

  • 2000 年前后，没有真正的前后端分离，网页是“后端一把梭”：后端生成 HTML → 浏览器整页刷新显示。
  • 动态页面 = 后端动态拼装 HTML，比如 PHP 从数据库取数据，再生成页面。
  • JavaScript 当时不具备动态刷新能力，因为浏览器没提供 API（AJAX 还没普及），DOM 操作也很弱。
  • 真正的“前端动态刷新”（局部更新页面）要等到 AJAX 出现（2005 年 Gmail/Google Maps 爆火） 才成为可能。

服务器在前端发展史上的产生原因和作用

静态页面时代（1990s）有没有服务器？

1. HTML 出现初期（1990–1992）
  • HTML 是文本文件，最初是为了在 全球科研机构内部共享文档。
  • 当时实验室里的人可以把 .html 文件 直接拷贝到别人电脑上，用浏览器打开。
  • 没有真正意义上的“服务器”，也没网络服务概念。
2. 浏览器出现以后（1993–1995）
  • 浏览器需要通过 网络访问 HTML 文件。
  • 此时出现了 HTTP 协议，客户端（浏览器）可以向远端计算机请求文件。
  • 这时候服务器才开始出现：
    • 用来 统一管理、提供 HTML 文件，别人可以通过网络访问。
    • 典型的早期服务器软件：CERN httpd（Tim Berners-Lee 发明），NCSA HTTPd。

✅ 所以，严格来说，服务器是在网络访问和共享文档的需求下产生的，而不是 HTML 本身必需的。

服务器为什么会产生？为了解决什么问题？

1. 问题背景
  • 实验室或科研人员手里有很多 HTML 文档。
  • 如果每次都靠拷贝文件、发邮件或者磁盘共享给别人，效率低、版本混乱。
  • 需要一种机制：别人能直接用浏览器访问最新的文档。
2. 服务器的作用

  1. 统一提供文件

    • 浏览器请求 URL → 服务器返回对应 HTML 文件。

  2. 集中管理

    • 所有文档集中存放，更新后所有用户访问到的都是最新版本。

  3. 网络传输协议支持

    • 提供 HTTP 协议接口，让浏览器能请求文件。

  4. 可扩展（动态页面时代）

    • 后来加入后端脚本处理能力（PHP/ASP/JSP） → 服务器不仅提供文件，还能生成动态内容。

静态页面时代 vs 动态页面时代的服务器角色对比

时代服务器作用内容来源用户体验
静态页面提供 HTML/CSS/图片文件磁盘上的固定文件每次访问都一样，没有交互
动态页面处理业务逻辑、访问数据库、生成 HTML数据库 + 模板文件页面可以根据用户、时间、数据变化

小结

  • 服务器不是 HTML 的必需品，但 HTML 和网络共享需求催生了服务器。
  • 最早的服务器只是文件提供者，类似一个“中央文档柜”。
  • 后来服务器增加了处理逻辑能力，才变成“动态内容生成器”，支撑了动态交互时代。

关于Ajax

Ajax 出现的历史背景

  • 问题：在 Web1.0 时代，每次要更新一点数据（比如提交一个表单、加载一条评论），浏览器都要向服务器发请求，服务器返回整个新的 HTML 页面，浏览器再整页刷新。体验卡顿且效率低。
  • 思考：有没有办法只拿数据，不要整个页面？
  • 突破：微软在 IE5 里引入了一个隐藏对象 XMLHttpRequest（XHR） ，允许 JS 在后台发送 HTTP 请求。
  • 结果：这就像给浏览器开了一个“后台通道”，不用刷新页面也能拿到数据，再由 JS 把数据塞进页面 → Ajax（Asynchronous JavaScript and XML）诞生。

Ajax 是什么？

Ajax（Asynchronous JavaScript and XML） ，直译是 “异步 JavaScript 和 XML”。

  • “异步”：不阻塞浏览器，可以边请求数据边让用户操作页面。
  • “JavaScript”：JS 脚本负责发起请求、接收数据、更新页面。
  • “XML”：最初常用 XML 作为数据格式（后来逐渐被 JSON 替代）。

⚠️ Ajax 并不是一个新的语言或框架，而是对已有技术的组合：

  • JavaScript（写逻辑）。
  • XMLHttpRequest (XHR) 对象（核心，发起异步请求）。
  • DOM 操作（把请求结果更新到页面）。

Ajax 带来的“异步刷新”

Ajax 出现之前（整页刷新）

场景：2000~2005 年，Ajax 还未普及

  • 请求方式
    浏览器只能通过 <a> 跳转、<form> 提交 或者 window.location 修改地址栏来发起 HTTP 请求。
  • 刷新效果
    每次请求，服务器返回一个完整的 HTML 页面。浏览器会丢弃旧页面，重新解析并渲染整个新页面。
    👉 这意味着：
    • 页面内容完全重新加载
    • CSS、JS、图片等资源可能会被缓存，但页面结构还是整体刷新
    • 用户体验上：页面会“白屏闪烁”一下
  • 开发模式
    后端一体化渲染（如 JSP、ASP、PHP），动态内容由后端插入 HTML，再整体返回给浏览器。
Ajax 出现之后（局部刷新）

场景：2005 年后，XHR 对象被应用到网页开发

  • 请求方式
    JavaScript 代码可以通过 XMLHttpRequest（XHR）对象，主动向服务器发起 HTTP 请求，而 无需刷新整个页面。

  • 刷新效果

    • 请求返回的数据通常是 JSON / XML / 纯文本
    • 浏览器不会替换掉整个页面，而是通过 JavaScript 读取数据，再用 DOM 操作修改页面的某个局部区域
      👉 结果就是：
    • 页面不会整体闪烁
    • 局部区域内容更新，用户感觉页面是“活的”
    • 体验类似桌面应用（如 Gmail、地图等）

  • 开发模式
    前端逐渐开始承担“数据展示 + 动态交互”的责任。
    后端更多是提供接口，返回 JSON 数据。
    —— 这也直接推动了 前后端分离 的发展。

Ajax 的基本原理（核心流程）

可以理解为：浏览器的 JS 代码，直接扮演了“小客户端”，和服务器交互，而不是把请求交给整个浏览器页面去处理。

工作步骤：

  1. 创建请求对象
    JS 通过 XMLHttpRequest（XHR）对象，准备和服务器通信。
var xhr = new XMLHttpRequest();
  1. 配置请求
    指定请求方式和 URL，例如：
xhr.open("GET", "/getComments", true); // true 表示异步
  1. 监听状态变化
    浏览器和服务器通信是分阶段的，XHR 提供 onreadystatechange 回调来监听过程。
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 服务器返回的数据
  }
};
  1. 发送请求
xhr.send(null); // GET 请求不用 body

  1. 处理响应

    • 服务器返回的可能是 XML/JSON/纯文本。
    • JS 拿到数据后，用 DOM API 把结果插到页面里，比如插入一个 <li> 评论。

Ajax 出现前后的关键对比

特点Ajax 前（整页刷新）Ajax 后（局部刷新）
请求入口<a> / <form> / 改 URLJS 代码（XMLHttpRequest）
返回内容整个 HTML 页面局部数据（JSON/XML）
页面刷新整体刷新（白屏重绘）局部更新（无白屏）
用户体验频繁跳转、卡顿感强流畅、像桌面应用
前后端关系后端主导（拼 HTML）前端主导（渲染 DOM）
核心差异浏览器 只能整体替换页面浏览器 允许局部修改 DOM

👉 根本原因：
Ajax 的核心突破在于 让 JavaScript 拥有了直接与服务器对话的能力，而不必依赖浏览器的整页加载机制。
以前是“浏览器决定刷新页面”，现在变成“前端开发者可以决定刷新哪一部分”。

案例列举

案例一：翻页变化

Ajax 前

用户点击“下一页”：

  • 浏览器发请求 /list?page=2
  • 服务器返回整个新的 HTML
  • 浏览器丢弃旧的，重绘新页面

Ajax 后

用户点击“下一页”：

  • JS 调用 xhr.open("GET", "/list?page=2")
  • 服务器返回 JSON：{ items: [...] }
  • JS 把新数据插入到页面的某个 <div>
  • 页面主体保持不动，只是列表区域换了

案例二：Google Maps (2005)

以前地图要切换区域 → 必须整页刷新。
Ajax 出现后：

  • 用户拖动地图时，JS 在后台请求新的地图切片。
  • 收到数据后，JS 把小块图片拼接到已有页面上。
  • 体验非常顺滑 → Web 应用从“文档”时代进入“应用”时代。

核心机制总结

  • 本质：Ajax 并不是新协议，而是 JS 调用浏览器内置的 HTTP 请求能力（XHR） 来和服务器通信。
  • 异步的意义：浏览器不会因为等待服务器而卡死，用户还能继续操作。
  • 数据驱动视图：服务端返回数据（JSON），前端决定怎么渲染页面。
  • 局部刷新：不再依赖整页 HTML，打破了 Web1.0 的限制。

Ajax 带来的影响

  • 前端开发地位提升：JS 不再只是“花瓶”，而是页面交互的核心。
  • 产生了 Web 2.0 的说法（网页变得像应用）。
  • 催生了前端框架（jQuery 最初就是为简化 Ajax 和 DOM 操作）。
  • 服务端也开始提供更灵活的数据接口（JSON API 出现）。

总结一下：
Ajax 的核心就是：让浏览器的 JS 能直接和服务器通信，获取数据后动态修改页面，而不必整页刷新。

额外延伸

后来 Ajax 的原理继续演变：

  • jQuery 的封装：用 $.ajax() 简化 XHR 繁琐的写法。
  • JSON 取代 XML：更轻量、更适合 JS。
  • Fetch API（HTML5 标准化，替代 XHR）。
  • Promise / async/await：解决异步回调地狱。
  • WebSocket：进一步突破，只要连接建立，服务器可以主动推送数据（实时通信）。

Web1.0->Web2.0

为什么会出现 “Web2.0” 的说法？

  1. Web1.0 的特点（1990s ~ 2004）
  • 以静态内容为主：页面主要是纯 HTML，内容少量更新靠人工改页面。
  • 浏览器交互简单：只能“看”和“点”，几乎没有“写”和“参与”。
  • 单向传播：用户被动接受信息（门户网站、个人主页），生产者和消费者分离。
  • 技术特征：静态网页 + 动态 CGI/PHP/JSP 生成整页刷新。
  1. Web2.0 的提出（2004~2005）

2004 年 O’Reilly 公司组织了一场会议，发现当时互联网形态有了很大变化，于是提出了“Web 2.0”的概念，用来区别过去的“Web 1.0”。
核心原因：

  • Ajax 出现 → 页面可局部刷新，提升了体验。
  • 博客、Wiki、SNS（社交网站）兴起 → 用户能贡献内容。
  • 标签（Tag）、RSS、社交分享 → 信息组织更灵活。
  • 数据驱动的应用 → Google Maps、Flickr、Facebook 等，用户不仅浏览，还能操作和创造。

一句话：

Web1.0 是“只读的互联网”，Web2.0 是“读写互动的互联网”。

Ajax 带来的质变

在 Web1.0 时代：

  • 页面刷新 = 整个 HTML 重新请求。
  • 用户体验比较“卡”，和桌面应用差距大。

在 Web2.0 时代（Ajax 之后）：

  • 页面可以 局部更新，只请求 JSON/XML 数据，不需要整页刷新。
  • 体验接近桌面软件（流畅、实时）。
  • 用户能参与：评论、发帖、分享、协作 → 形成 UGC（用户生产内容）。

根本原因：

  • 浏览器增加了 XMLHTTPRequest 对象，让 JS 可以直接与服务器通信。
  • 数据与视图分离：返回的数据可以不是 HTML，而是 JSON → 前端自己决定怎么渲染。

作为前端工程师，需要了解哪些？

  1. 技术角度

    • Ajax 的工作原理（XHR、JSON、局部刷新）。
    • Web2.0 带来的前端工程化转型：前端不只是页面样式，还要处理数据和交互逻辑。
    • 从 Web2.0 开始，前端工程师不再是“切图仔”，而是 负责交互体验与数据对接的工程角色。

  2. 产品与用户角度

    • Web2.0 代表了“用户参与感”的增强：用户可以评论、贡献、分享。
    • 前端的任务是承载和优化这些交互，保证体验自然流畅。

  3. 历史意义

    • Web2.0 是现代前端框架（Vue/React/Angular）出现的土壤。
    • 它奠定了“前后端分离”的思路：前端负责交互渲染，后端负责提供数据 API。

总结一下：
Web2.0 出现的原因： 技术升级（Ajax）、产品形态升级（UGC、SNS）、用户角色升级（被动 → 主动）。
前端工程师需要理解：

  • Ajax 带来的“数据和视图分离”的思想；
  • Web2.0 是前端从“页面制作者”到“应用开发者”的分水岭；
  • 它为 SPA（单页应用）、前后端分离奠定了基础。
avatar
文章
阅读
粉丝