导图社区 Javaweb
- 227
- 25
- 7
- 举报
Javaweb
Java后端所需的javaweb前端知识，不适用于专攻web前端。
编辑于2020-11-14 17:09:06- 相似推荐
- 大纲
Javaweb
B/S结构（浏览器/服务器）
页面组成
内容（结构）
页面的数据
用html实现
表现
数据的展示形式
用CSS技术实现
行为
页面中的元素与输入设备交互的响应
用JavaScript实现
HTML（Hyper Text Markup Language）
<!--注释-->
<head></head>
表示头部信息，一般包含title、CSS样式、JS代码
<body></body>
页面的数据
标签
格式
单标签
<标签名 />
双标签
<标签名>封装的数据</标签名>
大小写不敏感
属性
基本属性
bgcolor="red"
事件属性
onclick="alert('asd');"
语法
不能交叉嵌套
双标签须有头有尾
单标签须有 /
属性须有值，属性值须加引号
注释不可嵌套
常用标签
特殊字符
空格
 
<
<
>
>
&
&
"
"
'
&apos（IE不支持）
<font color="颜色" face="字体" size="大小">内容</font>
字体格式
color为颜色
face为字体
size为大小（1-7）
<br>：换行
<hx>标题名</hx>
标题标签
align=""（对齐方式）
x从1-6
<a href="地址" target="跳转方式">链接名</a>
超链接
target设置跳转方式
_self（默认）：当前页面
_blank：打开新页面
列表标签
无序列表
<ul><li>内容</li></ul>
<li></li>为列表项
有序列表
<ol><li>内容</li></ol>
<li></li>为列表项
<img src="" />
图片标签
src中填写路径（相对路径或绝对路径）
相对路径
“.”表示当前文件所在目录
“..”表示当前文件所在的上一级目录
绝对路径
http://ip:port/工程名/资源路径
<table><tr><td>内容</td></tr></table>
border、width、height设置边框厚度、单元格宽高
align设置表格对齐方式
cellspacing设置单元格间距
<tr></tr>为列
<td></td>为单元格
align设置单元格文本对齐方式
<th></th>为表头标签
colspan设置单元格跨列
rowspan设置单元格跨行
<iframe src="路径"></iframe>
内嵌窗口
与<a></a>（超链接）组合使用
在iframe中定义name属性
将a的target的属性值设置为name的属性值
<form action="服务器地址" method="方式"></form>
表单标签
表单一般放在表格中，使得其格式化
method
GET
浏览器地址栏为：action（服务器地址）?（分隔符）请求参数（表单信息）
不安全
eg：表单参数中可能有密码明文显示
有数据长度限制
POST
浏览器地址栏只有action属性值
相对于GET安全
理论上没有数据长度限制
表单提交后，信息没有提交原因
表单项没有name属性
单选、复选（包括下拉列表）没有value属性
表单项不在提交的form标签中
<input type="text" />
文本输入框
value为默认值
<input type="password" />
密码输入框
value为默认值
<input type="radio" />内容
单选框
通过name对其进行分组，实现单选
checked="checked"为设置默认选择
<input type="checkbox" />内容
多选框
checked="checked"为设置默认选择
<select><option>选项内容</option><select>
下拉列表框
在option中添加checked="checked"设置默认选中
<textarea>默认值</textarea>
rows、cols设置显示的行列数量
<input type="reset" value="按钮名" />（重置）
<input type="submit" value="按钮名" />（提交）
<input type="button" value="按钮名" />（按钮）
<input type="file" value="按钮名" />（选择文件）
<input type="hidden" />（隐藏域）
提交时会发送给服务器
发送的信息不需要用户参与时使用
<div></div>
默认独占一行
<span></span>
其长度便时封装数据长度
<p></p>
默认在段落上方、下方各空出一行（如果已有就不再空）
CSS
/*注释*/
控制网页样式，并将其与网页内容分离
语法规则
选择器 { 属性：值 ; }
与HTML结合
在标签的style属性设置“key:value value”
缺点
标签较多时，样式多，代码量庞大
可读性差
CSS代码没有可复用性可言
<style type="text/css">代码</style>
标签名 { key:value value; }
对同一标签起作用
缺点
只能在一个页面内复用代码
维护不方便
创建CSS文件
html中head中添加<link rel="stylesheet" type="text/css" href="文件名" />
标签名 { key:value value; }
对同一标签起作用
选择器
标签名选择器
创建CSS文件
html中head中添加<link rel="stylesheet" type="text/css" href="文件名" />
标签名 { key:value value; }
对同一标签起作用
id选择器
#属性值 { 属性：值 ; }
通过标签的id属性选择性的使用样式(id="属性值")
class选择器
.属性值 { 属性：值 ; }
通过标签的class属性选择性的使用样式（class="属性值"）
组合选择器
选择器1，选择器2，……，选择器n { 属性：值 ; }
常用样式
color（颜色）
red / rgb(255, 0, 0) / #00F6DE
width、height（宽、高）
20px / 20%
background-color（背景颜色）
font-size（字体大小）
20px
border（边框）
1px（边框厚度） solid（实线） red（边框颜色）
margin-left：auto; margin-right：auto; DIV居中
text-align：center（文本居中）
text-decoration：none（超链接去下划线）
border-collapse: collapse;（表格细线）
list-style: none;（列表去修饰符）
JavaScript
用于完成页面数据的验证
弱类型（var）
console用于向浏览器控制台打印输出（console.log();）
正则表达式.test(待验证字符串)
用于验证字符串是否符合正则表达式，符合返回true
特点
交互性
安全性
不允许直接访问本地硬盘
跨平台性
只要时可以解释JS的浏览器即可
与HTML结合
<head><script type="text/javascript">代码</script></head>
创建js文件
<head><script type="text/javascript" src="文件路径"></script></head>
script标签可引入js文件或定义js代码（二选一）
变量
类型
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
特殊值
undefined（所有类型未赋初值时的默认值）
null（空值）
NAN（not a number）非数字。非数值
定义变量格式
var 变量名;
var 变量名 = 值;
typeof（变量名）
用于返回变量的类型（用字符串表示）
运算
所有类型的变量均可作为boolean类型使用
0、null、undefined、""（空串）为假
关系运算
等于（==）
简单的做字面值的比较
eg：12 == "12"; 返回值为true
全等于（===）
除了字面值之外，也比较变量的数据类型
逻辑运算
且运算（&&）
表达式全真，返回最后一个表达式的值
表达式存在假，返回第一个为假的表达式的值
或运算（||）
表达式全为假，返回最后一个表达式的值
表达式存在真，返回第一个为真的表达式的值
数组
定义
var 数组名 = [];（空数组）
var 数组名 = [12, 'abc', true];
通过数组下标赋值，系统会自动给数组做扩容操作
length为数组长度
函数
定义
function 函数名（形参列表）{ 函数体 }
形参无需定义类型（即直接写变量名即可）
需要返回值时，直接return即可
var 函数名 = function（形参列表）{ 函数体 }
JS不允许重载，函数名相同时，后定义覆盖前定义
函数隐形参数arguments
自定义对象
定义
var 变量名 = new Object();
对象实例（空对象）
变量名.属性名 = 值;
定义一个属性
变量名.函数名 = function(){}
定义一个函数
var 变量名 = {属性名：值 , 属性名：值 , 函数名：function(){}};
访问
变量名.属性名 / 函数名;
事件
电脑输入设备页面的交互响应
常用事件
onload加载完成事件
页面加载完成之后，做页面js代码初始化操作
静态eg：<body onload="函数名();">
动态eg：window.onload = function() { 函数体 }
onclick单击事件
常用于按钮点击操作
静态eg：<button onclick="函数名();">
动态eg
设置按钮的id属性
window.onload = function(){ var obj = document.getElementById("按钮ID"); obj.onclick = function(){函数体} }
onblur失去焦点事件
常用于输入框失去焦点后，验证其输入内容是否合法
静态eg：<input type="text" onblur="函数名();">
动态eg
设置输入框的id属性
window.onblur = function(){ var obj = document.getElementById("输入框ID"); obj.onblur = function(){函数体} }
onchange内容发生改变事件
常用于输入框、下拉列表的内容发生改变之后发生的操作
静态eg：<select onchange="函数名();">
动态eg
设置输入框、下拉列表的id属性
window.onchange = function(){ var obj = document.getElementById("输入框、下拉列表ID"); obj.onchange = function(){函数体} }
onsubmit表单提交事件
常用于表单调教前，验证所有表单项是否合法
函数中添加return，当表单存在表单项不合法返回false
静态eg：<form action="" method="POST" onsubmit="return 函数名();">
动态eg
设置表单的id属性
window.onsubmit = function(){ var obj = document.getElementById("表单ID"); obj.onsubmit = function(){函数体} }
事件的注册
静态注册
通过html标签的事件属性直接赋予事件响应后的代码
动态注册
先通过js代码获取标签的dom对象
后通过dom对象.事件名 = func(){}赋予事件响应后的代码
DOM模型
页面加载完成之后方可取得对象
代码执行：从上到下
Document Object Model文档对象模型
即将文档中的标签、属性、文本转换为对象
Document对象的理解
Document管理了所有的HTML文档内容
Document时一种树结构的文档，有层级关系
它让我们把所有标签都对象化
可以通过Document访问所有的标签对象
Document对象中的方法介绍
getElementById ( elementId )
通过标签的id属性寻找dom对象
返回第一个id的对象的引用
getElementsByName ( elementName )
通过标签的name属性寻找dom对象
返回Document对象数组
数组中的元素顺序与页面中的顺序相同
getElementByTagName ( tagname )
通过标签名寻找dom对象
返回Document对象数组
数组中的元素顺序与页面中的顺序相同
createElement ( tagName )
通过给定的标签名，创建一个标签对象
Document对象的变量
id（id属性）
tagName（标签名）
parentNode（父亲节点）
children（孩子节点）
innerHTML（起始、结束标签中的内容）
可对应修改标签中的内容
checked（复选框的选中状态）
可读可写
节点的常用属性、方法
节点即标签对象（不全面）
注释、文本等是节点，但不是标签对象
属性
childNodes
当前节点的所有孩子节点
firstChild
当前节点的第一个子节点
lastChild
当前节点的最后一个子节点
parentNode
当前节点的父节点
nextSibling
当前节点的下一个节点
previousSibling
当前节点的上一个节点
className
获取或设置标签的class属性值
innerHTML
获取或设置起始、结束标签中的内容
内容包含标签等
innerText
获取或设置起始、结束标签中的文本
文本只包含页面中的文字（？）
方法
getElementByTagName ( )
获取当前节点的制定标签名孩子节点
appendChild ( oChildNode )
添加子节点，oChildNode为添加子节点
jQuery
JavaScript和查询（Query）
辅助js开发的js类库
核心思想
写的更少，做得更多
使用jQuery必须引入类库
<script type="text/javascript" src="类库所在" ></script>
核心函数：$
传入参数为函数
页面加载之后自动调用
相当于：window.onload = function() {}
传入参数为HTML字符串
创建HTML标签对象
传入参数为选择器字符串
$("#id属性值")
$(".class属性值")
$("标签名")
根据传入参数查找标签对象
传入参数为Document对象
会将Document对象转换为jQuery对象
Document对象与jQuery对象
区别
Document对象Alert结果为：[object HTML标签名Element]
jQuery对象Alert结果为：[object Object]
两者的属性、方法不同
jQuery对象本质
Document数组 + jQuery提供的一系列功能函数
互转
Document转jQue
$ ( Document )
jQuery转Document
jQuery[下标]
jQuery选择器
基本选择器
#id
根据id查找对象
$ ( "#id属性值" );
.class
根据class查找对象
$ ( ".class属性值" );
element
根据标签名查找对象
$ ( "标签名" );
*
表示任意的所有元素
$ ( "*" );
组合
标签名 . class属性值
$ ( "选择器1，选择器2，…，选择器n" );
层级选择器
ancestor descendant
查找给定祖先元素的所有后代元素
$ ("元素 元素")
parent > child
查找给定父元素下的所有子元素
$ ("元素 > 元素")
prev + next
匹配所有紧接在prev元素后（同级）的next元素
$ ("元素 + 元素")
prev ~ sibling
匹配prev之后（同级）的所有sibling元素
$ ("元素 ~ 元素")
过滤选择器
基本过滤选择器
: first
获取第一个元素
$ ("元素 : first")
: last
获取最后一个元素
$ ("元素 : last")
: not ( selector )
去除与给定选择器匹配的元素
$ ("元素 : not ( selector )")
: even
匹配所有索引值（从0开始）为偶数的元素
$ ("元素 : even")
: odd
匹配所有索引值（从0开始）为奇数的元素
$ ("元素 : odd")
: eq ( index )
匹配指定索引值的元素
$ ("元素 : eq ( index )")
: gt ( index )
匹配所有大于指定索引值的元素
$ ("元素 : gt ( index )")
: lt ( index )
匹配所有小于指定索引值的元素
$ ("元素 : lt ( index )")
: header
匹配标题元素
$ (" : header")
: animated
匹配所有正在执行动画效果的元素
$ (" : animated")
内容过滤选择器
: contains
匹配包含给定文本的元素
$ ("元素 : contains ( 文本 )")
: empty
匹配所有不包含子元素或文本的空元素
$ ("元素 : empty")
: parent
匹配含有子元素或文本的元素
$ ("元素 : parent")
: has ( selector )
匹配含有选择器所匹配的元素的元素
$ ("元素 : has (selector)")
属性过滤器
[ attribute ]
匹配包含给定属性的元素
$ ("元素 [ 属性 ]")
[ attribute=value ]
匹配给定属性是某个特定值的元素
$ ("元素 [ 属性=' 属性值 ' ]")
[ attribute != value ]
匹配给定属性不是某个特定值的元素或不包含给定元素的元素
$ ("元素 [ 属性 !=' 属性值 ' ]")
[ attribute ^= value ]
匹配给定属性是以特定值开始的元素
$ ("元素 [ 属性 ^=' 属性值 ' ]")
[ attribute $= value ]
匹配给定属性是以特定值结尾的元素
$ ("元素 [ 属性 $=' 属性值 ' ]")
[ attribute *=value ]
匹配给定属性包含特定值的元素
$ ("元素 [ 属性 *=' 属性值 ' ]")
[ attribute1 ][ attribute2 ]
$ ("元素 [ 属性过滤器 ][ 属性过滤器 ]")
表单过滤器
$ (" : abcd")
: input
匹配所有input，textarea，select，button元素
: text
匹配所有单行文本框
: password
匹配所有密码框
: radio
匹配所有单选框
: checkbox
匹配所有复选框
: submit
匹配所有提交按钮
: reset
匹配所有重置按钮
: button
匹配所有按钮
: file
匹配所有文件域
: hidden
匹配所有不可见元素
表单对象属性
$ (" 元素（input、select option等）: abcd ")
: enabled
: disabled
匹配可用 / 不可用元素
: checked
匹配所有选中的被选中元素（单选、复选框）
: selected
匹配所有选中的option元素（下拉列表）
元素筛选（方法）
eq( index )
获取第index各元素（下标从0开始）
first()
获取第一个元素
last()
获取最后一个元素
filter(表达式（选择器、jQuery对象）)
筛选出与表达式匹配的元素
is( 表达式 )
若存在元素符合表达式，返回true
has( 选择器 )
获取包含指定后代的元素
not( 表达式 )
删除与指定表达式匹配的元素
add( 表达式 )
将匹配的元素添加到当前的jQuery对象中
属性操作
$("选择器/过滤器").abc("");
html("属性值")
设置、获取起始、结束标签中的内容
与Document中的innerHTML一样
text("属性值")
设置、获取起始、结束标签中的文本
与Document中的innerText一样
设置时，标签中的其他标签会被清除
val("属性值")
设置、获取表单项的value属性值
与Document中的value一样
可批量操作复选框的选中状态
$("选择器/过滤器, ...")value(["value值","value值"]);
attr("属性名", "属性值")
设置、获取属性的值
不操作checked、readOnly、selected、disabled等待
可操作非标准的属性，如自定义属性
prop("属性名", "属性值")
attr()的改进版本，与attr()用法一样
设置、获取属性的值
只操作checked、readOnly、selected、disabled等待
Document的增、删、改
内部插入
a.appendTo(b)
将a插到b子元素末尾，成为最后一个子元素
a.prependTo(b)
将a插到b子元素的前面，成为第一个子元素
外部插入
a.insertAfter(b)
在所有b之后均插入一个a
a.insertBefore(b)
在所有b之前均插入一个a
替换
a.replaceWith(b)
用一个b替换掉所有的a
a.replaceAll(b)
用a替换掉所有的b
删除
a.remove()
删除a标签
a.empty()
清除a标签里的内容（包括文本、子标签等）
confirm("内容")
确认提示函数，点击确定返回true
CSS样式操作
addClass()
添加样式
removeClass()
删除样式
toggleClass()
有就删除，没有就添加
offset()
获取、设置元素的坐标
动画
基本动画
show()
将隐藏的元素显示
hide()
将可见的元素隐藏
toggle()
可见就隐藏，不可见就显示
添加参数
时长，以ms为单位
回调函数（动画完成后自动调用的函数）
淡入淡出动画
fadein()
淡入（可见）
fadeOut()
淡出（不可见）
fadeTo()
在指定时长内将透明度修改到指定的值（0~1）
fadeToggle()
可见就淡出，不可见就淡入
添加参数
时长，以ms为单位
回调函数（动画完成后自动调用的函数）
事件操作
页面加载区别
原生js
除jQuery的部分外，还需等标签显示时需要的内容加载完成
只执行最后一次的赋值函数
jQuery
将注册的函数，依次顺序执行
浏览器内核解析完页面的标签创建好Document对象后执行
其他事件处理方法
click()
单击事件
mouseover()
鼠标移入事件
mouseout()
鼠标移出事件
bind()
给元素一次性绑定一个或多个事件
bind (" 事件1 事件2 ", function ( ) { } )
one()
与bind()类似，但one绑定的事件只会响应一次
unbind()
解除事件的绑定
unbind ( " 事件1 事件2 " )
live()
绑定选择器匹配的所有元素的事件（包括后面动态创建的元素）
绑定事件
abcd ( function ( ){ } )
触发事件
abcd ( )
事件冒泡
父子监听同一事件，子元素事件触发时，父元素事件同时触发
阻止方法
在事件函数体内，return false
事件对象
封装有触发的事件信息的js对象
获取方法
绑定事件时，function参数列表中添加参数event
参数.type：获取事件类型
xml
可扩展的标记性语言
作用
保存数据，且数据具有自我描述性
可作为项目或模块的配置文件
可作为网络传输数据的格式（现在已JSON为主）
语法
<?xml version="1.0" encoding="utf-8" ?>
xml文件声明
version为版本（从未更新）
元素（标签）
从起始标签直到结束标签的部分（包括起始、结束标签）
命名规则
可以含字母、数字以及其他字符
不能以数字、标点符号开始
名称不能包含空格
分类
单标签
双标签
属性
一个标签可以书写多个属性
每个属性的值必须用双引号引起来
所有元素都须有关闭标签
标签对大小写敏感
标签必须正确的嵌套
文档须有根元素（且只能有一个）
没有父标签的元素
文本区域（CDATA区）
区域内的内容为纯文本，不需xml语法解析
< ! [ CDATA [ 文本内容 ] ] >
xml解析技术
DOM
W3C组织制定
sax
以类似事件机制通过回调告诉用户当前解析的内容
一行一行的读取解析，不hi创建大量dom对象
在内存的使用上，性能上，均优于DOM解析
pull
主要用在Android手机开发
跟sax类似，都是事件机制解析xml文件
jdom
在dom基础上进行封装
dom4j
对jdom进行封装
解析 xml 方法
导 dom4j 的 jar 包
导入依赖的 hamcrest-core、junit 的 jar 包
读取 xml 文件生成 Document 对象
方法上一行加 @Test
SAXReader reader = new SAXReader();
Document doc = reader.read ( " 文件路径 " );
需处理异常
Element rootElement = doc.getRootElement();
获取根元素
element() 用于通过标签名查找子元素
asXML() 将标签对象转换为标签字符串
getText() 用于标签中的文本内容
elementText() 直接获取制定标签名中的文本内容
JavaWeb服务器
基于请求和响应来开发的
请求
客户端给服务器发送数据
响应
服务器给客户端回传数据
请求和响应是成对出现的
资源分类
按实现的技术、呈现的效果的不同
静态
html、css、js、txt、mp4视频等
动态
jsp页面、Sevlet程序
常用的服务器
Tomcat
提供对 jsp、Servlet 的支持
版本

