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>
执行之后会跳转 forwardTest.jsp执行,然后forwardTest.jsp里 点击 添加 会 进入index.jsp,如下
上述代码大致解释:
<form>标签定义供用户输入的 HTML 表单。
HTML <input> 标签的 type 属性
(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>
实战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>
效果