JavaWeb系列十二: 服务器端渲染技术(JSP) 上

跟着韩老师学java

1. JSP基本介绍
- 1.1 JSP快速入门
- 1.2 JSP(Java Server Pages)运行原理
- 1.3 page指令介绍
- 1.4 JSP脚本
- - 1.4.1 声明脚本
  - 1.4.2 表达式脚本
  - 1.4.3 java代码脚本
- 1.5 jsp注释
- 1.6 jsp内置对象
- 1.7 JSP四大域对象
- - 1.7.1 域对象实例
  - 1.7.2 注意事项
- 1.8 JSP请求转发标签
- 1.9 作业布置

在这里插入图片描述

1. JSP基本介绍

JSP全称是Java Server Pages, 即Java的服务器页面, 就是服务器端渲染技术
JSP这门技术的最大的特点是, 写JSP就像在写HTML
相比html而言, html只能为用户提供静态数据, 而JSP(Java Server Pages)技术允许在页面中嵌套java代码, 为用户提供动态数据
相比Servlet而言, Servlet很难对数据进行排版, 而JSP(Java Server Pages)除了可以用java代码产生动态数据的同时, 也很容易对数据进行排版
JSP技术基于Servlet, 可以理解成就是Servlet

1.1 JSP快速入门

新建javaweb项目,可以参考👉

新建java项目

引入web框架

新建lib目录->导入servlet-api.jar, jsp-api.jar

在web工程路径下新建jsp

配置Tomcat

运行结果

注意事项和细节
jsp->(java server pages) 页面不能像HTML页面, 直接用浏览器运行, 只能是浏览器通过Tomcat来访问jsp页面
如何设置jsp模板

1.2 JSP(Java Server Pages)运行原理

jsp(java server pages)页面本质是一个Servlet程序(本质就是java程序).
第1次访问jsp(java server pages)页面的时候, Tomcat服务器会把jsp页面解析成一个java源文件, 并且对它编译为.class字节码程序. 参考sum.jsp对应的sum_jsp.java和sum_jsp.class文件

sum_jsp.java是sum.jsp对应的servlet
sum_jsp.class是对应的字节码文件
这两个文件在tomcat启动时的Using CATALINA_BASE: 目录下

比如:C:\Users\97896\AppData\Local\JetBrains\IntelliJIdea2022.3\tomcat\934373ca-74e2-42fa-87e8-55ee0332e30c\work\Catalina\localhost\jsp\org\apache\jsp

要想查看HttpJspBase的类图关系, 要引入jasper.jar包

总结:
3. sum.jsp->sum_jsp.java
4. sum_jsp 继承 HttpJspBase
5. HttpJspBase 继承了 HttpServlet
6. 结论: sum.jsp本质就是servlet
7. 因为sum_jsp 类还继承了 HttpJspBase, 所以就有更强的功能

1.3 page指令介绍

<%@ page contentType=“text/html; charset=utf-8” languange=“java” %>

language表示jsp翻译后是什么语言文件, 但是只支持java, 其它的不支持
contentType表示jsp返回的数据类型, 对应源码中response.setContentType()的参数值
pageEncoding属性表示当前jsp页面文件本身的字符集
import属性跟java源码中的一样, 用于导包, 导类

1.4 JSP脚本

1.4.1 声明脚本

声明脚本的格式: <%! 声明java代码 %>
作用: 定义jsp需要的属性, 方法, 静态代码块和内部类…

对应的statement_jsp 类

1.4.2 表达式脚本

表达式脚本的格式是: <%=表达式%>
表达式脚本的作用是: 在jsp(java server pages)页面上输出数据
脚本中的表达式不能以分号结束

1.4.3 java代码脚本

代码脚本的语法是: <% java代码 %>
代码脚本的作用是: 可以在jsp页面中(用java)编写我们需要的功能
可以由多个代码脚本块组合完成一个完整的java语句
代码脚本还可以和表达式脚本一起组合使用, 在jsp(java server pages)页面上输出数据

<%@ page import="java.util.ArrayList" %>
<%@ page import="com.zzw.entity.Monster" %><%--Created by IntelliJ IDEA.User: 赵志伟Version: 1.0--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>代码脚本</title>
</head>
<body>
<h1>演示代码脚本</h1>
<%//创建ArrayList, 存放Monster对象ArrayList<Monster> monsters = new ArrayList<>();monsters.add(new Monster("铁扇公主", 3000, "芭蕉扇"));monsters.add(new Monster("白骨精", 2000, "魅惑"));
%>
<table border="1px"><tr><th>编号</th><th>名字</th><th>年龄</th><th>技能</th></tr><%for (int i = 0; i < monsters.size(); i++) {Monster monster = monsters.get(i);%><tr><td><%=i+1%></td><td><%=monster.getName()%></td><td><%=monster.getAge()%></td><td><%=monster.getKill()%></td></tr><%}%>
</table>
</body>
</html>