Jboss
遵从JavaEE规范、开发源代码、纯Java的EJB服务器
GlassFish
Oracle开发
Resin
对Servlet、JSP提供良好的支持，性能优良
WebLogic
Oracle开发，支持JavaEE规范
所有通过Java语言编写的可以通过浏览器访问的程序
Tomcat
安装
解压 zip 压缩包即可
目录介绍
bin
存放 Tomcat 的可执行程序
conf
存放 Tomcat 的配置文件
lib
存放 Tomcat 的 jar 包
logs
存放 Tomcat 运行时输出的日记信息
temp
存放 Tomcat 运行时产生的临时数据
webapps
存放部署的 web 工程
一个目录一个工程
work
Tomcat 工作目录
存放 jsp 翻译为 Servlet 的源码及 Session 钝化（序列化）
启动
双击 bin 下的 startup.bat 文件
输入测试地址测试是否成功启动
http://localhost:8080
http://127.0.0.1:8080
http://真实IP:8080
小黑窗口一闪而过时，证明 JAVA_HOME 环境变量没有配置好
配置内容：jdk 路径
在 cmd 的 Tomcat bin 目录下输入：catalina run
停止
点击 Tomcat 的关闭按钮
在 Tomcat 窗口下 ctrl + c
双击 bin 下的 shutdown.bat 文件
修改端口号
conf 下的 server.xml 配置文件
修改 Connector 标签的 port 属性
端口号范围：1~65535（一般选1000以上）
修改完成需重启 Tomcat
部署 web 工程
将 web 工程目录拷贝到 webapps 下
访问
http://IP:8080/ 工程名 / 文件名（html、jsp等文件）
在 conf\Catalina\localhost 目录下创建 .xml文件
内容
<Context path=" 工程访问路径 " docBase="工程"所在路径 />
访问方法
拖动 html 到浏览器
使用 file:// 协议
浏览器直接读取协议后的路径，解析展示即可
通过地址访问
使用 http 协议
服务器读取访问的资源文件，回传给客户端
ROOT 工程
地址为：http://ip:port/ 时，默认访问 ROOT 工程
地址为：http://ip:port/ 工程名 时，默认访问 index.html 页面
IDEA 整合 Tomcat
IDEA 中的 File Settings Build, Execution, Deployment Application Servers 路径下添加
动态工程
Java Enterprise 中勾选 Web Application
目录介绍
src
存放自己编写的 Java 代码
web
存放 web 工程
html 页面
css 文件
js 文件
WEN-INF
受服务器保护的目录，浏览器无法直接访问
lib
存放第三方的 jar 包
web.xml
整个动态 web 工程的配置部署描述文件
Servlet 程序
Filter 过滤器
Listener 监听器
Session 超时
运行
建议修改工程对应的 Tomcat 运行实例名称
重启
运行后的按钮即为重启按钮
Update resources
更新 web 中的资源到运行实例中
Update classes and resources
更新 web 中的 Class 字节码和资源文件到运行实例中
Redeploy
重新部署 web 模块，但不重启 Tomcat 实例
Restart server
重启 Tomcat 实例，并更新 web 模块内容
配置资源热部署

