1. HTTP协议
http也叫超文本传输协议。客户端发送给服务端的为请求协议,服务端发送给客户端的为响应协议。
书写格式:HTTP: // IP地址 : 端口 / 访问的资源路径 ? 条件参数
特点:支持服务器/客户模式;简单快速;灵活;无连接;无状态
2. Servlet的实现–Request
2.1 获取请求
// 获取请求时的完整路径 (从http开始,到"?"前面结束)
String url = request.getRequestURL();
// 获取请求方式 (GET和POST)
String method = request.getMethod();
// 获取当前协议版本 (HTTP/1.1)
String prototol = request.getProtocol();
// 获取项目的站点名 (项目对外访问路径)
String webapp = request.getContextPath(); // 上下文路径
// 获取指定名称的参数值,返回字符串 (重点!!!)
String str = request.getParameter("uname");
2.2 请求乱码问题
GET请求在Tomcat8及以上版本 无需处理,在7一下版本
new String(request.getParameter(name).getBytes("ISO-8859-1"),"UTF-8");
(数据本身不乱码继续使用会乱码)
POST请求无论是什么版本都会乱码,要设置服务器解析编码的格式
request.setCharacterEncoding("UTF-8");
(只针对post请求)
2.3 请求转发跳转
可以让请求从服务端跳转到客户端(或跳转到指定Servlet)
request.getRequestDispatcher(url).forward(request,response);
2.4 作用域
通过该对象可以在一个请求中传递数据,作用范围:在一次请求中有效,即服务器跳转有效。(请求转发跳转时有效)
// 设置域对象内容
request.setAttribute(String name, Object value);
// 获取域对象内容
request.getAttribute(String name);
// 删除域对象内容
request.removeAttribute(String name);
3. Servlet的实现–Response
3.1 响应数据
getWriter()---------------->字符输出流 (输出字符串)
getOutputStream()----->字节输出流 (输出一切数据)
两种流不可同时使用。如果同时使用会报错 (.write)
3.2 字符流/字节流响应数据
乱码原因:
1. 对于 getWriter()获取到的字符流,响应中文必定出乱码,由于服务器端在进行编码时默认会使用 ISO-8859-1 格式的编码,该编码方式并不支持中文。
2. 对于 getOutputStream()方式获取到的字节流,响应中文时,由于本身就是传输的字节, 所以此时可能出现乱码,也可能正确显示。当服务器端给的字节恰好和客户端使用的编码方式一致时则文本正确显示,否则出现乱码。
乱码解决:
1. 设置服务端的编码格式
response.setCharacterEncoding("UTF-8");
2. 设置客户端的编码格式
response.setHeader("content-type","text/html;charset=UTF-8");
总结:设置客户端和服务端的编码都支持中文,且保持一致。
同时设置客户端和服务端的编码格式
response.setContentType("text/html;charset=UTF-8");
3.3 重定向
response.sendRedirect(String s);
3.4 请求转发与重定向的区别
- 请求转发的地址栏不会发生改变,重定向的地址栏会发生改变
- 请求转发只有一次请求,重定向有两次请求
- 请求转发时request对象可共享,重定向时request对象不共享
- 请求转发是服务端行为,重定向是客户端行为
- 请求转发时的地址只能是当前站点下(当前项目)的资源,重定向时地址可以是任何地址
4. Cookie
4.1 Cookie的创建与发送
// Cookie的创建
Cookie cookie = new Cookie("name","admin");
// 发送(响应)Cookie对象
response.addCookie(cookie);
4.2 Cookie的获取
// 获取cookie数组
Cookie[] cookies = request.getCookies();
// 判断cookie是否为空
if (cookies != null && cookies.length > 0) {
// 遍历cookie数组
for (Cookie cookie: cookies ) {
// 获取cookie的名称和值
String name = cookie.getName();
String value = cookie.getValue();
System.out.println("名称:" +name + ",值:" + value);
}
}
4.3 Cookie的到期时间
/* 到期时间:负整数 (默认值-1.表示只在浏览器内存中存活,关闭浏览器失效)*/
Cookie cookie = new Cookie("uname1","zhangsan");
cookie.setMaxAge(-1); // 关闭浏览器失效
response.addCookie(cookie);
/* 到期时间:正整数 (表示存活指定秒数,会将数据存在磁盘中) */
Cookie cookie2 = new Cookie("uname2","lisi");
cookie2.setMaxAge(30); // 存活30秒
response.addCookie(cookie2);
/* 到期时间:零 (表示删除cookie) */
Cookie cookie3 = new Cookie("uname3","wangwu");
cookie3.setMaxAge(0); // 删除cookie
response.addCookie(cookie3);
Cookie的注意点
- Cookie只在当前浏览器中有效(不跨浏览器和电脑)
- Cookie不能存中文
如果一定要存中文,则需要通过URLEncoder.encode()方法进行编码,获取时通过URLDecoder.decode()方法进行解码- 如果出现同名的Cookie对象,则会覆盖
- Cookie的存储数量是有上限的,不同浏览器的上限不同。Cookie存储的大小是有效的,在4kb左右
5. Session
5.1 Session对象的获取
request.getSession()
// 获取session的会话标识符
String id = session.getId();
System.out.println(id);
// 获取session的创建时间
System.out.println(session.getCreationTime());
// 获取最后一次访问时间
System.out.println(session.getLastAccessedTime());
// 判断是否是新的session对象
System.out.println(session.isNew());
5.2 Session域对象
/* session域对象 */
// 获取session对象
HttpSession session = request.getSession();
// 设置session域对象
session.setAttribute("uname","admin");
session.setAttribute("upwd","123456");
// 移除session域对象
session.removeAttribute("upwd");
/* request域对象 */
request.setAttribute("name","zhangsan");
// 请求转发跳转到jsp页面
// request.getRequestDispatcher("index.jsp").forward(request,response);
// 重定向跳转到index.jsp页面
response.sendRedirect("index.jsp");
5.3 Session对象的销毁
- 手动设置到期时间
可以在程序中自己设定 session 的生命周期。
通过session.setMaxInactiveInterval(int) 来设定 session 的最大不活动时间,单位为秒。
可以通过 getMaxInactiveInterval() 方法来查看当前 Session 对象的最大不活动时间。- 立即销毁
可以通过 session.invalidate() 方法让 session 立刻失效- 关闭浏览器
session底层依赖cookie,cookie对象默认只在浏览器内存中存活,关闭浏览器即失效- 关闭服务器
当关闭服务器时,session 销毁。
5.4 ServletContext对象
// 通过request对获取
ServletContext servletContext1 = request.getServletContext();
// 通过session对象获取
ServletContext servletContext2 = request.getSession().getServletContext();
// 通过ServletConfig对象获取
ServletContext servletContext3 = getServletConfig().getServletContext();
// 直接获取
ServletContext servletContext4 = getServletContext();
// 常用方法
// 1. 获取当前服务器的版本信息
String serverInfo = request.getServletContext().getServerInfo();
System.out.println("获取当前服务器的版本信息: " + serverInfo);
// 2. 获取项目的真实路径
String realPath = request.getServletContext().getRealPath("/");
System.out.println("获取项目的真实路径:" + realPath);
5.5 Servlet三大对象
- request域对象
在一次请求中有效。请求转发有效,重定向失效。- session域对象
在一次会话中有效。请求转发和重定向都有效,session销毁后失效。- servletContext域对象
在整个应用程序中有效。服务器关闭后失效。
6. Filter
6.1 请求乱码问题
@WebFilter("/*")
public class AEncodingFilter implements Filter {
public AEncodingFilter() {
}
public void destroy() {
}
public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain chain) throws IOException, ServletException {
// 基于HTTP
HttpServletRequest request = (HttpServletRequest) arg0;
HttpServletResponse response = (HttpServletResponse) arg1;
// 处理请求乱码乱码 (处理POST请求)
request.setCharacterEncoding("UTF-8");
// 处理GET请求且服务器版本在Tomcat8以下的
String method = request.getMethod();
// 如果是GET请求
if ("GET".equalsIgnoreCase(method)) {
// 服务器版本在Tomcat8以下的 Apache Tomcat/8.0.45
String serverInfo = request.getServletContext().getServerInfo();
// 得到具体的版本号
String versionStr = serverInfo.substring(serverInfo.indexOf("/")+1, serverInfo.indexOf("."));
// 判断服务器版本是否小于8
if (Integer.parseInt(versionStr) < 8) {
// 得到自定义内部类 (MyWapper继承了HttpServletRequestWapper对象,而HttpServletRequestWapper对象实现了HttpServletRequest接口,所以MyWapper的本质也是request对象)
HttpServletRequest myRequest = new MyWapper(request);
// 放行资源
chain.doFilter(myRequest, response);
return;
}
}
// 放行资源
chain.doFilter(request, response);
}
public void init(FilterConfig fConfig) throws ServletException {
}
/**
* 定义内部类,继承HttpServletRequestWrapper包装类对象,重写getParameter()方法
*/
class MyWapper extends HttpServletRequestWrapper {
// 定义成员变量,提升构造器 中的request对象的范围
private HttpServletRequest request;
public MyWapper(HttpServletRequest request) {
super(request);
this.request = request;
}
/**
* 重写getParameter()方法
*/
@Override
public String getParameter(String name) {
String value = request.getParameter(name);
if (value != null && !"".equals(value.trim())) {
try {
// 将默认ISO-8859-1编码的字符转换成UTF-8
value = new String(value.getBytes("ISO-8859-1"),"UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
}
return value;
}
}
}
6.2 非法访问拦截
拦截的资源:拦截所有资源 /*
需要放行的资源:
1. 指定页面,放行 (无需登录即可访问的页面 例如:登录页面、注册页面等)
2. 静态资源,放行 (image、js、css文件等)
3. 指定操作,放行 (无需登录即可执行的操作 例如:登录操作、注册操作)
4. 登录状态,放行 (判断session中用户信息是否为空)
其他请求需要被拦截跳转到登录页面
// 基于HTTP请求
HttpServletRequest request = (HttpServletRequest)servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
// 获取请求的路径
String url = request.getRequestURI();
System.out.println(url);
// 1. 指定页面,放行 (无需登录即可访问的页面 例如:登录页面、注册页面等)
if (url.contains("/login.jsp")) {
filterChain.doFilter(request, response);
return;
}
// 2. 静态资源,放行 (image、js、css文件等)
if (url.contains("/js") || url.contains("/image") || url.contains("/css")) {
filterChain.doFilter(request, response);
return;
}
// 3. 指定操作,放行 (无需登录即可执行的操作 例如:登录操作、注册操作)
if (url.contains("/login")) {
filterChain.doFilter(request, response);
return;
}
// 4. 登录状态,放行 (判断session中用户信息是否为空)
String uname = (String) request.getSession().getAttribute("user");
// 判断session是否为空
if (uname != null){
filterChain.doFilter(request, response);
return;
}
// 当用户未登录时,拦截请求跳转到登录页面
response.sendRedirect("login.jsp");
7. JQuery
7.1 安装
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>
7.2 jquery核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对
象。通过该对象可以获取jQuery对象,调用jQuery提供的方法等。
只有jQuery对象才能调用jQuery提供的方法
7.3 Dom对象与Jquery包装集对象
//javascript 中获取 Dom 对象,Dom 对象只有有限的属性和方法:
var div = document.getElementById("testDiv");
//封装jQuery 包装集
var jQueryObject = $("#testDiv");
/* Dom对象 转 Jquery对象 */
// Dom对象转为jQuery对象,只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
/* Jquery对象 转 Dom对象 */
// 获取包装集对象中指定下标的元素,将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);
7.4 选择器
基础选择器
// id选择器 #id属性值
var mydiv = $("#mydiv1");
console.log(mydiv);
// 类选择器 .class属性值
var clas = $(".blue");
console.log(clas);
// 元素选择器 标签名/元素名
var spans = $("span");
console.log(spans);
// 通用选择器 *
var all = $("*");
console.log(all);
// 组合选择器 选择器1,选择器2,..
var group = $("#mydiv1,div,.blue");
console.log(group);
层次选择器
// 后代选择器
var hd = $("#parent div");
console.log(hd);
// 子代选择器
var zd = $("#parent > div");
console.log(zd);
// 相邻选择器
var xl = $("#child + div");
console.log(xl);
// 同辈选择器
var imgs = $(".gray ~ img");
console.log(imgs);
表单选择器
// 表单选择器 :input
var inputs = $(":input");
console.log(inputs);
// 元素选择器
var inputs2 = $("input");
console.log(inputs2);
7.5 操作元素的属性
-
属性的分类:
固有属性:元素本身就有的属性(id、name、class、style)
返回值是boolean的属性:checked、selected、disabled
自定义属性:用户自己定义的属性 -
attr()和prop()的区别:
- 如果是固有属性,attr()和prop()方法均可操作
- 如果是自定义属性,attr()可操作,prop()不可操作
- 如果是返回值是boolean类型的属性
若设置了属性,attr()返回具体的值,prop()返回true;
若未设置属性,attr()返回undefined,prop()返回false;
如果属性的类型是boolean(checked、selected、disabled),则使用prop()方法;否则使用attr()方法。
7.6 创建与添加元素
// 创建元素
var p = "<p>这是一个p标签</p>";
console.log(p);
console.log($(p));
/* 添加元素 */
// 创建元素
var span = "<span>小奶狗</span>";
// 得到指定元素,并在元素的内部最前面追加内容
$(".green").prepend(span);
var span2 = "<span>小狼狗</span>";
$(span2).prependTo($(".green"));
var span3 = "<span>小奶狗1</span>";
var span4 = "<span>小奶狗2</span>";
$(".green").append(span3);
$(span4).appendTo($(".green"));
// 将已存在内容追加到指定元素中
$(".green").append($(".red"));
/* 同级追加 */
var sp1 = "<span class='pink'>女神</span>";
var sp2 = "<span class='gray'>歌手</span>";
$(".blue").before(sp1);
$(".blue").after(sp2);
7.7 ready加载事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中load事件
ready事件可以写多个
$(function(){
console.log("ready加载事件...");
});
$(document).ready(function(){
// 获取元素
console.log($("#p1"));
});
7.8 绑定事件
// 直接绑定
$("#btn4").click(function(){
console.log("按钮4被点击了...");
}).mouseout(function(){
console.log("按钮4移开了...");
});
8. $.ajax .
$.ajax({
type:"get", // 请求方式
url:"js/data.txt", // 请求地址
data:{ // 请求数据,json对象
uname:"zhangsan" // 如果没有参数,则不需要设置
},
// 请求成功时调用的函数
success:function(data){ // data是形参名,代表的是返回的数据
console.log(data); // 字符串
// 将字符串转换成json对象
var obj = JSON.parse(data);
console.log(obj);
}
});
$.get();
语法:
$.get(“请求地址”,“请求参数”,function(形参){
});
$.post();
语法:
$.post(“请求地址”,“请求参数”,function(形参){
});