servlet，jsp都讲完了，是该讲讲JS了。但梳理之前，我们还是把这么技术的背景好好的梳理下。因为只有知道了背景，才会有真正了解这门技术解决了哪些痛点，它是怎么孕育而生的。这个篇章分为上下两个章节。
一、历史背景与催生（1990-1995）
1、Web 的静态的 "只读" 时代
在 20 世纪 90 年代初，互联网还处于 "学术化" 向 "大众化" 转型的临界点。彼时的网络主要用于科研机构间的数据传输，普通用户想要访问信息，需要通过命令行工具（如 Telnet）输入复杂指令，门槛极高。
1989 年，蒂姆・伯纳斯 - 李（Tim Berners-Lee）在欧洲核子研究组织（CERN）发明了 HTML 和 HTTP 协议，为 Web 的诞生奠定了基础，但早期 Web 更像 "数字文档库"------ 用户只能被动阅读，无法与内容互动。
1993 年，NCSA（美国国家超级计算应用中心）的研发团队推出了 Mosaic 浏览器，彻底改变了这一局面。作为世界上第一款支持图文混排的图形化浏览器，Mosaic 首次将 "文字 + 图片" 整合在同一页面中，用户无需记忆指令，只需通过鼠标点击 "超链接" 就能跳转页面。据当时数据统计，Mosaic 推出后仅一年，互联网用户数量就从不足 100 万激增至 1000 万，它就像 "互联网的第一扇窗"，让普通大众真正感受到了 Web 的魅力。
但早期 Web 的局限性也十分突出：网页完全由 HTML 和 CSS 构建，属于典型的 "静态网页"。HTML 负责定义内容结构（如标题、段落、图片位置），CSS 负责美化样式（如字体颜色、背景图案），二者结合只能呈现 "固定不变" 的页面。举个具体场景：当时的在线表单（如用户注册页），用户填写完信息点击 "提交" 后，浏览器会将所有数据打包发送到服务器，服务器处理后重新生成一个完整的新页面，再传回浏览器显示 ------ 哪怕只是 "密码格式错误" 这样的简单提示，也需要刷新整个页面。这种 "全页刷新" 的交互模式，不仅浪费带宽（当时主流网速仅 28.8Kbps，刷新一次页面需等待 10-20 秒），更割裂了用户的操作流程，就像阅读书籍时，每翻一页都要重新从头开始。
2、客户端的智能
随着 Mosaic 掀起的 "浏览器热潮"，1994 年网景公司（Netscape）成立，同年 10 月推出了 Netscape Navigator 1.0 浏览器。这款浏览器在 Mosaic 的基础上优化了加载速度，支持更多图片格式（如 GIF 动画），上市后迅速占领市场 ------ 据 1995 年行业报告显示，Netscape Navigator 的市场份额一度高达 82%，成为当时浏览器市场的绝对霸主。
但网景很快发现，静态 Web 已无法满足用户需求。当时的主流场景中，用户痛点日益明显：比如在线购物时，填写收货地址后需等待页面刷新才能确认格式是否正确；再比如在线问卷，每选一个选项都要刷新页面保存进度。这些简单操作都依赖服务器处理，不仅导致服务器负载激增（网景曾统计，某电商网站因表单验证请求，服务器日均处理量增加 30%），更让用户陷入 "等待 - 刷新 - 等待" 的恶性循环。
行业迫切需要一种 "客户端智能" 技术：让浏览器具备基础的逻辑处理能力，在本地完成简单任务（如表单验证、动态样式切换），无需频繁请求服务器。举个具体例子：当用户在表单中输入手机号时，浏览器能实时判断 "是否为 11 位数字"，并立即弹出提示，而不是等到提交后再刷新页面；当用户鼠标悬停在按钮上时，浏览器能直接修改按钮颜色，无需向服务器请求新的样式文件。这种 "本地处理" 的需求，就像为浏览器装上 "小大脑"，成为 JavaScript 诞生的直接导火索。
Brendan Eich的奇迹
1995 年 4 月，网景公司为抢占 "客户端脚本语言" 的先机，紧急招募了程序员 Brendan Eich。当时公司给出的任务非常明确：在 6 周内开发一种脚本语言，嵌入 Netscape Navigator 浏览器，实现 "客户端逻辑处理"，且语法要向当时最热门的 Java 语言靠拢 ------ 因为 1995 年正是 Java 的 "爆发年"，Sun 公司推出的 Java 语言凭借 "跨平台" 特性风靡行业，网景希望借助 Java 的热度降低开发者的学习成本。
但实际开发节奏比预想中更紧迫：由于市场竞争加剧（传闻微软已开始研发类似技术），网景将工期压缩到 10 天。Brendan Eich 凭借扎实的编程语言设计经验，在极短时间内完成了核心架构：他借鉴了 Scheme 语言的函数式特性（如匿名函数）、Self 语言的原型继承，同时为了贴合 Java 的语法习惯，保留了 "类""对象" 等概念的表面设计（但底层实现完全不同）。
这门语言的命名历程也充满 "时代印记"：最初因支持 "实时交互" 被命名为 Mocha（意为 "摩卡咖啡"，象征 "活力"）；1995 年 9 月，网景与 Sun 公司达成合作，为了借助 Java 的品牌效应，先更名为 LiveScript；同年 12 月，在 Netscape Navigator 2.0 正式发布前，最终定名为 "JavaScript"。但必须明确的是，JavaScript 与 Java 本质上毫无关联：Java 是需要编译的静态类型语言，适合开发大型应用；JavaScript 是无需编译的动态类型语言，专注于客户端交互。当时行业内就有开发者调侃："JavaScript 和 Java 的关系，就像'雷锋'和'雷峰塔'------ 只是名字像而已。"
1995 年 12 月，搭载 JavaScript 1.0 的 Netscape Navigator 2.0 正式发布。当用户第一次在网页上看到 "鼠标悬停按钮变色""表单实时验证" 的效果时，整个行业都意识到：Web 的交互时代，来了。
二、早期发展浏览器大战时代（1995-2000）
1、JavaScript 1.0 的发布与早期能力
1995 年 12 月，Netscape Navigator 2.0 的发布，让 JavaScript 第一次走进公众视野。当时的 JavaScript 1.0 虽然功能简陋，却实现了 "从 0 到 1" 的突破，为 Web 交互带来了三个关键能力：
一是基础 DOM 操作。DOM（文档对象模型）就像 "网页的骨架"，JavaScript 通过 DOM API 能直接修改页面元素 ------ 比如在新闻网页中，点击 "展开全文" 按钮，JavaScript 可以动态添加隐藏的段落文本；在图片画廊中，点击缩略图能切换大图的显示内容。当时的开发者曾做过一个经典案例：用 JavaScript 实现 "动态时钟"，网页上的时间每秒自动更新，无需刷新页面，这个看似简单的功能，在当时引发了大量开发者的模仿热潮。
二是客户端表单验证。这是 JavaScript 早期最实用的功能之一。在没有 JavaScript 之前，用户填写表单时若输入错误（如邮箱少写 "@"、密码长度不足），必须提交后等待服务器返回错误提示，整个过程需等待 10-30 秒。而 JavaScript 能在客户端实时校验：当用户输入完成后，点击 "提交" 的瞬间，脚本就会检查数据格式，若有误立即弹出 alert 警告框，避免无效的服务器请求。据网景当时的统计，引入 JavaScript 表单验证后，某门户网站的服务器请求量减少了 25%，用户提交表单的成功率提升了 40%。
三是简单交互反馈。除了 alert 警告框、confirm 确认框，JavaScript 还支持 "鼠标事件"（如 onclick 点击、onmouseover 悬停）和 "页面加载事件"（如 onload）。比如当用户点击 "返回顶部" 按钮时，JavaScript 能通过 scrollTo 方法让页面平滑滚动到顶部；当页面加载完成后，能自动弹出 "欢迎访问" 的提示框。这些交互虽然简单，却让静态网页有了 "呼吸感"，不再是冷冰冰的文档。
但 JavaScript 1.0 的局限性也很明显：一方面，功能极其有限 ------ 没有循环遍历数组的便捷方法，无法处理复杂的 JSON 数据，甚至不支持 try/catch 异常处理，遇到语法错误就会导致整个脚本崩溃；另一方面，安全性问题凸显。1996 年，有黑客利用 JavaScript 的 "eval 函数"（可执行字符串代码）编写恶意脚本，通过伪装的网页窃取用户的浏览器 Cookie（包含登录信息），这一事件被称为 "JavaScript 第一次安全危机"，也让当时很多企业对 JavaScript 持怀疑态度，甚至禁止在内部网站使用。
2、微软的入局
JavaScript 的成功，很快引起了科技巨头微软的警惕。1995 年，微软正全力推广 Windows 95 操作系统，而 Netscape Navigator 的崛起，让微软意识到 "浏览器可能成为操作系统的竞争对手"------ 如果用户通过浏览器就能完成所有操作，Windows 的重要性将大幅下降。为了遏制网景，微软迅速开启了 "浏览器反击战"。
1995 年 8 月，微软推出了 Internet Explorer 1.0（IE 1.0），但这款浏览器功能简陋，市场份额不足 5%。1996 年，微软采取了两项关键策略：一是 "技术模仿 + 差异化"，在 IE 3.0 中嵌入了一种与 JavaScript 兼容的脚本语言，命名为 JScript（因未获得 Sun 公司的 "JavaScript" 商标授权），JScript 虽然能实现类似功能，但在 API 设计上故意与 JavaScript 存在差异 ------ 比如网景用document.layers操作层元素，微软则用document.all；二是 "捆绑预装"，将 IE 浏览器免费捆绑在 Windows 95 及后续版本中，用户购买电脑后无需额外下载就能使用 IE，这一策略直接击中了网景的软肋（当时 Netscape Navigator 需要付费下载）。
短短两年间，浏览器市场格局发生逆转：1997 年，IE 的市场份额从 5% 飙升至 36%，而网景则从 82% 跌至 54%；1999 年，IE 的市场份额突破 80%，网景彻底失去主导地位，这场 "浏览器大战" 以微软的胜利告终。
但这场战争的代价，却由开发者承担。由于 JavaScript 和 JScript 存在大量兼容性差异，同一功能需要编写两套代码才能适配两大浏览器。比如要实现 "获取网页中的 div 元素"，在网景浏览器中需写document.layers['div1']，在 IE 中则需写document.all['div1']；要实现 "AJAX 的雏形（异步请求）"，网景用XMLHttpRequest，IE 则用ActiveXObject("Microsoft.XMLHTTP")。当时的开发者流传着一句话："写一行代码，测十个浏览器"，兼容性问题成为前端开发的 "噩梦"，也严重阻碍了 Web 技术的统一发展 ------ 很多优秀的脚本功能，因无法跨浏览器使用而被迫放弃。
1998 年，网景公司因持续亏损，最终被美国在线（AOL）收购，"浏览器大战" 的第一阶段落幕，但 JavaScript 的 "兼容性困境"，才刚刚开始。
3、ECMAScript 的诞生
浏览器大战导致的 "技术分裂"，引起了整个行业的担忧。如果任由微软和网景各自定义脚本语言标准，未来的 Web 可能会分裂成 "IE 生态" 和 "网景生态"，开发者将面临更大的成本，用户也可能因浏览器不同无法访问同一网站。为了避免这一局面，1996 年 11 月，网景公司主动将 JavaScript 提交给欧洲计算机制造商协会（ECMA），希望通过国际化标准组织制定统一规范。
ECMA 迅速成立了 TC39 委员会（负责脚本语言标准化），成员包括微软、Sun、IBM 等科技公司，Brendan Eich 也作为核心成员参与其中。经过一年多的讨论、妥协与修改，1997 年 6 月，ECMA 正式发布了 ECMAScript 1.0 标准（编号 ECMA-262），首次明确了 JavaScript 的核心语法、数据类型、内置对象等基础内容。
这份标准的关键意义在于 "统一核心"：它规定了 JavaScript 必须支持的基础特性（如字符串方法indexOf、数组方法push、布尔类型true/false），同时允许浏览器厂商在标准之外扩展功能（如 IE 的document.all、网景的document.layers）。这就像 "制定了汽车的通用底盘标准"，不同厂商可以在底盘上加装不同的配件，但核心结构保持一致。
1998 年，ECMAScript 2.0 和 3.0 相继发布，进一步完善了语言特性 ------ 比如加入了try/catch异常处理、正则表达式支持、JSON格式的早期雏形。值得注意的是，微软虽然在浏览器市场占据主导，但也不得不遵守 ECMAScript 标准：从 IE 5.5 开始，JScript 全面兼容 ECMAScript 3.0，这意味着开发者编写的核心代码，终于可以在两大浏览器中通用。
ECMAScript 的诞生，不仅结束了 "脚本语言无标准" 的混乱局面，更让 JavaScript 从 "网景的专属工具" 变成 "全行业的通用语言"。从此，JavaScript 的发展不再依赖单一厂商，而是进入了 "标准驱动" 的新阶段。
三、AJAX 与 Web 2.0 时代（2001-2009）
1、XMLHttpRequest 的出现
2000 年前后，虽然 ECMAScript 标准统一了核心语法，但 Web 交互的 "痛点" 依然存在 ------ 页面刷新问题。当时的主流 Web 应用（如在线邮箱、论坛），哪怕只是更新一个小小的数据（如收到新邮件的提示），都需要刷新整个页面。以 2000 年的 Hotmail（当时最大的在线邮箱）为例，用户需要每隔几分钟点击 "刷新" 按钮，才能查看是否有新邮件，整个过程耗时 5-10 秒，体验极差。
就在行业陷入 "刷新困境" 时，微软在 2001 年推出的 Outlook Web Access（OWA，网页版 Outlook）中，悄悄加入了一个名为 XMLHttpRequest 的内置对象。这个对象的设计初衷很简单：让浏览器能在 "后台" 与服务器通信，无需打断用户当前的操作。比如在 OWA 中，用户正在编辑邮件时，浏览器会通过 XMLHttpRequest 偷偷向服务器发送请求，检查是否有新邮件，若有则在页面角落弹出提示 ------ 整个过程无需刷新页面，用户甚至察觉不到通信的发生。
XMLHttpRequest 的技术原理并不复杂：它本质是一个 "HTTP 请求代理"，能通过 JavaScript 控制请求的发起、参数设置、响应处理。开发者可以用它发送 GET/POST 请求，接收服务器返回的 XML 或文本数据，再通过 DOM 操作更新页面局部内容。但在当时，这个对象并未引起行业关注 ------ 一方面，它是微软的 "私有特性"，仅支持 IE 浏览器；另一方面，Web 开发的主流思路仍停留在 "静态页面 + 服务器渲染"，很少有人意识到它的潜力。
直到 2004 年，Mozilla（网景破产后成立的开源组织）在 Firefox 1.0 中实现了 XMLHttpRequest，并将其纳入标准 API；同年，苹果也在 Safari 浏览器中支持了这一对象。至此，XMLHttpRequest 成为主流浏览器的通用特性，为后续 AJAX 技术的爆发埋下了伏笔。
2、AJAX 与 Gmail/Google Maps
2005 年，Web 开发领域迎来了 "革命性时刻"。这一年，Web 开发者 Jesse James Garrett 发表了一篇名为《AJAX：A New Approach to Web Applications》的文章，首次提出了 "AJAX"（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）的概念。他在文章中指出：将 XMLHttpRequest（异步通信）、JavaScript（逻辑处理）、CSS（样式美化）、DOM（页面更新）、XML（数据交换格式）结合起来，能打造出 "媲美桌面应用的 Web 体验"。
AJAX 的真正爆发，离不开 Google 的 "实战背书"。2004 年，Google 推出了 Gmail（网页版邮箱），2005 年又推出了 Google Maps（谷歌地图），这两款产品将 AJAX 技术的潜力发挥到了极致。
以 Google Maps 为例：在传统地图网站中，用户查看不同区域需要点击 "上一页 / 下一页" 刷新页面，而 Google Maps 允许用户直接用鼠标 "拖动地图"------ 背后的原理是：当用户拖动鼠标时，JavaScript 实时计算拖动的方向和距离，通过 XMLHttpRequest 向服务器请求 "当前视野内的地图瓦片数据"，服务器返回数据后，JavaScript 再将新的地图瓦片拼接到页面上，整个过程流畅无卡顿，就像在使用本地的地图软件。当时有媒体评价："Google Maps 让人们意识到，Web 应用可以做得和 Photoshop、Office 一样流畅。"
Gmail 则彻底改变了在线邮箱的体验：用户发送邮件时，无需等待页面刷新，JavaScript 会在后台通过 AJAX 提交数据，同时显示 "发送中" 的动态提示；收到新邮件时，页面会自动弹出通知，用户无需手动刷新；甚至可以在编辑邮件时，实时保存草稿到服务器 ------ 这些功能在今天看来习以为常，但在 2005 年，完全颠覆了人们对 Web 应用的认知。
据当时的统计，Gmail 和 Google Maps 推出后，采用 AJAX 技术的网站数量在一年内增长了 5 倍，包括亚马逊、eBay 等电商平台，都纷纷重构页面加入 AJAX 特性。AJAX 的普及，标志着 Web 2.0 时代的正式到来 ------Web 不再是 "单向的信息发布平台"，而是 "双向互动的应用平台"，用户从 "被动阅读者" 变成 "主动参与者"，互联网开始进入 "个性化、社交化" 的新阶段。
3、jQuery 的统治
尽管 AJAX 技术打破了 "全页刷新" 的枷锁，但 2005-2006 年的前端开发仍面临两大 "拦路虎"：一是浏览器兼容性的 "历史遗留问题"，二是原生 DOM API 的 "繁琐性"。当时主流浏览器（IE 6、Firefox 1.5、Safari 2.0）对 DOM 操作、事件绑定的实现差异巨大 ------ 比如绑定点击事件，IE 用attachEvent('onclick', fn)，Firefox 用addEventListener('click', fn)；获取元素样式，IE 用element.currentStyle，标准浏览器用getComputedStyle(element)。开发者需要编写大量 "兼容性判断代码"，比如一段简单的 "获取元素并绑定点击事件" 功能，原生 JavaScript 代码需包含 3 层判断：
javascript
// 2006年获取元素并绑定点击事件的原生代码
function bindClick(id, fn) {
var elem;
// 兼容IE和标准浏览器的元素获取方式
if (document.getElementById) {
elem = document.getElementById(id);
} else if (document.all) {
elem = document.all[id];
} else if (document.layers) {
elem = document.layers[id];
}
// 兼容事件绑定方式
if (elem.attachEvent) {
elem.attachEvent('onclick', fn);
} else if (elem.addEventListener) {
elem.addEventListener('click', fn, false);
} else {
elem.onclick = fn;
}
}这种 "重复且冗余" 的代码，占用了开发者 60% 以上的精力，严重制约了开发效率。
2006 年 1 月，美国开发者 John Resig 在纽约的一次技术分享中，首次展示了自己开发的 "简化 DOM 操作工具库"------jQuery。这款工具库的核心目标就是解决上述痛点，其核心理念 "Write Less, Do More"（写得更少，做得更多），很快击中了开发者的需求。
jQuery 的革命性优势体现在三个方面：
第一是 "链式调用 + 简洁 API"，将复杂的 DOM 操作压缩为 "一行代码"。比如上述 "获取元素并绑定点击事件"，jQuery 只需写('#id').click(fn)，内部已封装所有兼容性判断；再比如 "隐藏元素并添加动画"，原生代码需写 10 余行样式修改和定时器逻辑，jQuery 用('#id').hide('slow')即可实现，且动画效果在所有浏览器中表现一致。据当时的开发者反馈，引入 jQuery 后，DOM 相关代码量平均减少 70%，开发效率提升至少 2 倍。
第二是 "内置 AJAX 封装"，解决了异步请求的兼容性问题。原生 XMLHttpRequest 在 IE 6 中需要用ActiveXObject创建，标准浏览器用new XMLHttpRequest()，jQuery 的$.ajax()方法统一了这两种方式，开发者只需传入 URL 和回调函数，无需关注底层实现：
javascript
// jQuery的AJAX请求代码
$.ajax({
url: 'data.json',
type: 'GET',
success: function(data) {
$('#content').html(data.content); // 成功后更新页面
},
error: function() {
alert('请求失败');
}
});这种 "开箱即用" 的 AJAX 方案，让更多开发者能轻松实现异步交互，加速了 AJAX 技术的普及。
第三是 "插件生态的快速崛起"。jQuery 设计了灵活的插件机制，开发者可以基于 jQuery 扩展功能，并发布到社区。到 2008 年，jQuery 插件库已包含超过 10000 个插件，覆盖轮播图（如 Slick）、表单验证（如 Validate）、弹窗（如 Layer）、图表（如 Flot）等几乎所有前端场景。比如电商网站常用的 "商品图片轮播"，开发者无需从零开发，只需引入 jQuery 和轮播插件，配置 3-5 行参数即可实现 ------ 这种 "模块化复用" 的模式，彻底改变了 "重复造轮子" 的前端开发现状。
jQuery 的市场渗透率也呈现 "爆发式增长"：2007 年，全球 Top 1000 网站中仅有 15% 使用 jQuery；2009 年，这一比例飙升至 78%，包括微软、谷歌、亚马逊、淘宝等巨头企业的官网，均将 jQuery 作为 "前端基础库"。当时的前端面试中，"是否熟练使用 jQuery" 成为衡量开发者能力的核心标准之一，甚至出现 "不会 jQuery 就找不到前端工作" 的行业现象。
更重要的是，jQuery 间接推动了 "前端工程化" 的萌芽。它让开发者意识到 "工具库可以提升效率"，进而催生了后续的 RequireJS（模块化加载）、Grunt（自动化构建）等工具，为 2010 年后的前端框架革命奠定了 "重视工具链" 的思想基础。
从 2006 到 2012 年，jQuery 统治前端开发长达 6 年，被称为 "前端开发的黄金时代工具"。尽管后来被 React、Vue 等框架逐步替代，但它解决兼容性、简化 DOM 操作的核心思路，至今仍影响着前端技术的发展 ------ 可以说，jQuery 不仅是一款工具库，更是 "前端开发从'原生时代'走向'工程化时代'的桥梁"。
最后小结：
今天一起回顾JavaScript 发展的前 20 年（1990-2009），它完成了从 "仓促诞生的客户端脚本" 到 "支撑 Web 2.0 的核心技术" 的蜕变：
- 1990-1995 年 "诞生期"：在静态 Web 的局限性与 "客户端智能" 的需求中，JavaScript 以 "10 天奇迹" 问世，初步解决了 "表单验证、简单交互" 的痛点，为 Web 注入了 "动态基因"；
- 1995-2000 年 "纷争期"：浏览器大战导致技术分裂，但 ECMAScript 标准的诞生，让 JavaScript 摆脱 "厂商控制"，进入 "标准化发展" 的正轨；
- 2001-2009 年 "复兴期"：XMLHttpRequest 与 AJAX 技术打破 "全页刷新" 瓶颈，jQuery 则解决了兼容性与效率问题，推动 Web 从 "静态文档库" 升级为 "动态应用平台"，最终迎来 Web 2.0 时代的繁荣。
这一阶段的每一步突破，都源于 "解决用户体验痛点" 与 "提升开发效率" 的核心需求 ------ 而这种 "需求驱动技术进化" 的逻辑，也将贯穿 JavaScript 后续的发展历程。未完待续........