Servlet
概念
JavaEE 规范之一
JavaWeb 三大组件之一
运行在服务器上的 Java 小程序
接收客户端的请求，并响应数据给客户端
实现 Servlet 程序
编写类实现 Servlet 接口
实现 service 方法，处理请求，响应数据
在 web.xml 中配置 servlet 程序的访问地址
创建 <servlet></servlet> 标签
<servlet-name></servlet-name>
给 Servlet 程序起别名（一般为类名）
<servlet-class></servlet-class>
Servlet 程序的全类名
创建 <servlet-mapping></servlet-mapping> 标签
<servlet-name><servlet-name>
即别名
<url-pattern> /abc </url-pattern>
/ 在服务器解析时，表示地址为：http://ip:port/工程路径（不可省略）
/abc 表示地址为：http://ip:port/工程路径/abc
Servlet 生命周期
执行 Servlet 构造器方法
执行 init 初始化方法
第一次访问时，创建 Servlet 程序时调用
执行 service 方法
每次访问均会调用
执行 destroy 销毁方法
web 工程停止时调用
请求的分发处理
将 service 方法中的 servletRequest 变量类型转换为 HttpServletRequest
调用 HttpServletRequest 中的 getMethod() 方法获取请求方式
通过继承实现 Servlet 程序
编写类继承 HttpServlet 类
根据业务需求重写 doGet()、doPost() 方法
在 web.xml 中配置 Servlet 访问地址
ServletConfig
三大作用
获取 Servlet 的别名 servlet-name 的值
初始化参数 init-param
获取 ServletContext 对象
ServletContext
概念
一个接口，表示 Servlet 上下文对象
一个 web 工程，只有一个 ServletContext 对象实例
ServletContext 对象为域对象
域对象
像 Map 一样存取数据的对象
存取数据的操作范围：整个 web 项目工程
web 工程部署启动时创建，工程停止时销毁
四个作用
获取 web.xml 中配置的上下文参数 context-param
获取当前的工程路径，格式：/工程路径
获取工程部署后在服务器硬盘上的绝对路径
像 Map 一样存取数据
HTTP 协议
请求的 HTTP 协议格式
GET 请求
请求行
请求的方式：GET
请求的资源路径 [ + ? + 请求参数 ]
请求的协议版本号：HTTP/1.1
请求头
key : value 组成
Accept
客户端可以接收的数据类型
Accept-Language
客户端可以接收的语言类型
zh_CN（中文中国）
en_US（英文美国）
User-Agent
浏览器的信息
Accept-Encoding
客户端接收的数据编码（压缩）格式
Host
请求的服务器 ip 和端口号
Connection
告知服务器请求连接如何处理
Keep-Alive
回传数据后，保持一小段时间的连接
Closed
马上关闭
POST 请求
请求行
请求的方式：POST
请求的资源路径 [ + ? + 请求参数 ]
请求的协议版本号：HTTP/1.1
请求头
key : value 组成
Accept
客户端可以接收的数据类型
Referer
请求发起时，浏览器地址栏中的地址（从哪来）
Accept-Language
客户端可以接收的语言类型
zh_CN（中文中国）
en_US（英文美国）
User-Agent
浏览器的信息
Content-Type
表示发送的数据类型
application/x-www-form-urlencoded
表示提交的数据格式为：name=value&name=value，后对其进行 url 编码
url 编码：将非英文内容转化为：%xx%xx
multipart/form-data
表示以多段的形式提交数据给服务器（以流的形式提交，用于上传）
Accept-Encoding
客户端接收的数据编码（压缩）格式
Host
请求的服务器 ip 和端口号
Content-Length
表示发送的数据长度
Connection
告知服务器请求连接如何处理
Keep-Alive
回传数据后，保持一小段时间的连接
Closed
马上关闭
Cache-Control
表示如何控制缓存
no-cache：不缓存
空行
请求体
发送给服务器的数据
GET / POST 请求类别
GET
form 标签 method=get
a 标签
link 标签引入 css
Script 标签引入 js 文件
img 标签引入图片
iframe 引入 html 页面
浏览器地址栏中输入地址后敲回车
POST
form 标签 method=post
响应的 HTTP 协议格式
响应行
响应的协议和版本号：HTTP/1.1
响应状态码
响应状态描述符
响应头
key : value
Server
服务器的信息
Content-Type
表示响应体的数据类型
Content-Length
响应体的长度
Date
请求响应时间（格林时间）
空行
响应体
回传给客户端的数据
常见的响应码
200
请求成功
302
请求重定向
404
服务器收到请求，但数据不存在（请求地址错误）
500
服务器收到请求，但服务器内部（代码）错误
MIME
HTTP 协议中数据类型
格式：大类型/小类型

