文章目录
-
- <%@ page contentType=”text/html;charset=UTF-8″ %> <%@ page import=”java.util.Date” %> <html> <head> <title>JSP示例</title> </head> <body> <% // 服务器端Java代码 – 在服务器执行 Date now = new Date(); String username = “张三”; %> <h1>欢迎，<%= username %>！</h1> <p>当前时间：<%= now.toString() %></p> <%– 这段代码在服务器端执行，生成静态HTML发送给浏览器 –%> </body> </html>
- <!DOCTYPE html> <html> <head> <title>JavaScript示例</title> </head> <body> <h1 id=”greeting”>欢迎！</h1> <p id=”time”></p> <script> // 客户端JavaScript代码 – 在浏览器执行 const username = “李四”; document.getElementById(‘greeting’).textContent = ‘欢迎，’ + username + ‘！’; // 更新时间 function updateTime() { const now = new Date(); document.getElementById(‘time’).textContent = ‘当前时间：’ + now.toLocaleTimeString(); } setInterval(updateTime, 1000); updateTime(); </script> </body> </html>
- 场景 JSP的使用 JavaScript的使用 表单处理 接收表单数据，服务器端验证 客户端验证，实时反馈 数据展示 从数据库查询并生成HTML表格 动态更新表格内容，无需刷新 用户交互 有限的交互（页面跳转） 丰富的交互（拖拽、动画等） 状态管理 Session、Application作用域 Cookie、LocalStorage 异步请求 不直接支持（需结合Servlet） Ajax、Fetch API
-
- <%– 结合Servlet和JavaBean –%> <%@ page import=”com.example.UserDAO, com.example.User” %> <% // 从数据库获取用户数据 UserDAO userDAO = new UserDAO(); List<User> userList = userDAO.getAllUsers(); // 设置页面属性 request.setAttribute(“users”, userList); %> <table border=”1″> <tr> <th>ID</th> <th>姓名</th> <th>邮箱</th> </tr> <% for(User user : userList) { %> <tr> <td><%= user.getId() %></td> <td><%= user.getName() %></td> <td><%= user.getEmail() %></td> </tr> <% } %> </table>
- // 使用Fetch API获取数据 async function loadUsers() { try { const response = await fetch(‘/api/users’); const users = await response.json(); // 使用JavaScript动态生成表格 const table = document.createElement(‘table’); table.innerHTML = ` <tr> <th>ID</th> <th>姓名</th> <th>邮箱</th> </tr> ${users.map(user => ` <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.email}</td> </tr> `).join(”)} `; document.getElementById(‘user-container’).appendChild(table); } catch (error) { console.error(‘加载用户失败:’, error); } } // 页面加载完成后执行 document.addEventListener(‘DOMContentLoaded’, loadUsers);
- 方面 JSP JavaScript 性能 服务器负载高，但首次编译后较快 减轻服务器负担，依赖客户端性能 安全性 代码在服务器端，相对安全 代码对用户可见，需防XSS攻击 可缓存性 动态内容不易缓存 静态JS文件可缓存 SEO友好 初始HTML完整，利于SEO 单页应用(SPA)需额外SEO处理
-
- JSP (服务器渲染) → 完整HTML → 少量JavaScript增强
- 后端API (REST/GraphQL) → 前端框架(React/Vue/Angular) → 丰富的交互
- // Next.js, Nuxt.js等框架支持服务端渲染和客户端渲染 // 服务器端渲染初始HTML（类似JSP理念） // 客户端JavaScript接管后续交互 // 示例：Next.js页面组件 export async function getServerSideProps(context) { // 服务器端获取数据（类似JSP） const res = await fetch(‘https://api.example.com/data’); const data = await res.json(); return { props: { data } }; } export default function HomePage({ data }) { // 客户端交互（JavaScript） const [count, setCount] = useState(0); return ( <div> <h1>服务器数据: {data.title}</h1> <button onClick={() => setCount(count + 1)}> 点击次数: {count} </button> </div> ); }
目录
- 概述对比表
- 详细对比分析
- 1. 角色定位
- JSP (JavaServer Pages)
- JavaScript
- 2. 工作流程对比
- JSP工作流程
- JavaScript工作流程
- 3. 常见用途对比
- 4. 技术栈关联
- JSP完整技术栈示例
- JavaScript现代技术栈示例
- 5. 实际项目中的协作
- 传统JSP+JavaScript协作模式
- 6. 性能与安全考量
- 7. 现代Web开发趋势
- 传统模式（JSP主导）
- 现代模式（JavaScript主导）
- 混合模式（同构应用）
- 总结
| 对比维度 | JSP (JavaServer Pages) | JavaScript |
|---|---|---|
| 本质 | 服务器端技术 – Java技术的一部分 | 客户端脚本语言 – 运行在浏览器中 |
| 运行环境 | 服务器上（如Tomcat、Jetty等） | 客户端浏览器中 |
| 主要用途 | 动态生成HTML页面 | 实现网页交互和动态效果 |
| 语法基础 | 基于Java，可以嵌入Java代码 | 基于C语言风格，类似Java但更灵活 |
| 文件扩展名 | .jsp |
.js 或内嵌在HTML中 |
| 执行时机 | 页面加载前在服务器执行 | 页面加载后在浏览器执行 |
| 数据库访问 | 可以直接访问服务器数据库 | 不能直接访问数据库，需通过API |
| 与HTML关系 | 生成HTML内容 | 操作和修改已加载的HTML DOM |
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="java.util.Date" %>
<html>
<head>
<title>JSP示例</title>
</head>
<body>
<%
// 服务器端Java代码 - 在服务器执行
Date now = new Date();
String username = "张三";
%>
<h1>欢迎，<%= username %>！</h1>
<p>当前时间：<%= now.toString() %></p>
<%-- 这段代码在服务器端执行，生成静态HTML发送给浏览器 --%>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript示例</title>
</head>
<body>
<h1 id="greeting">欢迎！</h1>
<p id="time"></p>
<script>
// 客户端JavaScript代码 - 在浏览器执行
const username = "李四";
document.getElementById('greeting').textContent = '欢迎，' + username + '！';
// 更新时间
function updateTime() {
const now = new Date();
document.getElementById('time').textContent =
'当前时间：' + now.toLocaleTimeString();
}
setInterval(updateTime, 1000);
updateTime();
</script>
</body>
</html>
浏览器请求 → Web服务器 → JSP容器 →
1. 将JSP转换为Servlet (.java文件)
2. 编译Servlet为.class文件
3. 执行Servlet生成HTML
4. 将纯HTML发送给浏览器
服务器发送HTML+JS → 浏览器接收 →
1. 解析HTML构建DOM
2. 加载并执行JavaScript
3. JavaScript操作DOM实现交互
| 场景 | JSP的使用 | JavaScript的使用 |
|---|---|---|
| 表单处理 | 接收表单数据，服务器端验证 | 客户端验证，实时反馈 |
| 数据展示 | 从数据库查询并生成HTML表格 | 动态更新表格内容，无需刷新 |
| 用户交互 | 有限的交互（页面跳转） | 丰富的交互（拖拽、动画等） |
| 状态管理 | Session、Application作用域 | Cookie、LocalStorage |
| 异步请求 | 不直接支持（需结合Servlet） | Ajax、Fetch API |
<%-- 结合Servlet和JavaBean --%>
<%@ page import="com.example.UserDAO, com.example.User" %>
<%
// 从数据库获取用户数据
UserDAO userDAO = new UserDAO();
List<User> userList = userDAO.getAllUsers();
// 设置页面属性
request.setAttribute("users", userList);
%>
<table border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
<% for(User user : userList) { %>
<tr>
<td><%= user.getId() %></td>
<td><%= user.getName() %></td>
<td><%= user.getEmail() %></td>
</tr>
<% } %>
</table>
// 使用Fetch API获取数据
async function loadUsers() {
try {
const response = await fetch('/api/users');
const users = await response.json();
// 使用JavaScript动态生成表格
const table = document.createElement('table');
table.innerHTML = `
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
${users.map(user => `
<tr>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.email}</td>
</tr>
`).join('')}
`;
document.getElementById('user-container').appendChild(table);
} catch (error) {
console.error('加载用户失败:', error);
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', loadUsers);
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>协作示例</title>
<script>
// JavaScript函数 - 客户端验证
function validateForm() {
const username = document.getElementById('username').value;
if (username.length < 3) {
alert('用户名至少3个字符');
return false;
}
return true;
}
// Ajax请求
function checkUsername() {
const username = document.getElementById('username').value;
fetch('/checkUsername?username=' + username)
.then(response => response.json())
.then(data => {
if (data.exists) {
document.getElementById('username-hint').textContent =
'用户名已存在';
}
});
}
</script>
</head>
<body>
<form action="register.jsp" method="post" onsubmit="return validateForm()">
用户名:
<input type="text" id="username" name="username"
onblur="checkUsername()">
<span id="username-hint" style="color:red"></span>
<%
// JSP代码 - 服务器端逻辑
String error = (String) request.getAttribute("error");
if (error != null) {
out.print("<p style='color:red'>" + error + "</p>");
}
%>
<input type="submit" value="注册">
</form>
</body>
</html>
| 方面 | JSP | JavaScript |
|---|---|---|
| 性能 | 服务器负载高，但首次编译后较快 | 减轻服务器负担，依赖客户端性能 |
| 安全性 | 代码在服务器端，相对安全 | 代码对用户可见，需防XSS攻击 |
| 可缓存性 | 动态内容不易缓存 | 静态JS文件可缓存 |
| SEO友好 | 初始HTML完整，利于SEO | 单页应用(SPA)需额外SEO处理 |
JSP (服务器渲染) → 完整HTML → 少量JavaScript增强
后端API (REST/GraphQL) → 前端框架(React/Vue/Angular) → 丰富的交互
// Next.js, Nuxt.js等框架支持服务端渲染和客户端渲染
// 服务器端渲染初始HTML（类似JSP理念）
// 客户端JavaScript接管后续交互
// 示例：Next.js页面组件
export async function getServerSideProps(context) {
// 服务器端获取数据（类似JSP）
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
export default function HomePage({ data }) {
// 客户端交互（JavaScript）
const [count, setCount] = useState(0);
return (
<div>
<h1>服务器数据: {data.title}</h1>
<button onClick={() => setCount(count + 1)}>
点击次数: {count}
</button>
</div>
);
}
- JSP是服务器端技术，用于生成动态网页内容，适合传统企业应用
- JavaScript是客户端技术，用于实现网页交互和动态效果，是现代Web开发的核心
- 两者可以结合使用：JSP负责初始页面渲染和服务器逻辑，JavaScript增强用户体验
- 现代趋势：前后端分离，后端提供API，前端JavaScript框架处理所有UI和交互
- 选择依据：
- 需要服务器端处理、数据库操作 → JSP/Java Servlet
- 需要丰富的用户界面、实时交互 → JavaScript
- 大型企业系统 → 可能使用JSP+JavaScript
- 现代Web应用 → JavaScript框架 + REST API
- 需要服务器端处理、数据库操作 → JSP/Java Servlet
- 需要丰富的用户界面、实时交互 → JavaScript
- 大型企业系统 → 可能使用JSP+JavaScript
- 现代Web应用 → JavaScript框架 + REST API
到此这篇关于JSP与JavaScript详细对比分析的文章就介绍到这了,更多相关JSP与JS对比内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！
您可能感兴趣的文章:
- 浅谈JSP与Servlet传值及对比(总结)
- jsp Request获取url信息的各种方法对比
- JSP简明教程：对比与总结