对应的javacode_jsp 类
在这里插入图片描述

1.5 jsp注释

在这里插入图片描述

1.6 jsp内置对象

JSP内置对象(即已经创建好的对象, 直接使用英文名-inbuild), 是指Tomcat在翻译jsp页面成为Servlet后, 内部提供的九大对象, 叫内置对象
内置对象, 可以直接使用, 不需要手动定义

out 向客户端输出数据 out.println(“”);

request 客户端的http请求

response 响应对象

session 会话对象

application 对应ServletContext

pageContext (jsp独有) jsp页面的上下文, 是一个域对象, 可以setAttribute(), 作用范围只是本页面

exception异常对象, 使用比较少(jsp独有) getMessage()
page对象(jsp独有) 代表jsp这个实例本身

config 对应ServletConfig

在这里插入图片描述

1.7 JSP四大域对象

pageContext(域对象, 存放的数据只能在当前页面使用)
request(域对象, 存放的数据在一次request请求中有效, 数据和request对象绑定)
session(域对象, 存放的数据在一次会话中有效)
application(域对象, 存放的数据在整个web应用运行期间有效, 范围更大)

1.7.1 域对象实例

请求转发

重定向

打开一个新的浏览器定位scope2.jsp

1.7.2 注意事项

域对象是可以向Map一样存取数据的对象. 四个域对象功能一样, 不同的是它们对数据的存储范围
从存储范围(作用域范围看) pageContext < request < session < application

1.8 JSP请求转发标签

在这里插入图片描述

1.9 作业布置

calServlet

tips:

Java中, 整数运算除数为0会抛异常;
浮点类型的除法运算除数为0会得到Infinity, 表示无限大, 运算并不会抛异常, 判断一个数是否是无限大, 用Double.isInfinite();
如果在浮点类型的除法运算中, 被除数和除数都为0, 会得到NaN, 即非数字, NaN不等于任何值, 要判断是否是NaN, 用Double.isNaN()

public class CalServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String num1 = request.getParameter("num1");String num2 = request.getParameter("num2");String oper = request.getParameter("oper");String regStr = "^[+-]?([1-9]\\d*|0)$";if (Pattern.matches(regStr, num1) && Pattern.matches(regStr, num2)) {double num_1 = WebUtils.parseDouble(num1, 0);double num_2 = WebUtils.parseDouble(num2, 0);double result = 0;request.setAttribute("oper", oper);if ("+".equals(oper)) {result = num_1 + num_2;} else if ("-".equals(oper)) {result = num_1 - num_2;} else if ("*".equals(oper)) {result = num_1 * num_2;} else if ("/".equals(oper)) {result = num_1 / num_2;if (Double.isInfinite(result)) {request.setAttribute("num2Error", "除数不能为零");request.getRequestDispatcher("/cal/cal.jsp").forward(request, response);} else if (Double.isNaN(result)) {request.setAttribute("num1Error", "被除数不能为零");request.setAttribute("num2Error", "除数不能为零");request.getRequestDispatcher("/cal/cal.jsp").forward(request, response);}}//String.format:格式化字符串String format = String.format("%s %s %s = %s", num1, oper, num2, result);request.setAttribute("result", format);System.out.println(format);request.getRequestDispatcher("/cal/result.jsp").forward(request, response);} else {request.setAttribute("error", "数据格式不正确");request.getRequestDispatcher("/cal/cal.jsp").forward(request, response);}}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

cal.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = application.getContextPath();%>
<html>
<head><title>计算页面</title><script type="text/javascript">function register() {var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var regStr = /^[+-]?([1-9]\d*|0)$/;if (!regStr.test(num1)) {var span_1 = document.getElementById("span_1");span_1.hidden = false;return false;}if (!regStr.test(num2)) {alert("num2数字错误");return false;}return true;};if (<%=request.getAttribute("error") != null%>) {alert("<%=request.getAttribute("error")%>");}window.onload = function () {if (<%=request.getAttribute("num2Error") != null%>) {var span_2 = document.getElementById("span_2");span_2.hidden = false;}if (<%=request.getAttribute("num1Error") != null%>) {var span_1 = document.getElementById("span_1");span_1.hidden = false;}}</script>
</head>
<body>
<form action="<%=path%>/calServlet" onsubmit="return register()">num1: <input type="text" id="num1" name="num1"><span id="span_1" hidden>num1错误:<%=request.getAttribute("num1Error")%></span><br/>num2: <input type="text" id="num2" name="num2"><span id="span_2" hidden>num2错误:<%=request.getAttribute("num2Error")%></span><br/>运算符号: <select name="oper"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
</select><br/><input type="submit" value="提交计算"/>
</form>
</body>
</html>