前端技术演化史

2005-2013 Ajax时代

Properties1
tags时代叙事, ajax, jquery, 富交互

11分钟阅读

🌐 2005–2013 Ajax 时代

一句话定性

一个被遗忘了六年的 API(XMLHttpRequest),让网页第一次拥有了”局部更新”的能力。网页从”文档”变成了”应用”——但操作 DOM 的方式还停留在石器时代,于是 jQuery 成了整整一代人的救命稻草。

一、背景:行业现状

第一次浏览器战争结束,IE6 占据 90%+ 市场。表面平静,实则暗流涌动:

  • 2004 年 Gmail 上线:一个不刷新页面就能收发邮件、即时搜索的网页邮箱,震惊业界。
  • 2005 年 Google Maps 上线:可以拖拽、无缝缩放的地图,完全颠覆了”网页=静态文档”的认知。
  • 2005 年 2 月,Jesse James Garrett 写了一篇文章,给这种”异步、局部更新”的技术组合起了个名字:AJAX(Asynchronous JavaScript and XML)。

一个新词,点燃了整个行业。所有人都想做出”像桌面软件一样”的网页。同时,Firefox(2004)借 IE6 停滞之机崛起,第二次浏览器战争开打,2008 年 Chrome 带着 V8 引擎入场,把 JS 性能推上新台阶。

二、核心痛点:开发者面临什么

能力解锁了,但工具还在中世纪

  1. 原生 XMLHttpRequest 极其难用:要写一堆 readyState 状态判断,还要为 IE 和标准浏览器写两套创建逻辑。
  2. DOM 操作又啰嗦又跨浏览器不兼容:getElementById / attachEvent(IE)vs addEventListener(标准),选择 DOM 元素没有统一方式。
  3. JS 代码迅速膨胀成”意大利面条”:交互一复杂,就是满屏的回调和 DOM 拼接字符串,没有模块、没有结构。
  4. 没有依赖管理:引入库靠 <script> 标签手动拼,顺序错了就崩,全局命名空间互相污染。
  5. CSS 动画/特效全靠 JS 手写:还要处理各浏览器的兼容写法。

核心矛盾:网页要做的事(富交互)已经追上了桌面软件,但写网页的方式(手撸 DOM + 兼容性 if-else)还原始得令人发指。

三、代表技术

技术角色专题
Ajax / XMLHttpRequest时代的引爆点:异步局部更新渲染模式演进史
jQuery (2006)时代的王者:$ 抹平一切jQuery
ES5 (2009)语言现代化的奠基(strict mode、JSON、数组方法)ES5
Chrome + V8 (2008)JS 性能革命,让大型 JS 应用成为可能Chrome
Backbone (2010)第一个把 MVC 引入前端的尝试Backbone
Prototype.js / MooTools / DojojQuery 的竞争者(后被淘汰)—
JSON (取代 XML)Ajax 里的 “X” 其实很快被 JSON 取代—

四、为什么诞生:技术出现的原因

  • 为什么是 jQuery 赢了? 因为它精准命中了那个时代唯一最痛的点:用一个 $() 选择器(借鉴 CSS 选择器语法)+ 链式调用,同时解决了 DOM 选择、操作、事件、Ajax、动画的跨浏览器兼容问题。它的口号”write less, do more”是开发者的福音。Slogan 背后是一种哲学:不改变 Web 本身,只做一层兼容性的薄抹平层。
  • 为什么 Ajax 现在才爆发? XMLHttpRequest 1999 年就在 IE5 里了,但当时:① 没人想到这样用;② JS 引擎太慢撑不起复杂应用;③ Google 用 Gmail/Maps 做出了示范,证明了商业价值。技术的爆发往往不是发明的时刻,而是被”正确使用”的时刻。
  • 为什么 Backbone 出现? 因为 jQuery 解决了”操作 DOM”,但没解决”组织代码”。当应用大到一定程度,jQuery 写出来的就是一团乱麻——数据和视图混在一起,没人知道改一个地方会影响哪里。Backbone 引入 Model/View/Collection,第一次尝试给前端代码立规矩。
  • 为什么 Chrome + V8 重要? V8 用 JIT 编译把 JS 执行速度提升了一个数量级。这件事的二阶效应极其深远:它让”用 JS 写大型应用”从奢望变成现实,也直接让 Node.js(2009,基于 V8)成为可能——JS 第一次跑出了浏览器。

五、解决了什么:具体价值

  • jQuery 让前端开发的门槛暴跌:不懂浏览器兼容细节的人也能写出能跑的交互。它的普及程度一度高到”jQuery 几乎等于 JavaScript”。
  • Ajax 模式重新定义了 Web 的可能性:单页局部刷新、即时搜索、无限滚动、富表单——现代 Web 应用的交互范式在这个时代成型。
  • Backbone 把”前端工程”的概念第一次摆上台面:数据驱动视图、关注点分离——这些理念是后来所有框架的思想源头。
  • V8 引擎把性能瓶颈打开,为下一个时代的重型 SPA 框架铺好了高速公路。