HttpServletRequest
通过 HttpServletRequest 对象获取所有请求信息
常用方法
getRequestURI()
获取请求的资源路径
getRequestURL()
获取请求的同一资源定位符（绝对路径）
getRemoteHost()
后去客户端的 ip 地址
getHeader()
获取请求头
getParameter()
获取请求的参数
getParameterValues()
获取请求的参数（多个）
getMethod()
获取请求的方式（GET / POST）
setAttribute(key, value)
设置域数据
getAttribute(key)
获取域数据
getRequestDispatcher()
获取请求转发对象
请求转发
通过浏览器地址栏的地址访问 Servlet1 程序
通过 Servlet1 程序访问 Servlet2 程序
具体操作
Servlet1
检查有没有带请求的参数
HttpServletRequest.getParameter(name)
处理完业务，设置域数据（给予 Servlet2 调用）
HttpServletRequest.setAttribute(key, value)
添加 Servlet2 访问路径
a = HttpServletRequest.getRequestDispatcher(path)
paht 需以 / 开始
访问 Servlet2
a.forward(req, resp)
Servlet2
获取请求参数
HttpServletRequest.getParameter(name)
获取域数据，检查 Servlet1 业务是否完成
HttpServletRequest.getAttrubute(name)
特点
浏览器地址栏无变化
只是一次请求
共享 Request 域中的数据
可以转发到 WEB-INF 目录下
不可访问工程外的资源
base 标签
设置页面相对路径工作时参照地址
<base href=" 参照地址 ">
HttpServletResponse
作用
表示所有响应的信息
每次请求进来，均会创建一个 Response 对象交予 Servlet 使用
两个输出流
字节流 getOutputStream()
常用于下载（传递二进制数据）
字符流 getWriter()
常用于回传字符串（常用）
两个流在同一时间只能使用一个
响应时乱码
HttpServletResponse.setCharacterEncoding("UTF-8")
设置服务器字符集为 UTF-8
HttpServletResponse.setHeader("Content-Type", "text/html;charset=UTF-8")
设置浏览器字符集为 UTF-8
HttpServletResponse.setContentType("text/html; charset=UTF-8")
设置服务器、客户端字符集为UTF-8，同时设置响应头
需在获取流对象之前调用方有效
请求重定向
旧地址已废弃，服务器给客户端回传一个新地址，浏览器重新访问新地址
做法
旧资源的 doGet 方法中
HttpServletResponse.setStatus(302)
设置响应状态码302，表示重定向
HttpServletResponse.setHeader("location", " 新地址 ")
设置响应头，注明新地址
HttpServletResponse.sendRedirect(" 新地址 ")
特点
浏览器地址栏变为新地址
两次请求
不共享 Request 域中数据
不能访问 WEB-INF 下的资源
可以访问工程外的资源
jsp（Java Server Pages）
Java 的服务器页面
代替 Servlet 回传 html 页面的数据
Servlet 回传 html 页面数据较为繁琐，开发、维护成本较高
本质
一个 Servlet 程序
首次访问 jsp 页面 Tomcat 服务器将 jsp 页面翻译为 java 源文件同时进行编译
头部的 page 指令
<%@ page %>
language
表示 jsp 翻译后的语言文件
暂时只支持 Java
contentType
表示 jsp 返回的数据类型
源码中 response.setContentType() 参数值
pageEncoding
jsp 页面文件的字符集
import
用于导包、导类
autoFlush
设置当 out 输出流缓冲区满了，是否自动刷新缓冲区
buffer
设置 out 缓冲区大小，默认为 8kb
errorPage
设置当 jsp 页面运行出错，自动跳转的错误页面路径
isErrorPage
设置当前 jsp 页面是否是错误信息页面
为 true 时，可获取异常信息
session
设置访问当前 jsp 页面，是否创建 HeepSession 对象
extends
设置 jsp 翻译出来的类默认继承的类
常用脚本
声明脚本
<%! 声明 Java 代码 %>
可以给 jsp 翻译的 Java 类定义属性、方法、静态代码块、内部类等
表达式脚本
<%= 表达式 %>
在 jsp 页面上输出数据
特点
均被翻译到 _jspService() 方法中
均被翻译称为 out.print() 输出到页面上
_jspService() 方法中的对象均可直接使用到表达式脚本中
表达式不能以分号结束
代码脚本
<% Java语句 %>
在 jsp 页面中，编写自己所需要的功能
特点
均被翻译到 _jspService() 方法中
_jspService() 方法中的现有对象可直接使用
可由多个代码脚本组合完成一个 Java 语句
可与表达式脚本组合使用
三种注释
html
<!-- 内容 -->
会被翻译到 Java 源代码中，以 out.writer() 输出到客户端
Java
<% //内容 %>
直接翻译到 Java 源代码中
jsp
<%-- 内容 --%>
可注释掉 jsp 页面中的所有代码
九大内置对象
四大域对象
pageContext
PageContextImpl 上下文对象
当前 jsp 页面有效
request
HttpServletRequest 请求对象
一次请求内有效
session
HttpSession 会话对象
一个会话范围内有效
打开浏览器访问服务器，直至关闭浏览器
application
ServletContext 对象
整个 web 工程内有效
使用优先顺序：范围从小到大
response
响应对象
out
jsp 输出流对象
out.write()
将输入强制转换为 char 类型后输出
out.print()
通过 String.valueOf() 转换后，使用 write 输出
jsp 页面代码执行后进行的操作
执行 out.flush() 将 out 缓冲区 写入 response 缓冲区
执行 response 的刷新操作，将数据写给客户端
config
ServletConfig 对象
page
指向当前 jsp 的对象
exception
异常对象
当 isErrorPage 值为 true 时，方存在
常用标签
静态包含
<%@ include file="/jsp页面路径" %>
特点
不会翻译被包含的 jsp 页面
原理：将被包含的 jsp 页面代码拷贝值包含的位置执行
动态包含
<jsp:include page="/jsp页面路径"> <jsp:param name="" value=""/> <jsp:include>
特点
会翻译被包含的 jsp 页面
底层使用代码
JspRuntionLibrary.include(request, response, "jsp页面路径", out, false);
可以传递参数
转发
<jsp:forward page="jsp页面路径"></jsp:forward>
Listener 监听器
JavaWeb 三大组件之一
JavaEE 的规范（即接口）
监听某种事物的变化，通过回调函数，反馈给程序
ServleContextListener
监听 ServletContext 的创建和销毁
两个方法
contextInitialize()
ServletContext 创建后马上调用，做初始化
contextDestroyed()
ServletContext 销毁后调用
使用步骤
编写类实现 ServletContextListener
实现两个回调方法
到 web.xml 中配置监听器
<listener> <listener-class><listener-class> <listener>
EL 表达式
表达式语言
替代 jsp 页面中的表达式脚本在 jsp 页面中进行数据输出
格式：${ 表达式 }
用于输出域中的数据
输出的顺序：依据域的范围从小到达搜索输出
找不到输出空串
输出类中的属性
格式：${ key.属性名 }
数组需通过下标获取元素值
List集合可直接输出整个集合或通过下标获取特定元素值
Map 集合可直接输出整个集合或通过特定的 key 值后去特定元素值
底层原理：通过 get 方法获取值
运算
关系运算
== / eq、!= / ne、< / lt、> / gt、<= / le、>= / ge
输出为 true 或 false
逻辑运算
&& / and、|| / or、! / not
输出为 true 或 false
算术运算
+、-、*、/ / div、% / mod
输出为运算结果
empty 运算
判断一个数据是否为空，为空输出 true
为空的情况
null、空串、数组长度为0、list元素个数为0、map元素个数为0
格式：${ empty key }
三元运算
?:
点运算、中括号运算
当属性名中存在特殊字符时，使用 [' 属性名 '] 输出
十一个隐含对象
pageContext
PageContextImpl 类型
用于获取 jsp 中的九大内置对象
四个特定域
pageScope
Map<String, Object> 类型
用于获取 pageContext 域中的数据
requestScope
Map<String, Object> 类型
用于获取 request 域中的数据
sessionScope
Map<String, Object> 类型
用于获取 session 域中的数据
applicationScope
Map<String, Object> 类型
用于获取 application 域中的数据
param
Map<String, String> 类型
用于获取请求参数的值
paramValues
Map<String, String[]> 类型
获取请求参数的多个值
header
Map<String, String> 类型
获取请求头的信息
heaerVlaues
Map<String, String[]> 类型
获取请求头的多个信息
cookie
Map<String, Cookie> 类型
获取 Cookie 信息
initParam
Map<String, String> 类型
获取 web.xml 中配置的 <context-param> 上下文参数
JSTL 标签库
一个不断完善的开发源代码的 JSP 标签库
替换代码脚本
引入标签库指令
<%@ taglib prefix=" 前缀 " uri=" URI值 " %>
功能
核心标签库
http://java.sun.con/jsp/core
前缀：c
格式化
http://java.sun.con/jsp/fmt
前缀：fmt
函数
http://java.sun.con/jsp/functions
前缀：sn
数据库（不使用）
http://java.sun.con/jsp/sql
前缀：sql
XML（不使用）
http://java.sun.con/jsp/xml
前缀：x
使用步骤
导包
taglibs-standard-impl-1.2.1.jar
taglibs-standard-spec-1.2.1.jar
使用 taglib 指令引入标签库
核心标签库
<c:set />
往域中保存数据
scope 设置保存的域对象
page：PageContext（默认值）
request：Request
session：Session
application：ServletContext
var 设置 key
value 设置值
<c:if> 为 true 时的工作 </ c:if>
做 if 判断
test 表示判断的条件
使用 EL 表达式输出
多路判断
<c:choose><c:when></c:when><c:otherwise></c:otherwise></c:choose>
与 switch...case...default 类似
choose 相当于 switch
when 相当于 case
test 属性表示当前判断的条件
otherwise 相当于 default
注意
不能使用 html 注释，可以使用 jsp 注释
when 标签的父标签只能是 choose 标签
<c:forEach></c:forEach>
遍历数字
begin 设置开始的索引
end 设置结束的索引
step 表示遍历的增长值
var 表示循环的变量
遍历数组、List、Map
items 表示数据源（数组）
var 表示当前遍历到的数据
varStatus="status"
表示当前遍历到的数据的状态
底层：类 Status 实现接口 LoopTagStatus
LoopTagStatus 接口
getCurrent()
获取当前遍历到的数据
getIndex()
获取遍历的索引
getCout()
遍历的个数
isFirst()
当前数据是否是第一条
isLast()
当前数据是否是最后一条
getBegin()
获取 begin 属性值
getEnd()
获取 end 属性值
getStep()
获取 step 属性值
文件上传、下载
上传
步骤
form 标签中 method="post"
form 标签中 encType 的值必须为 multipart/form-data
数据以多段（一个表单项一个数据段）进行拼接，后以二进制流发送给服务器
使用 input type="file" 添加上传的文件
编写服务器代码接收，处理上传的数据
ServletInputStream.read(保存数据的变量)
解析数据
导入 jar 包
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
常用类
ServletFileUpload
用于解析上传的数据
创建：new ServletFileUpload ( new DiskFileItemFactory ())
isMultipartContent(HttpServletRequest)
判断当前上传的数据格式是否为多端的格式
parseRequest(HttpServletRequest)
返回 FileItem 类（表示每一个表单项）的 List 集合
解析上传的数据
FileItem
isFoemField()
判断是否为普通的表单项
true 表示普通类型的表单项
getFieldName()
获取表单项的 name
getString()
获取当前表单项的值
getName()
获取上传的文件名
write(file)
将文件写到 file 所指向硬盘位置
下载
服务器工作
获取要下载的文件名
读取要下载的文件内容
servletContext.getResourceAsStream( 文件路径 )
通过响应头告知客户端返回的数据类型
获取文件类型：servletContext.getMimeType( 文件路径 )
设置数据类型：resp.setContentType( 类型 )
通过响应头告知客户端收到的数据是用于下载使用
resp.setHeader("Content-Disposition", "attachment; filename=" + 文件名)
文件名中文乱码：URLEncoder.encode(" 文件名 ", "UTF-8")
将文件内容回传
IOUtils.copy( InputStream, OutputStream )
Cookie
服务器通知客户端保存键值对的一种技术
每个 Cookie 大小限定为 4kb
创建 Cookie
new Cookie( name, value )
response.addCookie( cookie )
获取 Cookie
request.getCookies()（返回 Cookie 数组）
修改 Cookie
通过创建并保存同名 Cookie 覆盖原来的 Cookie
查找到 Cookie 后通过 setValue 修改后保存
浏览器查看
F12下的 Application
存活控制
setMaxAge()
正数：指定秒数后过期
负数：浏览器关闭后删除（默认值：-1）
零：马上删除
路径
setPath(" 路径 ")
用于筛选 Cookie 发送给服务器

