Web访问的原理就是客户端访问web服务器的过程。
静态网页和动态网页--视觉效果主要是通过JavaScript 和 jQuery技术实现的。其变化的内容大部分来自数据库中数据的变化。目前比较流行的动态网页技术主要有 ASP , PHP , JSP
Web浏览器(客户端程序):IE、火狐、Chrome 等
Web服务器:WebSphere、WebLogic、Tomcat等
JSP (Java Server Pages) 是基于Java Servlet技术来开发动态的、高性能的Web应用程序。JSP的网页实际上是由在HTML文件中加入的Java代码片段和JSP的特殊标记构成的。JSP页面的实质也是一个HTML页面,只不过它包含了用于产生动态网页内容的Java代码,这些Java代码可以是Java Bean、SQL语句、RMI(远程方法调用)对象等。例如:一个JSP页面包含了用于产生静态网页的HTML代码,同时也包含了连接数据库的JDBC代码,那么当网页在浏览器中显示时,它既包含了静态的HTML代码,又包含了从数据库中取得的动态内容,故称之为动态网页。
JSP的执行顺序:首先,客户端像Web服务器提出请求,然后JSP引擎负责将页面转化为Servlet,此Servlet经过虚拟机编译生成类文件,然后再把类文件加载到内存中执行。最后 有服务器将处理结果返回给客户端。
Chapter 2 JSP基础语法--像HTML一样容易
!!!
JSP页面主要由 指令标签、HTML标记语言、注释、嵌入Java代码(<%%>标签中)、JSP动作标签 等5个元素组成
!!!
注释:
在JSP页面中,注释可以归纳为两种:一种是原油的HTML注释;另外一种是JSP注释。
HTML注释 <!-- 注释内容 -->
JSP注释 <%-- 注释内容 --%>
在实际应用中,JSP通常会引入Java的注释,二者混合着用。因为Java的注释是在脚本中注释,而JSP的注释是在脚本外注释。
JSP声明: 用于定义JSP中的变量、方法以及静态方法,实际上它与在Java中定义一个全局变量、共用方法一样,JSP声明部分的变量和方法是可以在JSP页面中被调用和使用的。
JSP声明的基本语法有两种:
<%! 变量定义/方法定义/类 %>
<jsp:declaration> 变量定义/方法定义/类 </jsp:declaration> --注意:这种方法已经过时,采用上面那种方法!
JSP表达式:作用是将动态的信息显示在页面汇总,语法也有两种形式。
<%= 变量或表达式 %>
<jsp:expression> 变量或者表达式 </jsp:expression>
指令标签:
指令标签不会产生任何内容输出到网页中,主要用于定义整个JSP页面的相关信息,如使用的语言、导入的类包、指定错误处理页面等,语法格式如下:
<%@ directive attribute="value" attributeN="valueN" ......%>
directive: 指令名称
attribute:属性名称,不同指令包含不同的属性
value: 属性值,为指定的属性赋值的内容
注意<%@和%> 是完整的标记,不能再添加空格,标签中定义的各种属性之间 以及 指令之间可以有空格!
JSP指令(3种):page指令、include指令、taglib指令
page指令用来设置JSP页面的属性和相关的功能,基本语法如下2种:
<%@ page attribute1="value1"[...attribute2="value n"]%>
<jsp:directive.page attribute1="value1"[...attribute2="value n"]/>
page指令有多种,但最常用的就是language、import、pageEncoding这3个,其中language是必须设置的,目前JSP页面使用java语言,所以默认值是java;import用来声明需要导入的包;pageEncoding属性用于设置页面的编码。在所有属性中出import可以声明多个之外,其他属性只能出现一次。
include指令是在JSP页面生成Servlet是引入需要包含的页文件,可以使HTML文件,也可以是JSP文件,还可以是其他文件(例如js文件)。include指令的作用是在标签插入的位置插入静态的文件内容,使其与JSP文件组合成新的JSP页面,然后由JSP引擎翻译成Servlet文件。两个好处如下:
语法 <%@include file="URL"%>
include指令 例子:
date.jsp
index.jsp
结果:
date.jsp文件将被包含在index.jsp文件中,所以文件中的page指令代码可以省略,被包含的文件会直接使用index.jsp文件的设置。
注意:被include指令包含的JSP页面中不要使用<html>和<body>标签,他们是HTML语言的结构标签,被包含进其他JSP页面会破坏页面格式。 另外:源文件和被包含文件中的变量和方法的名称不要冲突,因为他们最终会生成一个文件,重名将导致错误发生!!!
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格:
- 表头单元 - 包含头部信息(由 th 元素创建)
- 标准单元 - 包含数据(由 td 元素创建)
td 元素中的文本一般显示为正常字体且左对齐。
嵌入Java代码(<%%>标签中) :
代码片段就是在JSP页面嵌入Java代码,也称脚本段或脚本代码。代码片段将在页面请求的处理期间被执行。可以通过JSP内置对象在页面输出内容、访问session回话、编写流程控制语句等。
例如生成九九乘法表
结果如下:
JSP声明全局变量或方法 用<%! int a = 100; %>
<%! int sort{.... return ingeter; } %>
JSP表达式:直接把Java表达式结果输出到JSP页面中 <%= 表达式 %>
在JSP2.0规范中提供了20个标准的使用XML语法写成的动作标签,这些标签可用来实现特殊功能:例如 转发用户请求、操作JavaBean、包含其他文件等。
动作标签 是在请求处理阶段 按照页面中出现的顺序 被执行的,其优先级低于指令标签。
在JSP页面被执行时将首先进入翻译阶段,程序会先查找页面中的指令标签,将它们转换成Servlet,从而设置整个JSP页面。
动作标签遵循XML语法,包括开始标签和结束标签。通用语法格式如下:
<标签名 属性1='值1' 属性2='值2' ... />
或者
<标签名 属性1='值1' 属性2='值2' ... >
标签内容
</标签名>
下面将介绍JSP项目开发中常用的JSP动作标签
(1) <jsp:include> 将另外一个文件的内容包含到当前JSP页面中,被包含的文件内容可以使静态文本,也可以是动态代码。
语法: <jsp:include page='url' flush='false|true' />
或者 <jsp:include page='url' flush='false|true' >
子标签
</jsp:include>
flush:可选参数,用于设置是否刷新缓冲区。默认为false,若设置为true,则再当前页面输出使用了缓冲区的情况下,将先刷新缓冲区,然后再执行包含工作。
Note:<jsp:include> 和 include指令<%@ include file='url'%> 的区别
1) inlcude指令使用file属性指定被包含的文件
2)inlcude指令包含的资源均为静态的,如HTML,TXT等。如果将JSP的动态内容用include指令包含的话,也会被当做静态资源包含在当前页面;被包含的资源与当前JSP页面是一个整体,资源相对路径的解析在JSP页面转换为Servlet时发生。
而<jsp:include>标签包含JSP动态资源时,资源相对路径的解析在请求处理时发生!当前页面和被包含的资源时两个独立的实体,被包含的页面会对包含它的JSP页面中的请求对象进行处理,然后将处理结果作为当前JSP页面的包含内容,与当前页面内容一起发送给客户端。
(2)<jsp:forward> 请求转发标签,可以将当前页面的请求转发给其他Web资源,如另一个JSP页面、HTML页面、Servlet等;而当前页面可以不对该请求进行处理,或者做些验证性的工作和其他工作。
例如:
forwardTest.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSP的forward动作标签</title>
</head>
<body>
<form action="index.jsp" method="post">
<table align="cneter">
<tr>
<td align="center" colspan="2">
<h3>添加用户</h3>
</td>
</tr>
<tr>
<td>姓名:</td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input name="sex" type="radio" value="男" checked="checked">
<input name="sex" type="radio" value="女">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="添加">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/c67e5d657432778e7b5cba676980b492.png)
执行之后会跳转 forwardTest.jsp执行,然后forwardTest.jsp里 点击 添加 会 进入index.jsp,如下
上述代码大致解释:
<form>标签定义供用户输入的 HTML 表单。
HTML <input> 标签的 type 属性
![](https://i-blog.csdnimg.cn/blog_migrate/f765e822e918de6576c6290ffbc594df.png)
(3)<jsp:param> 可以作为其他标签的子标签,为其他标签传递参数。
语法:<jsp:param name='paramName' value='paramValue' />
其中 name属性用于指定参数名称,value属性用于设置对应的参数值
例如:
<jsp:forward page='forwardTest.jsp'>
<jsp:param name='userName' value='mingri' />
</jsp:forward>
上述代码在转发请求到 forwardTest.jsp页面的同时,传递了 userName参数,其参数值为 mingri
Note:<jsp:useBean>、<jsp:setProperty>、<jsp:getProperty>这3个动作用于操作JavaBean对象,在JavaBean的笔记里介绍。
实战 2018.5.15更新....
实战1:在JSP页面通过JDBC连接数据库并将数据显示在页面表格中
原book数据库中 books表格内 的数据 如下:
代码:
<%--
Created by IntelliJ IDEA.
User: CaptainT
Date: 2018/5/15
Time: 9:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" import="java.sql.Connection" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<title>JSP读取数据库数据</title>
</head>
<body>
<table border="1" align="center">
<tr>
<th>书号</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>单价</th>
</tr>
<%
String driverClass = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/book";
String user = "root";
String passward = "你自己的密码";
Connection conn;
try{
Class.forName(driverClass);
conn = DriverManager.getConnection(url, user, passward);
if(!conn.isClosed())
out.println("Succeeded connecting to the Database!");
Statement stmt = conn.createStatement();
String sql = "select * from books";
ResultSet rs = stmt.executeQuery(sql);
while (rs.next())
{
%>
<tr>
<td><%=rs.getString("isbn")%></td>
<td><%=rs.getString("title")%></td>
<td><%=rs.getString("authors")%></td>
<td><%=rs.getString("publisher")%></td>
<td><%=rs.getString("price")%></td>
</tr>
<%
}
rs.close();
stmt.close();
conn.close();
}catch (Exception ex)
{
out.println("something error...");
ex.printStackTrace();
}
%>
</table>
</body>
</html>
结果如下,表格是居中显示的,右边空白部分未进截图。
<tr><td>标签的说明
<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/13a3cd2ead2403a4cc5755ea88140255.png)
实战2:实现数据查询,并将查询出来的信息显示在下拉列表
在web开发中,经常会用到下拉列表来显示一些内容,而下拉列表的值可以从数据库中查询出来进行显示,这样可以是页面更加灵活。
用到的数据库 和 表格
jsp代码:
<%--
Created by IntelliJ IDEA.
User: CaptainT
Date: 2018/5/15
Time: 15:19
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" import="java.sql.*" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
<title>下拉列表展示</title>
</head>
<body>
<%
List list = new ArrayList();
Class.forName("com.mysql.jdbc.Driver");//加载数据库驱动
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/sqltestdb";
String user = "root";
String pass = "你自己的密码";
try
{
conn = DriverManager.getConnection(url, user, pass);
}
catch (SQLException e)
{
e.printStackTrace();
}
String sql = "select name from websites";
Statement statement;
try
{
statement = conn.createStatement();
ResultSet rset = statement.executeQuery(sql);
while(rset.next())
{
String id = rset.getString(1);//依次获取查询
list.add(id);
}
}
catch (SQLException ee)
{
ee.printStackTrace();
}
%>
<%--下面定义下拉列表--%>
<select>
<%
for(int i=0; i<list.size(); ++i)
{
%>
<option value="<%=list.get(i)%>">
<%=list.get(i)%>
</option><%--将集合内容显示在下拉列表中--%>
<%
}
%>
</select>
</body>
</html>
效果如下:
实战3:将3个页面组成一个新的页面
top.jsp
<%--
Created by IntelliJ IDEA.
User: CaptianT
Date: 2018/5/15
Time: 15:57
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>顶部</title>
</head>
<body>
<table width="577" height="15" border="0">
<tr>
<td><div align="center">首页</div></td>
<td><div align="center">学院信息</div></td>
<td><div align="center">学校简介</div></td>
<td><div align="center">资料下载</div></td>
<td><div align="center">社会招聘</div></td>
</tr>
</table>
</body>
</html>
content.jsp
<%--
Created by IntelliJ IDEA.
User: CaptianT
Date: 2018/5/15
Time: 16:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>中间内容部分</title>
</head>
<body>
<table width="470" height="200" border="0">
<tr>
<td width="87" height="33"><div align="right">用户昵称:</div></td>
<td width="367">
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="textfield" />
</label>
</form>
</td>
</tr>
</table>
</body>
</html>
down.jsp
<%--
Created by IntelliJ IDEA.
User: CaptianT
Date: 2018/5/15
Time: 16:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>尾部</title>
</head>
<body>
<table width="477" border="0">
<tr>
<td height="74">
<div align="center">
<p>公司网址:www.awesomedream.com 联系电话:1**********</p>
<P>上海市浦东新区张江高科园区B座208号 All Right Reserved</P>
</div>
</td>
</tr>
</table>
</body>
</html>
index.jsp 汇总上面3个JSP页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>页面汇总</title>
</head>
<body>
<table width="477" border="0">
<tr>
<td height="21"><jsp:include page="top.jsp" /></td>
</tr>
<tr>
<td height="365"><jsp:include page="content.jsp" /></td>
</tr>
<tr>
<td height="65"><jsp:include page="down.jsp" /></td>
</tr>
</table>
</body>
</html>
效果