JavaWeb
文章目录
1、jQuery
基本选择器
属性 | 功能 |
---|---|
#id | 选择器: 根据 id 查找标签对象 |
.class | 选择器: 根据 class 查找标签对象 |
element | 选择器: 根据标签名查找标签对象 |
* | 选择器: 表示任意的, 所有的元素 |
selector1, selector2 | 组合选择器: 合并选择器 1, 选择器 2 的结果并返回 |
层级选择器
属性 | 功能 |
---|---|
ancestor descendant | 后代选择器 : 在给定的祖先元素下匹配所有的后代元素 |
parent > child | 子元素选择器: 在给定的父元素下匹配所有的子元素 |
prev + next | 相邻元素选择器: 匹配所有紧接在 prev 元素后的 next 元素 |
prev ~ sibings | 之后的兄弟元素选择器: 匹配 prev 元素之后的所有 siblings 元素 |
过滤选择器
基本过滤器
属性 | 功能 |
---|---|
:first | 获取第一个元素 |
:last | 获取最后个元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 |
:even | 匹配所有索引值为偶数的元素, 从 0 开始计数 |
:odd | 匹配所有索引值为奇数的元素, 从 0 开始计数 |
:eq(index) | 匹配一个给定索引值的元素 |
:gt(index) | 匹配所有大于给定索引值的元素 |
:lt(index) | 匹配所有小于给定索引值的元素 |
:header | 匹配如 h1, h2, h3 之类的标题元素 |
:animated | 匹配所有正在执行动画效果的元素 |
内容过滤器
属性 | 功能 |
---|---|
:contains(text) | 匹配包含给定文本的元素 |
:empty | 匹配所有不包含子元素或者文本的空元素 |
:parent | 匹配含有子元素或者文本的元素 |
:has(selector) | 匹配含有选择器所匹配的元素的元素 |
属性过滤器
属性 | 功能 |
---|---|
[attribute] | 匹配包含给定属性的元素 |
[attribute=value] | 匹配给定的属性是某个特定值的元素 |
[attribute!=value] | 匹配所有不含有指定的属性, 或者属性不等于特定值的元素。 |
[attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
[attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
[attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
[attrSel1] [attrSel2] | 复合属性选择器, 需要同时满足多个条件时使用 |
表单过滤器
属性 | 功能 |
---|---|
:input | 匹配所有 input, textarea, select 和 button 元素 |
:text | 匹配所有 文本输入框 |
:password | 匹配所有的密码输入框 |
:radio | 匹配所有的单选框 |
:checkbox | 匹配所有的复选框 |
:submit | 匹配所有提交按钮 |
:image | 匹配所有 img 标签 |
:reset | 匹配所有重置按钮 |
:button | 匹配所有 input type=button 按钮 |
:file | 匹配所有 input type=file 文件上传 |
:hidden | 匹配所有不可见元素 display:none 或 input type=hidden |
表单对象属性过滤器
属性 | 功能 |
---|---|
:enabled | 匹配所有可用元素 |
:disabled | 匹配所有不可用元素 |
:checked | 匹配所有选中的单选, 复选, 和下拉列表中选中的 option 标签对象 |
:selected | 匹配所有选中的 option |
jQuery 元素筛选
属性 | 功能 | 与选择器功能一样 |
---|---|---|
eq() | 获取给定索引的元素 | 功能跟 :eq() 一样 |
first() | 获取第一个元素 | 功能跟 :first 一样 |
last() | 获取最后一个元素 | 功能跟 :last 一样 |
filter(exp) | 留下匹配的元素 | |
is(exp) | 判断是否匹配给定的选择器, 只要有一个匹配就返回, true | |
has(exp) | 返回包含有匹配选择器的元素的元素 | 功能跟 :has 一样 |
not(exp) | 删除匹配选择器的元素 | 功能跟 :not 一样 |
children(exp) | 返回匹配给定选择器的子元素 | 功能跟 parent>child 一样 |
find(exp) | 返回匹配给定选择器的后代元素 | 功能跟 ancestor descendant 一样 |
next() | 返回当前元素的下一个兄弟元素 | 功能跟 prev + next 功能一样 |
nextAll() | 返回当前元素后面所有的兄弟元素 | 功能跟 prev ~ siblings 功能一样 |
nextUntil() | 返回当前元素到指定匹配的元素为止的后面元素 | |
parent() | 返回父元素 | |
prev(exp) | 返回当前元素的上一个兄弟元素 | |
prevAll() | 返回当前元素前面所有的兄弟元素 | |
prevUnit(exp) | 返回当前元素到指定匹配的元素为止的前面元素 | |
siblings(exp) | 返回所有兄弟元素 | |
add() | 把 add 匹配的选择器的元素添加到当前 jquery 对象中 |
jQuery 的属性操作
属性 | 功能 | 选择器 |
---|---|---|
html() | 它可以设置和获取起始标签和结束标签中的内容 | 跟 dom 属性 innerHTML 一样 |
text() | 它可以设置和获取起始标签和结束标签中的文本 | 跟 dom 属性 innerText 一样 |
val() | 它可以设置和获取表单项的 value 属性值 | 跟 dom 属性 value 一样 |
attr() | 可以设置和获取属性的值, 不推荐操作 checked、 readOnly、 selected、 disabled | |
prop() | 可以设置和获取属性的值,只推荐操作 checked、 readOnly、 selected、 disabled |
DOM 的增删改
-
内部插入
属性 使用 功能 appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾, 成为最后一个子元素 prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面, 成为第一个子元素 -
外部插入
属性 使用 功能 insertAfter() a.insertAfter(b) 得到 ba insertBefore() a.insertBefore(b) 得到 ab -
替换
属性 使用 功能 replaceWith() a.replaceWith(b) 用 b 替换掉 a replaceAll() a.replaceAll(b) 用 a 替换掉所有 b -
删除
属性 使用 功能 remove() a.remove() 删除 a 标签 empty() a.empty() 清空 a 标签里的内容
CSS 样式操作
属性 | 功能 |
---|---|
addClass() | 添加样式 |
removeClass() | 删除样式 |
toggleClass() | 有就删除, 没有就添加样式 |
offset() | 获取和设置元素的坐标 |
jQuery 动画
-
以上动画方法都可以添加参数。
-
1、 第一个参数是动画 执行的时长, 以毫秒为单位
-
2、 第二个参数是动画的回调函数 (动画完成后自动调用的函数)
属性 功能 show() 将隐藏的元素显示 hide() 将可见的元素隐藏 toggle() 可见就隐藏, 不可见就显示 fadeIn() 淡入(慢慢可见) fadeOut() 淡出(慢慢消失) fadeToggle() 淡入/淡出 切换 fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。
jQuery 事件操作
属性 | 功能 |
---|---|
click() | 它可以绑定单击事件, 以及触发单击事件 |
mouseover() | 鼠标移入事件 |
mouseout() | 鼠标移出事件 |
bind() | 可以给元素一次性绑定一个或多个事件 |
one() | 使用上跟 bind 一样。 但是 one 方法绑定的事件只会响应一次。 |
unbind() | 跟 bind 方法相反的操作, 解除事件的绑定 |
live() | 绑定事件。 绑定选择器匹配的所有元素的事件。元素是后面动态创建的也有效 |
2、XML
XML简介
- XML是可扩展的标记语言
- XML的主要作用
- 用来保存数据,而且这些数据具有自我描述性
- 它还可以做为项目或者模块的配置文件
- 还可以做为网络传输数据的格式(现在JSON为主)
XML语法
文档声明
- 文件名
- xxx.xml
- xml声明
- <?xmlversion="1.0"encoding=“UTF-8”?>
- version:版本号,encoding:编码
元素(标签)
- XML命名规则
- 名称可以含字母、数字以及其他的字符
- 名称不能以数字或者标点符号开始
- 名称不能包含空格
- xml中的元素(标签)也分成单标签和双标签
- 单标签
- 格式:<标签名属性=”值”属性=”值”…/>
- 双标签
- 格式:<标签名属性=”值”属性=”值”…>文本数据或子标签</标签名>
- 单标签
xml属性
- xml的标签属性和html的标签属性是非常类似的,属性可以提供元素的额外信息
- 在标签上可以书写属性
- 属性必须使用引号引起来,不引会报错示例代码
语法规则
- 所有XML元素都须有关闭标签(也就是闭合)
- XML标签对大小写敏感
- XML必须正确地嵌套
- XML文档必须有根元素
- XML的属性值须加引号
- 文本区域(CDATA区)
- CDATA语法可以告诉xml解析器,我CDATA里的文本内容,只是纯文本,不需要xml语法解析
- CDATA格式:<![CDATA[这里可以把你输入的字符原样显示,不会解析xml]]>
dom4j解析技术
- jar包:dom4j
dom4j编程步骤
- 第一步:通过创建SAXReader对象来读取xml文件,创建Document对象
- 第二步:通过Document对象拿到根元素对象
- 第三步:通过 根元素获取标签
- 标签
- element(qname)
- 获取标签下面的第一个子标签
- qname:标签的名称
- elements(qname)
- 获取标签下面这个名称的所有子标签(一层)
- qname:标签的名称
- elements()
- 获取标签下面所有一层子标签
- element(qname)
- 标签
- 第四步:找到你想要修改、删除的子元素,进行相应在的操作
遍历标签获取标签中的内容
-
第一步,通过创建SAXReader对象。来读取xml文件,获取Document对象
-
第二步,通过Document对象。拿到XML的根元素对象
-
第三步,通过根元素对象。获取所有的book标签对象
-
第四小,遍历每个book标签对象。然后获取到book标签对象内的每一个元素,再通过getText()方法拿到起始标签和结束标签之间的文本内容
-
XML文件
<?xmlversion="1.0"encoding="UTF-8"?> <books> <book sn="SN12341232"> <name>辟邪剑谱</name> <price>9.9</price> <author>班主任</author> </book> <book sn="SN12341231"> <name>葵花宝典</name> <price>99.99</price> <author>班长</author> </book> </books>
-
java程序获取xml文件的内容
public void voidreadXML() throws Exception{ //第一步,通过创建SAXReader对象。来读取xml文件,获取Document对象 SAXReader reader = new SAXReader(); Document document = reader.read("src/books.xml"); //第二步,通过Document对象。拿到XML的根元素对象 Element root = document.getRootElement(); //第三步,通过根元素对象。获取所有的book标签对象 //Element.elements(标签名)它可以拿到当前元素下的指定的子元素的集合 List<Element> books = root.elements("book"); //第四,遍历每个book标签对象。然后获取到book标签对象内的每一个元素 for(Element book : books){ //拿到book下面的name元素对象 Element nameElement = book.element("name"); //拿到book下面的price元素对象 Element priceElement = book.element("price"); //拿到book下面的author元素对象 Element authorElement = book.element("author"); //再通过getText()方法拿到起始标签和结束标签之间的文本内容 System.out.println("书名" + nameElement.getText() + ",价格:" + priceElement.getText() + ",作者:" + authorElement.getText()); } }
添加标签
将标签添加到末尾
public void add() throws Exception{
//创建SAXReader对象。来读取xml文件,获取Document对象
SAXReader reader = new SAXReader();
Document document = reader.read("src/fzk.xml");
//通过Document对象。拿到XML的根元素对象
Element books = document.getRootElement();
//通过根元素对象。获取所有的book标签对象
Element book = books.element("book");
//添加标签
Element sex = book.addElement("sex");
//添加标签内容(修改:找到对应的位置使用这句)
sex.setText("男");
//回写到XML
OutputFormat outputFormat = OutputFormat.createPrettyPrint();
XMLWriter xmlWriter = new XMLWriter(new FileOutputStream("src/fzk.xml"), outputFormat);
xmlWriter.write(document);
xmlWriter.close();
}
在指定位置添加标签
public void add() throws Exception{
//创建SAXReader对象。来读取xml文件,获取Document对象
SAXReader reader = new SAXReader();
Document document = reader.read("src/fzk.xml");
//通过Document对象。拿到XML的根元素对象
Element books = document.getRootElement();
//通过根元素对象。获取所有的book标签对象
Element book = books.element("book");
List<Element> elements = book.elements();
//创建元素的使用
Element element = DocumentHelper.createElement("fzk");
//创建 element 文本
element.setText("fff");
//添加到特定位置
elements.add(1, element);
//回写到XML
OutputFormat outputFormat = OutputFormat.createPrettyPrint();
XMLWriter xmlWriter = new XMLWriter(new FileOutputStream("src/fzk.xml"), outputFormat);
xmlWriter.write(document);
xmlWriter.close();
}
删除标签
public void remove() throws Exception{
//创建SAXReader对象。来读取xml文件,获取Document对象
SAXReader reader = new SAXReader();
Document document = reader.read("src/fzk.xml");
//通过Document对象。拿到XML的根元素对象
Element books = document.getRootElement();
//通过根元素对象。获取所有的book标签对象
Element book = books.element("book");
//删除标签
book.remove(book.element("fzk"));
//回写XML
OutputFormat outputFormat = OutputFormat.createPrettyPrint();
XMLWriter xmlWriter = new XMLWriter(new FileOutputStream("src/fzk.xml"), outputFormat);
xmlWriter.write(document);
xmlWriter.close();
}
3、Servlet
Servlet技术
Servlet简介
- Servlet是JavaEE规范之一。规范就是接口
- Servlet就JavaWeb三大组件之一。三大组件分别是:Servlet程序、Filter过滤器、Listener监听器。
- Servlet是运行在服务器上的一个java小程序,它可以接收客户端发送过来的请求,并响应数据给客户端。
Servlet的生命周期
- 1、执行Servlet构造器方法
- 2、执行init初始化方法
- 3、执行service方法
- 4、执行destroy销毁方法
GET和POST请求的分发处理
public class HelloServlet extends HttpServlet {
//POST请求
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
//GET请求
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
实现Servlet程序
- 编写一个类去实现Servlet接口
- 实现service方法,处理请求,并响应数据
- 到web.xml中去配置servlet程序的访问地址
编写一个类去实现Servlet接口
public class HelloServlet extends HttpServlet {
//实现service方法,处理请求,并响应数据
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write("Hello Servlet");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
到web.xml中去配置servlet程序的访问地址
<!-- servlet 标签给 Tomcat 配置 Servlet 程序 -->
<servlet>
<!--servlet-name 标签 Servlet 程序起一个别名(一般是类名) -->
<servlet-name>HelloServlet</servlet-name>
<!--servlet-class 是 Servlet 程序的全类名-->
<servlet-class>com.itfzk.javaweb.servlet.HelloServlet</servlet-class>
</servlet>
<!--servlet-mapping 标签给 servlet 程序配置访问地址-->
<servlet-mapping>
<!--servlet-name 标签的作用是告诉服务器,我当前配置的地址给哪个 Servlet 程序使用-->
<servlet-name>HelloServlet</servlet-name>
<!-- url-pattern 标签配置访问地址
/ 斜杠在服务器解析的时候,表示地址为:http://ip:port/工程路径
/HelloServlet 表示地址为:http://ip:port/工程路径/HelloServlet
-->
<url-pattern>/HelloServlet</url-pattern>
</servlet-mapping>
ServletConfig类
简介
- ServletConfig类从类名上来看,就知道是Servlet程序的配置信息类。
- Servlet程序和ServletConfig对象都是由Tomcat负责创建,我们负责使用。
- Servlet程序默认是第一次访问的时候创建,ServletConfig是每个Servlet程序创建时,就创建一个对应的ServletConfig对象。
ServletConfig类的三大作用
- 1、可以获取Servlet程序的别名servlet-name的值
- 2、获取初始化参数init-param
- 3、获取ServletContext对象
ServletContext类
简介
- 1、ServletContext 是一个接口,它表示 Servlet 上下文对象
- 2、一个 web 工程,只有一个 ServletContext 对象实例。
- 3、ServletContext 对象是一个域对象。
- 4、ServletContext 是在 web 工程部署启动的时候创建。在 web 工程停止的时候销毁。
ServletContext 类的四个作用
- 1、获取 web.xml 中配置的上下文参数 context-param
- 2、获取当前的工程路径
- 3、相对路径和绝对路径
- 4、像 Map 一样存取数据
获取 web.xml 中配置的上下文参数 context-param
-
web.xml配置文件
<!--context-param 是上下文参数(它属于整个web 工程)--> <context-param> <param-name>username</param-name> <param-value>context</param-value> </context-param>
-
Servlet类
public class HelloServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ServletContext serviceContext = this.getServletContext(); String userName = serviceContext.getInitParameter("userName"); response.getWriter().write(userName); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } }
获取当前的工程路径,相对路径和绝对路径
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ServletContext servletContext = this.getServletContext();
System.out.println("工程部署的相对路径是:" + servletContext.getContextPath());
System.out.println("工程部署的绝对路径是:" + servletContext.getRealPath("/"));
System.out.println("工程index.jpg 的绝对路径是:" + servletContext.getRealPath("/index.jpg"));
}
像 Map 一样存取数据
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ServletContext serviceContext = this.getServletContext();
//存数据
serviceContext.setAttribute("name", "fzk");
//取数据
System.out.println(serviceContext.getAttribute("name"));
}
HTTP协议
简介
-
协议是指双方,或多方,相互约定好,大家都需要遵守的规则,叫协议。
-
所谓 HTTP 协议,就是指,客户端和服务器之间通信时,发送的数据,需要遵守的规则,叫 HTTP 协议。
HTTP 协议中的数据又叫报文
请求的 HTTP 协议格式
GET请求
-
1、请求行
- (1) 请求的方式 GET
- (2) 请求的资源路径[+?+请求参数]
- (3) 请求的协议的版本号 HTTP/1.1
-
2、请求头
- key : value 组成 不同的键值对,表示不同的含义。
POST请求
-
1、请求行
- (1) 请求的方式 POST
- (2) 请求的资源路径[+?+请求参数]
- (3) 请求的协议的版本号 HTTP/1.1
-
2、请求头
- key : value 不同的请求头,有不同的含义
-
3、请求体 ===>>> 就是发送给服务器的数据
常用请求头的说明
- Accept: 表示客户端可以接收的数据类型
- Accpet-Languege: 表示客户端可以接收的语言类型
- User-Agent: 表示客户端浏览器的信息
- Host: 表示请求时的服务器 ip 和端口号
哪些是GET请求,哪些是POST请求
- GET 请求:
- form 标签 method=get
- a 标签
- link 标签引入 css
- Script 标签引入 js 文件
- img 标签引入图片
- iframe 引入 html 页面
- 在浏览器地址栏中输入地址后敲回车
- POST 请求
- form 标签 method=post
响应的HTTP协议格式
常用的响应码说明
- 200 表示请求成功
- 302 表示请求重定向
- 404 表示请求服务器已经收到了,但是你要的数据不存在(请求地址错误)
- 500 表示服务器已经收到请求,但是服务器内部错误(代码错误)
MIME类型说明
文件 | MIME 类型 | |
---|---|---|
超文本标记语言文本 | .html , .htm | text/html |
普通文本 | .txt | text/plain |
RTF 文本 | .rtf | application/rtf |
GIF 图形 | .gif | image/gif |
JPEG 图形 | .jpeg,.jpg | image/jpeg |
au 声音文件 | .au | audio/basic |
MIDI 音乐文件 | .mid,.midi | audio/midi,audio/x-midi |
RealAudio 音乐文件 | .ra, .ram | audio/x-pn-realaudio |
MPEG 文件 | .mpg,.mpeg | video/mpeg |
AVI 文件 | .avi | video/x-msvideo |
GZIP 文件 | .gz | application/x-gzip |
TAR 文件 | .tar | application/x-tar |
4、JSP
简介
- jsp 的全称是 java server pages。Java 的服务器页面。
- jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。
- 因为 Servlet 程序回传 html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高
- jsp 页面本质上是一个 Servlet 程序
解决中文乱码问题
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
jsp 的三种语法
jsp头部的 page指令
-
jsp 的 page 指令可以修改 jsp 页面中一些重要的属性,或者行为。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-
language 属性
- 表示 jsp 翻译后是什么语言文件。暂时只支持 java。
-
contentType 属性
- 表示 jsp 返回的数据类型是什么。也是源码中 response.setContentType()参数值
-
pageEncoding 属性
- 表示当前 jsp 页面文件本身的字符集。
-
import 属性
- 跟 java 源代码中一样。用于导包,导类。
-
autoFlush 属性
- 设置当 out 输出流缓冲区满了之后,是否自动刷新冲级区。默认值是 true。
-
buffer 属性
- 设置 out 缓冲区的大小。默认是 8kb
-
errorPage 属性
- 设置当 jsp 页面运行时出错,自动跳转去的错误页面路径
-
jsp中的常用脚本
声明脚本(极少使用)
- 声明脚本的格式是:<%!声明java代码%>
- 作用:可以给jsp翻译出来的java类定义属性和方法甚至是静态代码块。内部类等
表达式脚本(常用)
- 表达式脚本的格式是:<%=表达式%>
- 作用:在jsp页面上输出数据
- 特点
- 1、所有的表达式脚本都会被翻译到 jspService() 方法中
- 2、表达式脚本都会被翻译成为 out.print() 输出到页面上
- 3、由于表达式脚本翻译的内容都在 jspService() 方法中,所以 jspService() 方法中的对象都可以直接使用
- 4、表达式脚本中的表达式不能以分号结束
代码脚本
- 代码脚本的格式是:<% java语句 %>
- 作用:可以在jsp页面中,编写我们自己需要的功能(写的是java语句)
- 特点:
- 1、代码脚本翻译之后都在 jspService方法中
- 2、代码脚本由于翻译到 jspService() 方法中,所以在 jspService() 方法中的现有对象都可以直接使用。
- 3、还可以由多个代码脚本块组合完成一个完整的java语句。
- 4、代码脚本还可以和表达式脚本一起组合使用,在jsp页面上输出数据
jsp中的三种注释
- html注释:<!-- 注释 -->
- java注释://, /*
- jsp注释:<%-- jsp注释 -->
jsp九大内置对象
-
jsp中的内置对象,是指Tomcat在翻译jsp页面成为Servlet源代码后,内部提供的九大对象,叫内置对象。
对象 作用 request 请求对象 response 相应对象 pageContext jsp的上下文对象 session 会话对象 appIication ServletContext对象 config ServletConfig对象 out jsp输出流对象 page 指向当前jsp的对象 exception 异常对象
jsp四大域对象
- 域对象是可以像Map一样存取数据的对象。
- 四个域对象功能一样。不同的是它们对数据的存取范围。在使用上它们是有优先顺序的
- 四个域在使用的时候,优先顺序
- pageContext < request < session < application
对象 | 类 | 范围 |
---|---|---|
pageContext | PageContextlmpl类 | 当前jsp页面范围内有效 |
request | HttpServletRequest类 | 一次请求内有效 |
session | HttpSession类 | 一个会话范围内有效(打开浏览器访问服务器,直到关闭浏览器) |
application | ServletContext类 | 整个web工程范围内都有效(只要web工程不停止,数据都在) |
jsp的常用标签
jsp静态包含
<%@ include file=""%>
-
file 属性指定你要包含的 jsp 页面的路径
-
地址中第一个斜杠 / 表示为 http://ip:port/工程路径/ 映射到代码的web目录
-
静态包含的特点:
- 1、静态包含不会翻译被包含的 jsp 页面
- 2、静态包含其实是把被包含的 jsp 页面的代码拷贝到包含的位置执行输出
jsp动态包含
<jsp:include page="/include/footer.jsp"> </jsp:include>
- page 属性是指定你要包含的 jsp 页面的路径
- 动态包含也可以像静态包含一样。把被包含的内容执行输出到包含位置
- 动态包含的特点:
- 1、动态包含会把包含的 jsp 页面也翻译成为 java 代码
- 2、动态包含底层代码使用如下代码去调用被包含的 jsp 页面执行输出。
JspRuntimeLibrary.include(request, response, “/include/footer.jsp”, out, false); - 3、动态包含,还可以传递参数
jsp 标签转发
<jsp:forward page=""></jsp:forward>
- page 属性设置请求转发的路径
5、Filter
简介
- 1、Filter过滤器它是JavaWeb的三大组件之一
- 2、Filter过滤器它是JavaEE的规范。也就是接口
- 3、Filter过滤器它的作用是:拦截请求,过滤响应
Filter的生命周期
-
1、构造器方法
-
2、init初始化方法
- 第1,2步,在web工程启动的时候执行(Filter已经创建)
-
3、doFilter过滤方法
- 第3步,每次拦截到请求,就会执行
-
4、destroy销毁
- 第4步,停止web工程的时候,就会执行(停止web工程,也会销毁Filter过滤器)
public class Filter01 implements Filter {
//销毁之前执行,在服务器关闭时执行
public void destroy() {
}
//每次过滤都会执行
//FilterChain 执行目标资源或下一个过滤器
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
//放行,允许执行程序
chain.doFilter(req, resp);
}
//创建之后马上执行,Filter 会在服务器启动时就创建
public void init(FilterConfig config) throws ServletException {
}
}
FilterConfig类
- FilterConfig类:是Filter过滤器的配置文件类。
- Tomcat每次创建Filter的时候,也会同时创建一个FilterConfig类,这里包含了Filter配置文件的配置信息。
- FilterConfig类的作用是获取filter过滤器的配置内容
- 1、获取Filter的名称filter-name的内容
- 2、获取在Filter中配置的init-param初始化参数
- 3、获取ServletContext对象
FilterChain过滤器链
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
//放行,允许执行程序
chain.doFilter(req, resp);
}
Filter的拦截路径
<!--filter 标签用于配置一个 Filter 过滤器-->
<filter>
<!--给 filter 起一个别名-->
<filter-name>Filter01</filter-name>
<!--配置 filter 的全类名-->
<filter-class>com.itfzk.javaweb.filter.Filter01</filter-class>
</filter>
<!--filter-mapping 配置 Filter 过滤器的拦截路径-->
<filter-mapping>
<!--filter-name 表示当前的拦截路径给哪个 filter 使用-->
<filter-name>Filter01</filter-name>
<!--url-pattern 配置拦截路径
/ 表示请求地址为:http://ip:port/工程路径/ 映射到 IDEA 的 web 目录
/admin/* 表示请求地址为:http://ip:port/工程路径/admin/* -->
<url-pattern>/admin/*</url-pattern>
</filter-mapping>
精确匹配
<url-pattern>/admin/success.jsp</url-pattern>
目录匹配
<url-pattern>/admin/*</url-pattern>
后缀名匹配
<!-- 以上配置的路径,表示请求地址必须以 .html 结尾才会拦截到 -->
<url-pattern>*.html</url-pattern>
<!-- 以上配置的路径,表示请求地址必须以 .css 结尾才会拦截到 -->
<url-pattern>*.css</url-pattern>
实现 Filter 程序
- 编写一个类去实现 Filter 接口
- 实现其方法,处理拦截
- 到web.xml中去配置 Filter 程序的拦截路径
编写一个类去实现 Filter 接口,并实现其方法,处理拦截
public class Filter01 implements Filter {
//销毁之前执行,在服务器关闭时执行
public void destroy() {
}
//每次过滤都会执行
//FilterChain 执行目标资源或下一个过滤器
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
//放行,允许执行程序
chain.doFilter(req, resp);
}
//创建之后马上执行,Filter 会在服务器启动时就创建
public void init(FilterConfig config) throws ServletException {
}
}
到web.xml中去配置 Filter 程序的拦截路径
<!--filter 标签用于配置一个 Filter 过滤器-->
<filter>
<!--给 filter 起一个别名-->
<filter-name>Filter01</filter-name>
<!--配置 filter 的全类名-->
<filter-class>com.itfzk.javaweb.filter.Filter01</filter-class>
</filter>
<!--filter-mapping 配置 Filter 过滤器的拦截路径-->
<filter-mapping>
<!--filter-name 表示当前的拦截路径给哪个 filter 使用-->
<filter-name>Filter01</filter-name>
<!--url-pattern 配置拦截路径
/ 表示请求地址为:http://ip:port/工程路径/ 映射到 IDEA 的 web 目录
/admin/* 表示请求地址为:http://ip:port/工程路径/admin/* -->
<url-pattern>/admin/*</url-pattern>
</filter-mapping>
6、Listener监听器
简介
- 1、Listener监听器它是JavaWeb的三大组件之一。
- 2、Listener它是JavaEE的规范,就是接口
- 3、监听器的作用是,监听某种事物的变化。然后通过回调函数,反馈给客户(程序)去做一些相应的处理。
ServletContextListener监听器
-
ServletContextListener它可以监听ServletContext对象的创建和销毁。
-
ServletContext对象在web工程启动的时候创建,在web工程停止的时候销毁。
-
监听到创建和销毁之后都会分别调用ServletContextListener监听器的方法反馈。、
-
使用ServletContextListener监听器监听ServletContext对象步骤
- 1、编写一个类去实现ServletContextListener
- 2、实现其两个回调方法
- 3、到web.xml中去配置监听器
实现ServletContextListener的类,实现其两个回调方法
public class Listener01 implements ServletContextListener { //创建之后调用,做初始化 public void contextInitialized(ServletContextEvent sce) { System.out.println("创建。。。"); } //销毁之后调用 public void contextDestroyed(ServletContextEvent sce) { System.out.println("销毁。。。"); } }
到web.xml中去配置监听器
<listener> <listener-class>com.itfzk.javaweb.listener.Listener01</listener-class> </listener>
7、EL表达式&JSTL标签库
EL表达式
简介
- EL表达式的全称是:Expression Language。是表达式语言。
- 作用:EL表达式主要是代替jsp页面中的表达式脚本在jsp页面中进行数据的输出。因为EL表达式在出数据的时候,要比jsp的表达式脚本要简洁很多。
- EL表达式的格式是:${表达式}
- EL表达式在输出null值的时候,输出的是空串。jsp表达式脚本输出null值的时候,输出的是null字符串。
EL表达式搜索域数据的顺序
-
EL表达式主要是在jsp页面中输出数据。
-
主要是输出域对象中的数据。
-
当四个域中都有相同的key的数据的时候,EL表达式会按照四个域的从小到大的顺序去进行搜索,找到就输出。
- pageContext < request < session < application
<% pageContext.setAttribute("key", "pageContext"); request.setAttribute("key", "request"); session.setAttribute("key", "session"); application.setAttribute("key", "application"); %> ${key} <!-- 从小到大的顺序去进行搜索,找到就输出,先找到 pageContext,就输出 pageContext -->
EL表达式输出Bean的普通属性,数组属性。List集合属性,map集合属性
Bean
private int id;
private String name;
private int[] data;
private List<Integer> list;
private Map<String, Integer> map;
JSP中使用EL表达式输出Bean属性
<%
User user = new User();
user.setId(1);
user.setName("fzk");
user.setData(new int[]{123, 456, 789});
List<Integer> list = new ArrayList<>();
list.add(123);
list.add(456);
user.setList(list);
Map<String, Integer> map = new HashMap<>();
map.put("fff", 123);
map.put("zzz", 456);
user.setMap(map);
pageContext.setAttribute("user", user);
%>
全部显示:${user}<br> <!-- Bean对象 -->
显示id:${user.id}<br> <!-- int -->
显示name:${user.name}<br> <!-- String -->
显示数组的第三个数据:${user.data[2]}<br> <!-- 数组 -->
显示List的第二个数据:${user.list.get(1)}<br> <!-- List -->
显示Map中的fff数据:${user.map.get("fff")} <!-- Map -->
全部显示:User{id=1, name=‘fzk’, data=[123, 456, 789], list=[123, 456], map={fff=123, zzz=456}}
显示id:1
显示name:fzk
显示数组的第三个数据:789
显示List的第二个数据:456
显示Map中的fff数据:123
EL表达式——运算
关系运算
关系运算符 | 说明 |
---|---|
== 或 eq | 等于 |
!= 或 ne | 不等于 |
< 或 lt | 小于 |
> 或 gt | 大于 |
<= 或 le | 小于等于 |
>= 或 ge | 大于等于 |
逻辑运算
逻辑运算符 | 说明 |
---|---|
&& 或 and | 与运算 |
|| 或 or | 或运算 |
! 或 not | 取反运算 |
算术运算符
算术运算符 | 说明 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ 或 div | 除法 |
% 或 mod | 取模 |
empty运算
- empty运算可以判断一个数据是否为空,如果为空,则输出true,不为空输出false。
- 以下几种情况为空:
- 1、值为null值的时候,为空
- 2、值为空串的时候,为空
- 3、值是Object类型数组,长度为零的时候
- 4、list集合,元素个数为零
- 5、map集合,元素个数为零
三元运算
- ${ 表达式1 ?表达式2 : 表达式3 }
如果表达式1的值为真,返回表达式2的值,如果表达式1的值为假,返回表达式3的值。
“.”点运算和 [] 中括号运算符
- .点运算,可以输出Bean对象中某个属性的值。
- []中括号运算,可以输出有序集合中某个元素的值。并且[]中括号运算,还可以输出map集合中key里含有特殊字符的key的值。
EL表达式的11个隐含对象
-
EL表达式中11个隐含对象,是EL表达式中自己定义的,可以直接使用
变量 类型 作用 pageContext PageContextImpl 它可以获取jsp中的九大内置对象 pageScope Map<String,Object> 它可以获取pageContext域中的数据 requestScope Map<String,Object> 它可以获取Request域中的数据 sessionScope Map<String,Object> 它可以获取Session域中的数据 applicationScope Map<String,Object> 可以获取ServletContext域中的数据 param Map<String,String> 它可以获取请求参数的值 paramValues Map<String,String[]> 它也可以获取请求参数的值,获取多个值的时候使用 header Map<String,String> 它可以获取请求头的信息 headerValues Map<String,String[]> 它可以获取请求头的信息,它可以获取多个值的情况 cookie Map<String,Cookie> 它可以获取当前请求的Cookie信息 initParam Map<String,String> 它可以获取在web.xml中配置的<context-param>上下文参数
EL获取四个特定域中的属性
属性 | 域 |
---|---|
pageScope | pageContext域 |
requestScope | Request域 |
sessionScope | Session域 |
applicationScope | ServletContext域 |
pageContext对象的使用
- 1.协议:
- 2.服务器ip:
- 3.服务器端口:
- 4.获取工程路径:
- 5.获取请求方法:
- 6.获取客户端ip地址:
- 7.获取会话的id编号:
<%
pageContext.setAttribute("req", request);
%>
1.协议: ${ req.scheme }<br>
2.服务器 ip:${ pageContext.request.serverName }<br>
3.服务器端口:${ pageContext.request.serverPort }<br>
4.获取工程路径:${ pageContext.request.contextPath }<br>
5.获取请求方法:${ pageContext.request.method }<br>
6.获取客户端 ip 地址:${ pageContext.request.remoteHost }<br>
7.获取会话的 id 编号:${ pageContext.session.id }<br>
1.协议: http
2.服务器 ip:localhost
3.服务器端口:8002
4.获取工程路径:/JavaWebMaven
5.获取请求方法:GET
6.获取客户端 ip 地址:0:0:0:0:0:0:0:1
7.获取会话的 id 编号:0FFE7E6B658818C1732C247FDEC81926
EL表达式其他隐含对象的使用
变量 | 类型 | 作用 |
---|---|---|
param | Map<String,String> | 它可以获取请求参数的值 |
paramValues | Map<String,String[]> | 它也可以获取请求参数的值,获取多个值的时候使用 |
header | Map<String,String> | 它可以获取请求头的信息 |
headerValues | Map<String,String[]> | 它可以获取请求头的信息,它可以获取多个值的情况 |
cookie | Map<String,Cookie> | 它可以获取当前请求的Cookie信息 |
initParam | Map<String,String> | 它可以获取在web.xml中配置的<context-param>上下文参数 |
param & paramValues 的使用
输出请求参数username的值:${param.username}<br>
输出请求参数password的值:${param.password}<br>
输出请求参数username的值:${paramValues.username[0]}<br>
输出请求参数hobby的值:${paramValues.hobby[0]}<br>
输出请求参数hobby的值:${paramValues.hobby[1]}<br>
在请求地址后面加上 ?username=fzk&password=123&hobby=lq&hobby=pp
例如我自己的: http://localhost:8002/JavaWebMaven/?username=fzk&password=123&hobby=lq&hobby=pp
输出请求参数username的值:fzk
输出请求参数password的值:123
输出请求参数username的值:fzk
输出请求参数hobby的值:lq
输出请求参数hobby的值:pp
header & headerValues 的使用
输出请求头【User-Agent】的值:${ header['User-Agent'] } <br>
输出请求头【Connection】的值:${ header.Connection } <br>
输出请求头【User-Agent】的值:${ headerValues['User-Agent'][0] } <br>
输出请求头【User-Agent】的值:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36
输出请求头【Connection】的值:keep-alive
输出请求头【User-Agent】的值:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36
cookie 的使用
获取 Cookie 的名称:${ cookie.JSESSIONID.name } <br>
获取 Cookie 的值:${ cookie.JSESSIONID.value } <br>
获取 Cookie 的名称:JSESSIONID
获取 Cookie 的值:9B56F7514FF38003857138B77B2FAD51
initParam
web.xml配置文件
<context-param>
<param-name>password</param-name>
<param-value>123456</param-value>
</context-param>
JSP文件
输出<Context-param>username 的值:${ initParam.password } <br>
输出<Context-param>username 的值:123456
JSTL标签库
简介
- JSTL标签库全称是指JSP Standard Tag Library,JSP标准标签库。是一个不断完善的开放源代码的JSP标签库。
- EL表达式主要是为了替换jsp中的表达式脚本,而标签库为了替换代码脚本。使得整个jsp页面变得更佳简洁。
JSTL由五个不同功能的标签库组成
功能范围 | URI | 前缀 |
---|---|---|
核心标签库–重点 | http://java.sun.com/jsp/jstl/core | c |
格式化 | http://java.sun.com/jsp/jstl/fmt | fmt |
函数 | http://java.sun.com/jsp/jstl/functions | fn |
数据库(不使用) | http://java.sun.com/jsp/jstl/sql | sql |
XML(不使用) | http://java.sun.com/jsp/jstl/xml | x |
-
在jsp标签库中使用taglib指令引入标签库
-
CORE标签库
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
-
XML标签库
<%@taglibprefix="x"uri="http://java.sun.com/jsp/jstl/xml"%>
-
FMT标签库
<%@taglibprefix="fmt"uri="http://java.sun.com/jsp/jstl/fmt"%>
-
SQL标签库
<%@taglibprefix="sql"uri="http://java.sun.com/jsp/jstl/sql"%>
-
FUNCTIONS标签库
<%@taglibprefix="fn"uri="http://java.sun.com/jsp/jstl/functions"%>
-
JSTL标签库的使用步骤
-
1、先导入jstl标签库的jar包。
jstl -
2、使用taglib指令引入标签库。
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-
3、使用 jstl 语句
core核心库使用
需要用到的请求参数
<%
String [] strings = new String[]{"fff", "zzz", "kkk"};
request.setAttribute("strings", strings);
%>
<c:set />
<c:set scope="request" var="name" value="fzk" />
${requestScope.name}<br>
<c:out />
EL方式:${requestScope.name}<br>
JSTL方式:<c:out value="${requestScope.name}" /><br>
JSTL方式显示不存在的数据:<c:out value="${requestScope.fzk}" default="fzk123" /><br>
<c:if/>
<c:if test="${10 > 2}">
真<br>
</c:if>
<c:choose><c:when><c:otherwise>
<c:set scope="request" var="work" value="学生" />
<c:choose>
<c:when test="${requestScope.work == '老师'}">老师界面</c:when>
<c:when test="${requestScope.work == '学生'}">学生界面</c:when>
<c:otherwise>其他界面</c:otherwise>
</c:choose>
<c:forEach/>
<c:forEach begin="0" end="3" step="1" varStatus="id">
fzk${id.index}
</c:forEach>
<c:forEach var="str" items="${requestScope.strings}">
${str}
</c:forEach>
8、文件的上传和下载
文件上传
介绍
- 1、要有一个form标签,method=post请求
- 2、form标签的encType属性值必须为 multipart/form-data 值
- encType=multipart/form-data表示提交的数据,以多段(每一个表单项一个数据段)的形式进行拼接,然后以二进制流的形式发送给服务器
- 3、在form标签中使用inputtype=file添加上传的文件
- 4、编写服务器代码(Servlet程序)接收,处理上传的数据
commons-fileupload.jar常用API
- 导入需要的两个jar包
- commons-fileupload
- commons-io
- commons-fileupload.jar和commons-io.jar包中常用的类
- ServletFileUpload类,用于解析上传的数据
- FileItem类,表示每一个表单项
- 判断当前上传的数据格式是否是多段的格式
- boolean ServletFileUpload.isMultipartContent(HttpServletRequest request);
- 解析上传的数据
- public List<FileItem> parseRequest(HttpServletRequest request)
- 判断当前这个表单项,是否是普通的表单项。还是上传的文件类型
- boolean FileItem.isFormField()
true表示普通类型的表单项
false表示上传的文件类型
- boolean FileItem.isFormField()
- 获取表单项的name属性值
- String FileItem.getFieldName()
- 获取当前表单项的值
- String FileItem.getString()
- 获取上传的文件名
- String FileItem.getName();
- 将上传的文件写到参数file所指向抽硬盘位置
- void FileItem.write(file);
文件上传使用
jsp文件
<form action="Servlet03" method="post" enctype="multipart/form-data">
姓名:<input type="text" name="name" /><br>
图片:<input type="file" name="file" /><br>
<input type="submit" value="提交" />
</form>
Servlet文件
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//先判断上传的数据是否为多段(只有多段的数据,才是文件上传)
if(ServletFileUpload.isMultipartContent(request)){
//创建 FileItemFactory 工厂实现类
FileItemFactory factory = new DiskFileItemFactory();
//创建用于解析上传数据的工具类 ServletFileUpload 类
ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
try {
//解析上传的数据,得到每一个表单项 FileItem
List<FileItem> fileItems = servletFileUpload.parseRequest(request);
//循环判断每一个表单项,是普通类型还是上传的文件
for(FileItem fileItem : fileItems){
if(fileItem.isFormField()){
//普通表单项
System.out.println(fileItem.getFieldName());
System.out.println(fileItem.getString("utf-8"));
}else{
//上传的文件
System.out.println(fileItem.getFieldName());
System.out.println(fileItem.getName());
fileItem.write(new File("E:\\1.jpg"));
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
9、Cookie
简介
- 1、Cookie是服务器通知客户端保存键值对的一种技术。
- 2、客户端有了Cookie后,每次请求都发送给服务器。
- 3、每个Cookie的大小不能超过4kb
Cookie的增改查
Servlet程序中的代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决中文乱码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
/**
* 添加 Cookie
*/
//创建 Cookie
Cookie cookie = new Cookie("key1", "value1");
//通知客户端保存 Cookie
response.addCookie(cookie);
response.getWriter().write("Cookie创建成功");
/**
* 输出 Cookie
*/
//获取所有 Cookie
Cookie[] cookies = request.getCookies();
//遍历输出 Cookie 的键值对
for(Cookie cookie1 : cookies){
System.out.println(cookie1.getName() + "==" + cookie1.getValue());
}
/**
* 修改 Cookie
*/
//创建新的 Cookie
Cookie newCookie = new Cookie("key1", "newCookieValue");
//通知客户端保存 Cookie
response.addCookie(newCookie);
response.getWriter().write("新的Cookie创建成功");
}
Cookie生命控制
- Cookie的生命控制指的是如何管理Cookie什么时候被销毁(删除)
- setMaxAge()
- 正数,表示在指定的秒数后过期
cookie.setMaxAge(60*60); //一个小时后过期 - 负数,表示浏览器一关,Cookie就会被删除(默认值是-1)
cookie.setMaxAge(-1); //默认是 -1 ,生命周期相当于session - 零,表示马上删除Cookie
cookie.setMaxAge(0);
- 正数,表示在指定的秒数后过期
10、Session
简介
- 1、Session就一个接口(HttpSession)。
- 2、Session就是会话。它是用来维护一个客户端和服务器之间关联的一种技术。
- 3、每个客户端都有自己的一个Session会话。
- 4、Session会话中,我们经常用来保存用户登录之后的信息。
创建Session和获取(id号,是否为新)
-
创建和获取Session
- request.getSession()
- 第一次调用是:创建Session会话
- 之后调用都是:获取前面创建好的Session会话对象。
- isNew()
判断到底是不是刚创建出来的(新的)- true表示刚创建
- false表示获取之前创建
- getId()
得到Session的会话id值。
Servlet 程序中的代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //创建 session 对象 HttpSession session = request.getSession(); //判断到底是不是刚创建出来的 System.out.println(session.isNew()); //得到 Session 的会话 id 值 System.out.println("sessionId:" + session.getId()); }
- request.getSession()
Session生命周期控制
-
public void setMaxInactiveInterval(int interval)
设置Session的超时时间(以秒为单位),超过指定的时长,Session就会被销毁。- 值为正数的时候,设定Session的超时时长。
- 负数表示永不超时(极少使用)
-
public void invalidate()
使此会话无效,然后解绑定到它的任何对象。 -
Session默认的超时时长30分钟
-
Tomcat服务器的配置文件web.xml中默认有以下的配置,它就表示配置了当前Tomcat服务器下所有的Session
超时配置默认时长为:30分钟。<session-config> <session-timeout>30</session-timeout> </session-config>
-
修改Session默认的超时时长
-
方法一
-
在 web.xml 中配置
<session-config> <session-timeout>20</session-timeout> <!-- Session默认的超时时长 20分钟 --> </session-config>
-
-
方法二
-
session.setMaxInactiveInterval(int interval)单独设置超时时长
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取 session 对象 HttpSession session = request.getSession(); //设置Session的超时时间为 5 秒 session.setMaxInactiveInterval(5); System.out.println(session.isNew()); }
-
-
方法三
-
session.invalidate() 让 Session会话马上超时
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 先获取 Session 对象 HttpSession session = req.getSession(); // 让 Session 会话马上超时 session.invalidate(); }
-
-
-
11、表单重复提交&验证码
表单重复提交
- 表单重复提交有三种常见的情况
- 一:提交完表单。服务器使用请求转来进行页面跳转。这个时候,用户按下功能键F5,就会发起最后一次的请求。造成表单重复提交问题。
解决方法:使用重定向来进行跳转 - 二:用户正常提交服务器,但是由于网络延迟等原因,迟迟未收到服务器的响应,这个时候,用户以为提交失败,就会着急,然后多点了几次提交操作,也会造成表单重复提交
解决方法:使用验证码 - 三:用户正常提交服务器。服务器也没有延迟,但是提交完成后,用户回退浏览器。重新提交。也会造成表单重复提交。
解决方法:使用验证码
- 一:提交完表单。服务器使用请求转来进行页面跳转。这个时候,用户按下功能键F5,就会发起最后一次的请求。造成表单重复提交问题。
谷歌kaptcha图片验证码的使用
-
谷歌验证码kaptcha使用步骤
- 1、导入谷歌验证码的jar包
kaptcha-2.3.2.jar - 2、在web.xml中去配置用于生成验证码的Servlet程序
- 3、在表单中使用img标签去显示验证码图片并使用它
- 4、在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用
web.xml中配置生成验证码的Servlet程序
<servlet> <servlet-name>KaptchaServlet</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>KaptchaServlet</servlet-name> <url-pattern>/KaptchaServlet</url-pattern> </servlet-mapping>
jsp在表单中使用img标签去显示验证码图片并使用它
<form action="Servlet04" method="post"> 用户名:<input id="fzk" type="text" name="name" /><br> 验证码:<input type="text" name="kaptcha" style="width: 70px;" /> <img src="KaptchaServlet" id="fff" onclick="replace()" alt="" style="width:80px;height:28px;" ><br> <input type="submit" value="提交" /> </form> <!-- 点击图片切换验证码 --> <script type="text/javascript"> function replace() { var image = document.getElementById("fff"); image.src = "KaptchaServlet?=" + new Date(); } </script>
Servlet在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取 Session 对象 HttpSession session = request.getSession(); //获取 Session 中的验证码 String toker = (String) session.getAttribute(KAPTCHA_SESSION_KEY); //删除 Session 中的验证码 session.removeAttribute(KAPTCHA_SESSION_KEY); //获取用户名和验证码 String userName = request.getParameter("name"); String kaptcha = request.getParameter("kaptcha"); System.out.println(userName); System.out.println(kaptcha); if("fzk".equals(userName) && toker.equals(kaptcha)){ request.getRequestDispatcher("admin/success.jsp").forward(request, response); }else{ response.sendRedirect("kaptcha.jsp"); } }
- 1、导入谷歌验证码的jar包
12、JSON
简介
- JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成
轻量级指的是跟xml做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。
JSON在JavaScript中的使用
json 的定义
- json是由键值对组成,并且由花括号(大括号)包围。每个键由引号引起来,键和值之间使用冒号进行分隔,多组键值对之间进行逗号进行分隔。
json的访问
- json本身是一个对象。
- json中的key我们可以理解为是对象中的一个属性。
- json中的key访问就跟访问对象的属性一样:json对象.key
json的两个常用方法
- JSON.stringify()
把 json 对象转换成为 json 字符串 - JSON.parse()
把 json 字符串转换成为 json 对象
json的定义,访问,常用方法的演示
<script>
//json 定义
var jsonObj={
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
"key5_1":551,
"key5_2":"key5_2_value"
},
"key6":[{
"key6_1_1":6611,
"key6_1_2":"key6_1_2_value"
},{
"key6_2_1":6621,
"key6_2_2":"key6_2_2_value"
}]
};
//json 的访问
alert(typeof(jsonObj));
alert(jsonObj.key1);
alert(jsonObj.key2);
alert(jsonObj.key3);
alert(jsonObj.key4);
for(var i = 0; i < jsonObj.key4.length; i++){
alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);
alert(jsonObj.key5.key5_2);
alert(jsonObj.key6[0].key6_1_1);
alert(jsonObj.key6[0].key6_1_2);
alert(jsonObj.key6[1].key6_2_1);
alert(jsonObj.key6[1].key6_2_2);
//json的两个常用方法
//把 json 对象转换成为 json 字符串
var stringify = JSON.stringify(jsonObj);
alert(stringify);
//把 json 字符串转换成为 json 对象
var parse = JSON.parse(stringify);
alert(parse.key1);
alert(parse.key2);
</script>
JSON 在 java 中的使用
jar包
- Gson
javaBean 和 json 的互转
public void test1(){
//java对象
Person person = new Person(1, "fzk");
//创建 Gson 实例化对象
Gson gson = new Gson();
//使用 toJson 方法,将java对象转换成json字符串
String json = gson.toJson(person);
System.out.println(json);
//使用 fromJson 方法,将json字符串转换成java对象
Person person1 = gson.fromJson(json, Person.class);
System.out.println(person1);
}
List 和 json 的互转
public void test2(){
//创建 List
List<Person> personList = new ArrayList<Person>();
personList.add(new Person(1, "fff"));
personList.add(new Person(2, "zzz"));
personList.add(new Person(3, "kkk"));
//创建 Gson 实例化对象
Gson gson = new Gson();
//使用 toJson 方法,将 List 转换成json字符串
String json = gson.toJson(personList);
System.out.println(json);
//使用 fromJson 方法,将json字符串转换成 List
//new TypeToken<ArrayList<Person>>(){}.getType(),转换成ArrayList<Person>类型
Type type = new TypeToken<ArrayList<Person>>() {}.getType();
List<Person> lists = gson.fromJson(json, type);
System.out.println(lists.get(0));
}
map 和 json 的互转
public void test3(){
//创建 Map 类型
Map<Integer, Person> personMap = new HashMap<Integer, Person>();
personMap.put(1, new Person(1, "fff"));
personMap.put(2, new Person(2, "zzz"));
personMap.put(3, new Person(3, "kkk"));
//创建 Gson 实例化对象
Gson gson = new Gson();
//使用 toJson 方法,将 List 转换成json字符串
String json = gson.toJson(personMap);
System.out.println(json);
//使用 fromJson 方法,将json字符串转换成 Map
//new TypeToken<HashMap<Integer, Person>>() {}.getType(),转换成HashMap<Integer, Person>
Type type = new TypeToken<HashMap<Integer, Person>>() {}.getType();
Map<Integer, Person> maps = gson.fromJson(json, type);
System.out.println(maps.get(1));
}
13、AJAX 请求
简介
- AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)
是指一种创建交互式网页应用的网页开发技术 - ajax 是一种浏览器通过 js 异步发起请求, 局部更新页面的技术
- Ajax 请求的局部更新, 浏览器地址栏不会发生变化
- 局部更新不会舍弃原来页面的内容
原生 AJAX 请求
使用步骤
-
1、创建 XMLHttpRequest
- new XMLHttpRequest();
-
2、调用 open 方法打开与服务器连接
- xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
- 请求方式:可以是GET或POST
- 请求的URL:指定服务器端资源
- 请求是否为异步:如果为true表示发送异步请求,否则同步请求
- xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
-
3、调用 send 方法发送请求
-
4、绑定监听器 onreadystatechange 事件, 处理请求完成后的操作
-
在xmlHttp对象的一个事件上注册监听器: onreadyatatechange
-
xmlHttp对象一共有5个状态:
- 0状态:刚创建,还没有调用open()方法;
- 1状态:请求开始:调用了open()方法, 但还没有调用send()方法
- 2状态:调用完了send()方法了;
- 3状态:服务器已经开始响应,但不表示响应结束了!
- 4状态:服务器响应结束! (通常我们只关心这个状态! ! ! )
-
得到xmlHttp对象的状态:
var state = xmlHttp. readyState;//可能是0、1、2、3、4 -
得到服务器响应的状态码
var status = xmlHttp. status;//例如为200、 404、500 -
得到服务器响应的内容
var content = xmlHttp . responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp. responseXML;//得到服务器的响应的xml响应的内容,它是Document对象了!
-
示例
-
将服务器响应结果写入到 jsp 指定标签中
Servlet程序中的代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("Hello Ajax"); }
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="text/javascript"> window.onload = function () { //网页加载完毕执行 var button = document.getElementById("button"); button.onclick = function () { //给按钮点击事件添加监听 //1、创建 XMLHttpRequest var xmlHttp = new XMLHttpRequest(); //2、调用 open 方法打开与服务器连接 xmlHttp.open("GET", "AjaxServlet", true); //3、调用 send 方法发送请求 xmlHttp.send(null); //4、绑定监听器 onreadystatechange 事件, 处理请求完成后的操作 xmlHttp.onreadystatechange = function () { //双重判断: xm1Http的状态为4 (服务器响应结束),以及服务器响应的状态码为200 (响应成功) if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //获取服务器响应结果 var test = xmlHttp.responseText; //获取 h1 元素标签,并将后去的数据写入到 h1 元素标签中 var h1 = document.getElementById("h1"); h1.innerHTML = test; } }; }; }; </script> </head> <body> <button id="button">点击这里</button> <h1 id="h1"></h1> </body> </html>
jQuery 中的 AJAX 请求
$.ajax 方法
- url
表示请求的地址 - type
表示请求的类型 GET 或 POST 请求 - data
表示发送给服务器的数据- 格式有两种:
- 一: name=value&name=value
- 二: {key:value}
- 格式有两种:
- success 请求成功, 响应的回调函数
- dataType 响应的数据类型
- 常用的数据类型有:
- text 表示纯文本
- xml 表示 xml 数据
- json 表示 json 对象
- 常用的数据类型有:
示例
Servlet程序中的代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
Person person = new Person(id, name);
Gson gson = new Gson();
String json = gson.toJson(person);
response.getWriter().write(json);
}
jsp代码
<script type="text/javascript">
$(function(){
$("#ajaxBtn").click(function () {
$.ajax({
url:"Servlet05",
data:"id=1&name=fzk",
type:"GET",
success:function (data) {
$("#msg").html("id:" + data.id + "name:" + data.name);
},
dataType:"json"
});
});
});
</script>
<button id="ajaxBtn">$.ajax请求</button>
<div id="msg">
$.get 方法
$.post 方法
两个方法使用上一样,只是请求方式不一样
- url 请求的 url 地址
- data 发送的数据
- callback 成功的回调函数
- type 返回的数据类型
示例
Servlet程序中的代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
Person person = new Person(id, name);
Gson gson = new Gson();
String json = gson.toJson(person);
response.getWriter().write(json);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
Person person = new Person(id, name);
Gson gson = new Gson();
String json = gson.toJson(person);
response.getWriter().write(json);
}
jsp代码
<script type="text/javascript">
$(function(){
// ajax--get请求
$("#getBtn").click(function () {
$.get("Servlet05", "id=1&name=fzk", function (data) {
$("#msg").html("id:" + data.id + "name:" + data.name);
}, "json");
});
// ajax--post请求
$("#postBtn").click(function () {
$.post("Servlet05", "id=1&name=fzk", function (data) {
$("#msg").html("id:" + data.id + "name:" + data.name);
}, "json");
});
});
</script>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<div id="msg">
$.getJSON 方法
- url 请求的 url 地址
- data 发送给服务器的数据
- callback 成功的回调函数
Servlet程序中的代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
Person person = new Person(id, name);
Gson gson = new Gson();
String json = gson.toJson(person);
response.getWriter().write(json);
}
jsp代码
<script type="text/javascript">
$(function(){
$("#getJSONBtn").click(function () {
$.getJSON("Servlet05", "id=1&name=fzk", function (data) {
$("#msg").html("id:" + data.id + "name:" + data.name);
});
});
});
</script>
<button id="getJSONBtn">$.getJSON请求</button>
<div id="msg">
表单序列化 serialize()
- serialize()可以把表单中所有表单项的内容都获取到, 并以 name=value&name=value 的形式进行拼接
Servlet程序中的代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
Person person = new Person(id, name);
Gson gson = new Gson();
String json = gson.toJson(person);
response.getWriter().write(json);
}
jsp代码
<script type="text/javascript">
$(function(){
$("#submit").click(function () {
var value = $("#form01").serialize();
$.getJSON("Servlet05", value, function (data) {
$("#msg").html("id:" + data.id + "name:" + data.name);
});
});
});
</script>
<div id="msg">
<form id="form01" >
用户名:<input name="username" type="text" /><br/>
密码:<input name="password" type="password" /><br/>
</form>
<button id="submit">提交--serialize()</button>