Session（会话）
一个接口（HttpSession）
维护客户端与服务器之间关联的技术
每个客户端都有自己的 Session 会话
用于保存用户登录之后的信息（保存在服务器）
创建、获取
request.getSession()
第一次调用是创建会话
之后调用均为获取
用 isNew() 判断是否是刚创建的会话
会话有一个唯一的 ID 值
通过 getID() 可获取会话的 ID
数据的存取
获取后 setAttribute()、getAttribute()
生命周期控制
设置
setMaxInactiveInterval(int interval)（单位为秒）
正数：指定时长
负数：永不超时（极少使用）
invalidate()
让当前 Session 马上超时无效
超过时长，将被销毁
超时指客户端两次请求的最大间隔时长
默认时长：30分钟
Tomcat 服务器配置文件 web.xml 中配置了服务器下所有 Session 默认时长
<session-timeout>30</session-timeout>
可通过工程下的 web.xml 中配置修改当前工程下所有 Session 默认时长
<session-config> <session-timeout>时长（分钟）</session-timeout> </session-config>
获取
getMaxInactiveInterval()
浏览器与 Session 关联的原理
服务器每次创建 Session 时，均会创建一个 Cookie 对象
name 为 JSESSIONID，value 为 Session 的 ID
后再次请求时，会将 Session 的 ID 以 Cookie 的形式发送给服务器
验证码
表单重复提交情况
使用请求转发进行页面跳转，刷新页面时就会发起最后一次的请求
解决：使用重定向进行页面跳转
用户正常提交后，未收到服务器响应，重复提交
正常提交，服务器正常响应后，用户回退浏览器，重新提交
解决：使用验证码
验证码解决上述问题原理
浏览器提交后，在 Servlet 程序通过 Session 获取并删除验证码
再次提交时，Session 中没有验证码，故验证失败，从而阻止了表单的重复提交
谷歌 kaptcha 图片验证码
导入 kaptcha-2.3.2.jar
web.xml 中配置 Servlet 程序
与配置 Servlet 访问地址类似
将 url 改为：<url-pattern>/kaptcha.jpg</url-pattern>
使用
通过 img 标签导入
在 Servlet 程序中，获取并删除验证码
req.getSession().getAttribute(KAPTCHA_SESSION_KEY)
req.getSession().removeAttribute(KAPTCHA_SESSION_KEY)
设置点击验证码刷新
给验证码图片绑定单击事件
this.src=" kaptcha.jpg访问路径 "
火狐、IE用以上方法无法实现
原因
浏览器会将每次请求的内容缓存在浏览器端（硬盘或内存）
再发一样的地址、参数、请求时，直接再缓存中找
解决
缓存名称有最后的资源名与参数组成
在 src 后加上一个参数并赋予每次请求均不同的值即可
Filter 过滤器
JavaWeb 三大组件之一
JavaEE 的规范（接口）
作用：拦截请求，过滤响应
拦截请求应用场景
权限检查
日记操作
事务管理
使用
编写类实现 Filter 接口
实现过滤方法 doFilter()
filterChain.doFilter(servletRequest, servletResponse)
用于让程序继续往下访问用户的目标资源
web.xml 中配置 Filter 的拦截路径
与 Servlet 程序访问地址类似
将标签中的 servlet 改为 filter
url-pattern 配置地址为拦截地址，加 * 可表示目录下所有文件
生命周期
启动 web 工程时创建并初始化
停止 web 工程时销毁
FilterConfig
Filter 过滤器的配置文件类
创建 Filter 时创建 FilterConfig
作用
获取 Filter 过滤器的配置内容
获取名称（filter-name）
获取初始化参数（init-param）
获取 ServletContext 对象
FilterChain 过滤器链
filterChain.doFilter() 作用
执行下一个 Filter 过滤器（直到没有）
执行目标资源
多个 Filter
执行顺序
在 web.xml 中配置的顺序
特点
所有 Filter 和目标资源默认执行在同一个线程中
多个 Filter 使用同一个 Request 对象
拦截路径
精确匹配
eg：<url-pattern>/abc.jsp</url-pattern>
地址必须为：http://ip:port/工程路径/abc.jsp
目录匹配
eg：<url-pattern>/abc/*</url-pattern>
地址必须为：http://ip:port/工程路径/abc/*
即 abc 文件下的资源文件
后缀名匹配
eg：<url-pattern>*.html</url-pattern>
表示请求地址必须以 .html 结尾才会拦截到
TreadLocal
作用：解决多线程的数据安全问题
特点
可以为当前线程关联一个数据（普通变量、对象、数组、集合等）
只能关联一个，需关联多个则创建多个对象
定义时一般都是 static 类型
数据在线程销毁后由 JVM 释放
JSON
一种轻量级的数据交换格式
定义
{ "key1" : value1, "key2" : value2 }
两个常用方法
JSON 存在形式
对象
操作 JSON 中的数据时使用的格式
字符串
客户端与服务器端交换数据时使用
JSON.stringify()
将对象转为字符串
JSON.parse()
将字符串转为对象
在 Java 中的使用
导入 gson-2.2.4.jar 包
JavaBean 与 JSON 的互转
new Gson().toJson( Java对象 )
new Gson().from( JSON字符串, 对象.class )
List 与 JSON 的互转
new Gson().toJson( List集合 )
new Gson().from( JSON字符串, A.getType() )
编写类 A 继承 TypeToken，并将其泛型填写为转化的具体类型
Map 与 JSON 的互转
new Gson().toJson( Map集合 )
new Gson().from( JSON字符串, A.getType() )
编写类 A 继承 TypeToken，并将其泛型填写为转化的具体类型
可将 编写类 A 及 A.getType() 改为编写匿名内部类
AJAX
一种创建交互式网页应用的网页开发技术
浏览器通过 js 异步发起请求，局部更新页面
使用 js 发起 AJAX 请求步骤
创建 XMLHttpRequest
调用 open 方法设置请求参数
参数：请求类型，url，是否异步处理
响应数据处理
将数据转为 JSON 字符串
resp.getWriter().write( 字符串 )
客户端通过 responseText 属性接收
绑定 onreadystatechange 事件，处理请求完成后的操作
当 readyState 值为4（请求处理完成）且 status 值为200边处理操作
调用 send 方法发送请求
jQuery 中的 AJAX 请求
$.ajax
url
请求的地址
type
请求的类型
data
发送给服务器的数据
格式
name=value&name=value
{ key:value,key:value }
seccess
请求成功响应的回调函数
dataType
响应的数据类型
常用数据类型
text：纯文本
xml：xml数据
json：json对象
$.post、$.get
url
请求的地址
data
发送给服务器的数据
格式
name=value&name=value
{ key:value,key:value }
callback
成功的回调函数
type
放回的数据类型
常用数据类型
text：纯文本
xml：xml数据
json：json对象
$.getJSON
url
请求的地址
data
发送给服务器的数据
格式
name=value&name=value
{ key:value,key:value }
callback
成功的回调函数
表单序列化 serialize()
将表单中所有表单项的内容获取到，并以 name=value&name=value 拼接