六、带来的新问题:技术债与缺陷

jQuery 的成功,正是它衰落的种子

  1. 命令式 DOM 操作不可扩展:jQuery 是”手把手告诉浏览器怎么改 DOM”(命令式)。应用一复杂,你要手动同步”数据”和”视图”——改了数据要记得改 DOM,改了 DOM 又要记得改数据。状态和视图的同步成了 bug 的最大来源。
  2. 没有真正的组件化:jQuery 插件本质是函数,无法封装”状态 + 视图 + 行为”为可复用单元。
  3. Backbone 的”双向同步”要手写:它给了 MVC 骨架,但 View 怎么响应 Model 变化,还得自己写 listenTo + 重渲染逻辑,模板和数据的绑定不是自动的。
  4. 依赖管理依然原始:CommonJS / AMD(RequireJS)开始出现,但浏览器原生不支持模块,要靠工具或运行时 loader 凑合。
  5. 状态散落各处:数据可能在 DOM 的 data-* 属性里、在某个全局变量里、在某个闭包里——没有单一数据源。

核心新矛盾浮现:当应用足够复杂,“手动保持数据和 DOM 同步”会成为压垮开发者的最后一根稻草。

七、对下一代技术的影响:因果链

jQuery 命令式操作 DOM → 应用一大就成"意大利面" → 状态/视图同步成灾难
        │
        ↓
开发者开始渴望:"我只想描述 UI 长什么样,别让我手动改 DOM"(声明式)
        │
        ├──► AngularJS(2010) 提出"双向数据绑定":数据变,视图自动变 → 一度封神
        │
        └──► React(2013) 提出"UI = f(state)" + 虚拟 DOM → 重新定义一切
                │
                ↓
                进入 ►► [[2013-2018 SPA时代]]

同时:
V8 引擎(2008) ──► Node.js(2009) ──► 前端工程化、构建工具的整个时代成为可能
Backbone 的 MVC ──► 启发了 Angular/Ember 的设计
Chrome 崛起 ──► 第二次浏览器战争,IE 走向衰亡

📊 本时代技术因果图

这张图聚焦本时代内部:谁因为谁的什么痛点而出现 

flowchart TD
    xhr["XMLHttpRequest<br/>(1999 埋下, 被遗忘 6 年)"]
    gmail["Gmail 2004 / Google Maps 2005"]
    ajax["Ajax 2005 命名"]
    webapp["网页变成应用"]
    dompain["DOM 难用 + 跨浏览器不兼容"]
    jquery["jQuery 2006<br/>$ + 链式调用"]
    spaghetti["代码膨胀成意大利面<br/>无模块 / 无结构"]
    backbone["Backbone 2010 (MVC)"]
    v8["Chrome + V8 2008"]
    fastjs["JS 执行快一个量级"]
    node["Node.js 2009"]
    imperative["jQuery 命令式操作 DOM"]

    xhr -->|"被 Google 正确使用, 证明商业价值"| gmail
    gmail -->|"网页能像桌面软件不刷新更新"| ajax
    ajax -->|"富交互范式成型"| webapp
    dompain -->|"write less, do more 的薄抹平层"| jquery
    ajax -->|"也需要顺手的异步封装"| jquery
    webapp -->|"应用变大"| spaghetti
    spaghetti -->|"jQuery 不解决组织代码"| backbone
    v8 -->|"JIT 编译"| fastjs
    fastjs -->|"JS 终于足够快, 能跑出浏览器"| node

    jquery --> imperative
    imperative -.->|"伏笔: 手动同步状态/视图成灾, 催生声明式"| react["React / 声明式"]
    node -.->|"伏笔: 前端工程化基础设施"| build["构建工具时代"]

    classDef seed fill:#fff3e0,stroke:#e65100;
    classDef next fill:#eceff1,stroke:#607d8b,stroke-dasharray:4 3;
    class xhr,v8,node seed;
    class react,build next;

本时代的历史地位

Ajax 时代是前端的”农业革命”:网页第一次能”养活”复杂应用。jQuery 是这个时代的图腾——它用最务实的方式解决了最痛的问题,却也因为它的”命令式”本质,亲手为自己刨好了坟墓。它教会了整个行业一个深刻教训:抹平差异只是权宜之计,真正的进步是改变思维范式——从”怎么改 DOM”到”UI 应该长什么样”。 这个范式转变,就是下一个时代的全部主题。

🔗 上一篇:1995-2005 浏览器时代 | 下一篇:2013-2018 SPA时代 🔗 相关专题:jQuery | Backbone | Chrome | ES5

关系图谱

反向链接