这七项技术几乎每个踩过 Web 开发门槛的人都对着它们发过呆。我见过太多新手能把HTML 是超文本标记语言、CSS 是样式表、JavaScript 是脚本语言背得滚瓜烂熟一放进项目就懵——特别是 jQuery、JSP、JSTL、Ajax 这几个带缩写的听着就像一家子实际各干各的活儿分属完全不同的阵营。这篇文章我打算换个讲法不按技术列表一项一项背定义而是把七项技术全部放进一次真实的浏览器请求里看它们在请求链路上各自站在哪个位置、负责哪个环节。定位清楚了区别和用途自然就浮出水面。适合刚学完基础语法、正在做第一个完整项目的同学也适合从纯前端转后端的开发者重新梳理知识版图。1. 先建立全局视角七项技术在同一条请求链路上的位置1.1 用一次浏览器请求走完七项技术的站台想象你在地址栏输入一个网址回车。这一瞬间开始浏览器和服务器之间发生了一次完整的对话七项技术在这场对话里各司其职第一步浏览器向服务器发起请求。如果请求的是.html这类静态文件服务器直接把文件原样丢回如果请求的是.jsp服务器不会傻乎乎把 JSP 文件给你看而是先在服务器内部执行 JSP 里的 Java 代码和 JSTL 标签把动态数据拼进去生成一份纯 HTML再送回浏览器。这个阶段JSP 和 JSTL 在服务器端工作用户从头到尾看不到它们的存在。第二步浏览器收到 HTML 后开始解析。HTML 负责定义页面的骨架——有哪些标题、表格、文本框CSS 负责让骨架好看——颜色、间距、圆角、动画JavaScript 负责让页面活起来——点击按钮弹出弹窗、校验表单、操作页面元素。这三项都在浏览器里运行统称前端三兄弟。第三步用户在页面上操作比如删除一行数据。这时候 Ajax 登场了。它让 JavaScript 在不刷新整个页面的前提下悄悄给服务器发一条请求等数据回来后再用 JavaScript 更新页面局部内容。注意Ajax 请求的目标可以是 Servlet、JSP也可以是返回 JSON 的 REST 接口。第四步回到服务器。如果是传统 JSP 项目请求打到 ServletServlet 查数据库、拼数据要么转发给 JSP 让 JSTL 渲染成 HTML 返回要么直接把 JSON 字符串写回响应交给浏览器里的 JavaScript 处理。jQuery 在这条链路里更像一个工具箱它本身就是 JavaScript 写的只是把原生 JavaScript 里繁琐的 DOM 操作、事件绑定、Ajax 请求封装成了更简洁的写法。它不改变任何分工只是让干活更顺手。1.2 一张表格看懂七项技术的边界**| 技术 | 运行位置 | 核心职责 | 最终产物 | | --- | --- | --- | --- | | HTML | 浏览器 | 定义页面结构和内容 | DOM 节点 | | CSS | 浏览器 | 定义视觉表现与布局 | 渲染后的样式 | | JavaScript | 浏览器也有 Node.js 服务端 | 行为逻辑、动态操作、发送请求 | 操作 DOM、收发数据 | | jQuery | 浏览器 | 封装原生 JS 的工具库 | 简化的 JS 代码 | | JSP | 服务器Servlet 容器 | 动态生成 HTML 内容 | HTML 片段或完整页面 | | JSTL | 服务器 | JSP 里的标准标签库 | JSP 渲染时的逻辑控制 | | Ajax | 浏览器 | 异步收发数据的技术方式 | 局部页面更新 |这里有个关键认知前端技术HTML/CSS/JS/jQuery/Ajax跑在浏览器里服务端技术JSP/JSTL跑在服务器里。很多人混淆 JSP 和 JavaScript就是因为没弄明白这个最基本的运行环境差异。2. 前端三兄弟HTML、CSS、JavaScript 的分工与边界2.1 HTML 管结构、CSS 管表现、JavaScript 管行为我常用盖房子来比喻这三者的关系。HTML 是房子的框架和户型图——哪里是客厅、哪里是卧室、承重墙在哪这些决定了页面有什么CSS 是装修设计方案——墙面刷什么颜色、沙发摆哪个位置、窗帘什么质感这些决定了页面长什么样JavaScript 是房子的水电和智能系统——按下开关灯亮、拉开窗帘自动透光、门禁识别来客这些决定了页面能做什么。看一段极简的例子就能感受到分工!-- HTML定义骨架 -- !DOCTYPE html html langzh-cn head meta charsetutf-8 title用户信息卡/title link relstylesheet hrefstyle.css /head body div classcard iduserCard h2 classcard-title张三/h2 p classcard-desc前端工程师喜欢折腾新技术/p button idfollowBtn关注/button /div script srcapp.js/script /body /html/* CSS负责表现 */ .card { border-radius: 8px; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .card-title { font-size: 20px; color: #333; }// JavaScript负责行为 let btn document.getElementById(followBtn); btn.addEventListener(click, function() { btn.textContent 已关注; btn.disabled true; });注意 HTML 里的link relstylesheet hrefstyle.css和script srcapp.js/script这就是在 HTML 骨架里挂载 CSS 和 JavaScript 的方式。CSS 和 JS 可以写在一份 HTML 文件内部也可以拆成独立文件实际项目中基本都推荐拆文件方便缓存和维护。2.2 容易走偏的三个灰色地带新手常在这三个问题上纠结我直接说结论第一CSS 能做动画JavaScript 也能做动画到底该用谁能用 CSS 实现的视觉动画过渡、旋转、缩放优先用 CSS浏览器渲染效率高需要根据数据或交互状态动态变化的复杂动画才用 JavaScript。比如鼠标移入卡片弹出一个缩放效果纯 CSS 的transition: transform 0.3s几十行代码用 JavaScript 去写同样的效果要维护时间轴、状态和回调复杂度完全不在一个量级。网上经常有人搜CSS 3D旋转正负判断核心规则像transform: rotateY(60deg) translateZ(300px)这种写法本质还是 CSS 在管视觉无非是用到了 3D 空间里的坐标系——X 轴向右、Y 轴向下、Z 轴指向屏幕外rotateY 正角度让元素绕垂直轴旋转配合 translateZ 把元素拉近或推远。这些能力属于 CSS 的表现层和 JavaScript 的逻辑层井水不犯河水。第二JavaScript 能操作 HTML 结构是不是就取代 HTML 了取代不了。JavaScript 操作的是 HTML 解析后的 DOM 树DOM 节点依然有标签、有属性、有层级结构操作方式完全遵循 HTML 的规则。你可以把它理解成装修工人可以砸墙、砌墙但不能凭空造一座不用结构的房子。第三CSS 能不能写逻辑严格说 CSS 有层叠、继承、媒体查询、自定义属性这些机制看起来有点像条件判断但它不是编程语言没有循环、没有函数、没有变量运算不能根据用户输入动态改变内容。凡是页面内容随数据变化的必须由 JavaScript 或服务端技术完成。2.3 工程实践中的引入习惯我强烈建议你养成这个习惯CSS 放head里通过link引入JavaScript 放body末尾或使用defer属性加载。原因很简单——CSS 不阻塞 HTML 解析但样式没加载完页面会闪一下裸奔效果JavaScript 放在末尾是为了确保执行时 DOM 已经解析完毕不用额外写DOMContentLoaded监听。另外企业项目通常用打包工具Webpack/Vite把多个 CSS、多个 JS 合并压缩再按页面需求按需加载这些属于工程化范畴等你看清前端三兄弟的分工后再进阶不迟。3. jQuery当年为什么火如今为什么退居二线3.1 它解决的根本问题烦、乱、不一致jQuery 诞生于 2006 年前后那个时代前端开发处于黑暗丛林——IE6、IE7、Firefox、Chrome 各有各的 DOM API写着同一段代码在一个浏览器正常、另一个浏览器直接报错。原生 JavaScript 操作 DOM 还极其啰嗦查找一个元素要写一长串document.getElementById给十个按钮绑事件要写十遍。jQuery 的核心价值就三个选择器让找元素变简单、链式调用让操作变连贯、封装层屏蔽浏览器差异。看代码最有说服力。同样是把idmsg的段落文字改成加载成功并加上高亮样式// 原生 JavaScript var el document.getElementById(msg); el.textContent 加载成功; el.classList.add(highlight);// jQuery $(#msg).text(加载成功).addClass(highlight);链式写法一句话搞定。再比如给页面上所有.item绑定点击事件// 原生 JS var items document.querySelectorAll(.item); for (var i 0; i items.length; i) { items[i].addEventListener(click, handler); } // jQuery $(.item).on(click, handler);在当年的浏览器环境下这个简化不是锦上添花是实打实的工程量削减。jQuery 还提供了成熟的插件生态轮播图、日期选择器、弹窗组件随便找一个就能用写页面效率飞快。3.2 jQuery 为什么风光不再核心原因是对手变强了。现代浏览器统一了标准querySelector、querySelectorAll、fetch、classList这些原生 API 覆盖了 jQuery 大部分高频功能CSS3 也把很多原本依赖 jQuery 插件实现的动画、布局需求吞掉了。更关键的是Vue、React 这类框架把操作 DOM这件事从手动指挥浏览器升级成了声明数据和视图的关系框架自动帮你更新jQuery 的直接改 DOM思路已经不在同一层面了。但这不等于 jQuery 应该被拉黑。我这些年维护过的传统 JSP 项目里jQuery 依然是主力。老系统跑得好好的没有重构的必要新需求用 jQuery 加几句$(...)也能快速交付。到 2025 年 jQuery 3.x 仍在维护官方还在发安全更新。利刃老不老看它上什么战场。3.3 给选型一个明确建议新项目我不会推荐引入 jQuery——现代浏览器原生 API、框架、打包工具已经能给出更好的方案但接到老项目维护任务时jQuery 是必须熟练掌握的日常武器。尤其配合 Ajax 操作$.ajax封装得比原生fetch在某些场景下更好用代码也更短。这个后面展开讲。4. JSP 与 JSTL服务端模板技术的定位与边界4.1 JSP 的本质会被翻译成 Servlet 的动态模板JSPJavaServer Pages的定位简单说就是服务端动态生成 HTML 的模板技术。它长得像 HTML但里面可以嵌入 Java 代码片段和 JSTL 标签。关键理解在于JSP 文件不是给浏览器看的而是给服务器Tomcat 这类 Servlet 容器看的。我第一次接触 JSP 时一直想不通JSP 里能写 Java 代码那它算 Java 文件还是 HTML 文件。后来明白了JSP 的生命周期里第一次被访问时Tomcat 会把它翻译成一个 Java 源文件对应一个 Servlet 类编译成 class然后实例化执行。执行结果是什么是一个完整的 HTML 响应。也就是说JSP 的最终产物是 HTML但它生成 HTML 的过程发生在服务器端。对比一下静态 HTML 和 JSP 的处理差异请求资源服务器处理方式浏览器收到什么hello.html直接原样返回文件内容固定的 HTMLhello.jsp翻译、编译、执行 Java 代码、生成 HTML执行后的 HTML内容可能每次不同这个区别就是静态页面和动态页面的本质分界。HTML 文件里写什么用户永远看到什么JSP 可以根据数据库数据、用户身份、时间日期生成不同的 HTML 内容。举个最朴素的最小 JSP 例子% page contentTypetext/html; charsetutf-8 % !DOCTYPE html html head title当前时间/title /head body h1欢迎回来/h1 p服务器时间是% new java.util.Date() %/p /body /html% new java.util.Date() %会在服务器端先执行把当前时间拼进 HTML再发给浏览器。如果这是静态 HTML你永远只能看到文件里写死的那串文本。4.2 JSTL把 Java 代码从 JSP 里撵出去的标签库JSP 虽然能写 Java 代码但真把% if (...) { %这种脚本片段到处乱写页面很快就会变成一团乱麻——HTML 标签和 Java 代码交错维护的人想骂人。JSTLJSP Standard Tag Library就是为此而生的解决方案用标签代替脚本逻辑。比如循环输出一个用户列表脚本写法是% ListUser users (ListUser) request.getAttribute(users); for (User u : users) { % tr td% u.getName() %/td td% u.getEmail() %/td /tr % } %JSTL 写法是% taglib prefixc urihttp://java.sun.com/jsp/jstl/core % c:forEach varu items${users} tr td${u.name}/td td${u.email}/td /tr /c:forEach代码干净多了。${u.name}是 EL 表达式Expression Language自动调用getName()方法省的自己拼 Java 代码。JSTL 常用的还有c:if、c:choose、c:when处理条件判断fmt:formatDate格式化日期。注意 JSTL 不是一门新语言它是 JSP 生态里的标准标签集合本质上是 Java 后台渲染模板的辅助工具。它的价值在于把 JSP 的视图层从HTMLJava 混合脚本净化成HTML标签让页面更接近模板让 Java 逻辑回到 Servlet 层。4.3 部署边界为什么nginx 支不支持 JSP是个伪问题很多人搜Nginx 支不支持 JSP本质上是没搞清 JSP 的部署边界。Nginx 是静态 Web 服务器它擅长的是高效返回静态资源HTML/CSS/JS/图片和做反向代理。JSP 需要 Java Servlet 容器编译执行Tomcat、Jetty 这类容器才懂 JSP。所以正确答案是Nginx 直接不支持JSP也不需要支持。常规部署方案是 Nginx 处理静态资源遇到.jsp的动态请求反向代理转发给 TomcatTomcat 解析执行后把 HTML 返回再由 Nginx 交给浏览器。还有一个常见的入门困惑IDEA 新建 JSP 项目到底怎么操作。其实 IDEA 里新建项目时选 Java Enterprise配置好 Tomcat然后把.jsp文件放进webapp目录启动 Tomcat 就能访问。老式项目打包成 WAR 文件丢进 Tomcat 的webapps目录也能部署。说白了 JSP 从开发到部署都绑定在 Java Servlet 容器这条生态链上跟 Nginx 的职责天然分叉。5. Ajax异步交互技术以及它和前面六项的关系5.1 异步两个字才是重点AjaxAsynchronous JavaScript And XML并不是一门语言它是一种在浏览器里使用 JavaScript 异步发送请求、局部更新页面的技术方式。拆开理解JavaScript发请求的脚本语言Ajax 的技术基础。异步发请求后不等服务器返回浏览器继续干别的数据到达后再通过回调处理。XML早期数据交换格式现在基本被 JSON 取代名字里还留着历史的痕迹。同步和异步的区别我用点外卖类比同步就是你在窗口下单人堵在柜台前干等厨房做好递给你你才走异步就是你用 App 下单然后爱干嘛干嘛外卖到了骑手打电话通知你取。传统的表单提交是同步的点提交按钮浏览器整个刷新那体验就是页面白一下再跳转Ajax 请求是异步的你点了删除页面毫无动静地发请求数据回来只更新那一行的 DOM全程不打断你阅读其他内容。5.2 从原生 XHR 到 $.ajax 再到 fetchAjax 的技术内核是浏览器提供的XMLHttpRequest对象。原生写法长这样var xhr new XMLHttpRequest(); xhr.open(POST, /api/deleteUser, true); xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); xhr.onreadystatechange function() { if (xhr.readyState 4 xhr.status 200) { console.log(xhr.responseText); } }; xhr.send(id101);这个写法有几个痛点readyState四个状态值要背、回调写法嵌套多了就乱、请求头设置繁琐。jQuery 把这一切封装成了$.ajax不少老项目的实际代码长这样$.ajax({ url: /deleteUser, type: POST, data: { id: 101 }, dataType: json, success: function(res) { if (res.code 0) { $(#row_101).remove(); } else { alert(res.message); } }, error: function() { alert(请求失败请稍后重试); } });“给 Ajax 请求参数赋值”这个问题十有八九就是data字段的键值对怎么填。你传data: { id: 101 }jQuery 会自动编码成id101放在请求体里后端用request.getParameter(id)就能拿到两端字段名保持一致就不会出错。现代原生 API 里还有一个fetch写法比 XHR 简洁不少fetch(/deleteUser, { method: POST, headers: { Content-Type: application/x-www-form-urlencoded }, body: id101 }).then(res res.json()).then(data { if (data.code 0) $(#row_101).remove(); });这跟 jQuery 的$.ajax是同一件事的两种写法。选哪个取决于项目基础老项目有 jQuery 就顺手用$.ajax新项目完全可以只依赖fetch少引一个库。5.3 JSP JSTL Ajax 的完整配合场景既然 JSP 能动态生成页面为什么还需要 Ajax 做局部更新举个非常典型的功能用户列表页展示所有用户记录。首屏渲染完全可以交给 JSP 和 JSTL——服务器从数据库查出用户列表用c:forEach循环输出成一个 HTML 表格。但用户点删除这个动作如果也用 JSP 同步处理就得让整个页面重新刷新一遍体验极其割裂。正确分工是JSP JSTL 负责首屏展示Ajax 负责后续的细粒度交互。这样一套下来七项技术全部用上了HTML定义表格、按钮等页面结构。CSS让表格和按钮好看。JSP接收 Servlet 传过来的用户集合控制整体页面结构。JSTL在 JSP 内循环输出每一行用户数据。JavaScript给每个删除按钮绑定点击事件。jQuery简化事件绑定和 Ajax 提交。Ajax点删除后发异步请求局部移除那一行。如果搜jsp 个人信息展示页面你搜到的教程大概率也是这个套路JSP 负责把request里的个人数据渲染成 HTMLCSS 美化卡片JavaScript/jQuery 处理一些小的交互效果Ajax 负责异步保存修改。这套老模式直到今天依然大量存在于存量系统里值得完全搞懂。6. 按需选型的判断方法从传统 JSP 项目到前后端分离6.1 传统 JSP 项目七项技术各归其位我前几年接手的某内部管理系统就是教科书式的七项技术全家桶。技术栈大概是前端 HTML/CSS/JavaScript 管界面结构样式jQuery 管 DOM 操作和 AjaxJSP 加 JSTL 在服务器端渲染最核心的表格页面Servlet 接收请求查数据Ajax 处理按钮级别的交互。这套组合的本质是服务端渲染为主、前端交互为辅。JSP 承担页面生成主力这意味着首屏速度快HTML 到浏览器手里就是最终模样缺点也很明显每次页面跳转都要走一遍请求-渲染流程局部更新只能靠 Ajax 额外打补丁。这种模式下JSP 是七项技术里的中枢其他技术围绕它协作。6.2 前后端分离退场的不只是 JSP前后端分离的架构流行后变化不是某个单一技术消失而是一整套分工重划前端用 HTML/CSS/JavaScript加上 Vue/React 这类框架接管全部页面渲染后端不再返回 HTML 页面而是只返回数据通常是 JSON前端通过 Ajax/fetch 请求数据再自己生成 DOM。JSP 和 JSTL 在这个架构里彻底退场纯静态 HTML 配 Nginx 就够jQuery 也基本退役被框架的响应式数据绑定取代。这不是说 JSP 被淘汰了而是它解决的问题换了一种解法——页面渲染从服务端生成 HTML变成了客户端生成 DOM服务端只做数据接口。存量 JSP 系统还在跑新起项目基本不会再用。选型时看你的场景和团队结构没有绝对先进只有是否合适。6.3 新手最常问的五个边界问题问题答案JSP 和 JavaScript 谁在前端谁在后端JSP 运行在服务器端生成 HTML 后交给浏览器JavaScript 运行在浏览器端操作页面行为和局部更新。两者可以配合但运行环境完全不同。jQuery 是 JavaScript 的替代品吗不是。jQuery 本身就是 JavaScript 写的库它是封装工具不是另一种语言。Ajax 是一种语言还是框架都不是。Ajax 是浏览器端使用 JavaScript 实现异步请求与局部更新的技术方式底层是XMLHttpRequest或fetch。JSTL 和 jQuery 都有标签/选择器功能类似吗完全不在一个层面。JSTL 是服务器端 JSP 的标签库jQuery 是浏览器端的 JS 库二者运行环境和服务对象完全不同。一个项目必须同时用到七项技术才算完整吗不是。七项技术是历史演进中不同生态层的代表具体用哪些取决于项目架构和时代背景。传统 JSP 项目可能七项全上前后端分离项目只用前端三项加 Ajax。第五个问题我想多说一句。我在带新人的时候发现大家特别喜欢把技术名词按数量往项目里堆——学完一项就往代码里塞一项生怕自己用少了。这是纯学生思维。技术的选取是需求驱动的页面要动态渲染才需要 JSP/JSTL交互要局部刷新才引入 AjaxDOM 操作写起来太烦才考虑 jQuery。没有需求硬上只会让代码更乱。关于学习顺序最后聊两句如果你正卡在七项技术到底先学哪个的岔路口我的建议是顺着请求链路学别按字母顺序背。先把 HTML 和 CSS 摸熟做一个静态页面然后学 JavaScript试着用原生代码改这个静态页面的 DOM接着把 jQuery 当成一个更省力的改 DOM 帮手来学再学 JSP让页面内容能跟随服务器数据变化JSTL 是 JSP 的优化刀写几遍脚本式 JSP 再换成标签式自然理解它的价值最后把 Ajax 嵌进来让页面动起来不刷新。每个环节都是下一个环节的前置条件。我见过太多人跳过前两步直接啃 JSP结果就是连为什么页面里会出现 Java 代码都想不通。按链路走一遍这些技术在你心里的坐标就再也不会歪了。