快速入门
前面已经简单介绍过HTTP中的请求消息request,它是客户端发送给服务器端的数据,而response是响应消息,是服务器端发送给客户端的数据。
格式
包括四部分:
- 响应行
- 响应头
- 响应空行
- 响应体
一个简单的例子
响应行 HTTP/1.1 200 OK
响应头 Content-Type: text/html;charset=UTF-8
Content-Length: 101
Date: Wed, 06 Jun 2018 07:08:42 GMT
响应空行
响应体 <html>
<head>
<title>$Title$</title>
</head>
<body>
hello , response
</body>
</html>
响应行
组成部分: 协议/版本 响应状态码 状态码描述
HTTP/1.1 200 OK
响应状态码:服务器告诉客户端浏览器本次请求和响应的一个状态。
1. 状态码都是3位数字
2. 分类:
1. 1xx:服务器接收客户端消息,但没有接受完成,等待一段时间后,发送1xx多状态码
2. 2xx:成功。代表:200
3. 3xx:重定向。代表:302(重定向),304(访问缓存)
4. 4xx:客户端错误。
代表:
* 404(请求路径没有对应的资源)
* 405:请求方式没有对应的doGet或者doPost方法
5. 5xx:服务器端错误。代表:500(服务器内部出现异常)
重定向就是通过各种方法将各种网络请求重新定个方向转到其它位置,是资源跳转的一种方式。客户端请求服务器请求A资源,A资源响应完成,告诉客户端该任务自己无法完成,需要B资源进行完成,附带状态码302,客户端收到后,自动拿着A给的B路径自动去请求B资源,这个过程就是重定向
浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。
响应头
格式: 头名称: 值
常见的响应头:
- Content-Type:服务器告诉客户端本次响应体数据格式以及编码格式
- Content-disposition:服务器告诉客户端以什么格式打开响应体数据
- in-line:默认值,在当前页面内打开
- attachment;filename=xxx:以附件形式打开响应体。文件下载
响应体
传输的数据
response对象
功能
设置响应消息
1. 设置响应行
格式:HTTP/1.1 200 ok
设置状态码:setStatus(int sc)
2.设置响应头
setHeader(String name, String value)
3.设置响应体
使用步骤:
1. 获取输出流
* 字符输出流:PrintWriter getWriter()
* 字节输出流:ServletOutputStream getOutputStream()
2. 使用输出流,将数据输出到客户端浏览器
案例1-完成重定向
需要完成的任务就是前面介绍的:
package cn.lwl.web.response;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author liwenlong
* @data 2020/3/22
*/
@WebServlet("/responseDemo1")
public class ResponseDemo1 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Demo1被访问了");
//动态获取虚拟目录
String contextPath = request.getContextPath();
//访问本资源时,自动跳转到responseDemo2中
/*重定向方式1
//1.设置状态码为302
response.setStatus(302);
//2.设置响应头
response.setHeader("location",contextPath+"/responseDemo2");
*/
//重定向方式2
response.sendRedirect(contextPath+"/responseDemo2");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
package cn.lwl.web.response;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author liwenlong
* @data 2020/3/22
*/
@WebServlet("/responseDemo2")
public class ResponseDemo2 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Demo2被访问了");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
在浏览器中输入地址:http://localhost/lwl/responseDemo1,在控制台会输出:
重定向(redirect)与请求转发(forward)的区别
- 转发是服务器行为,重定向是客户端行为。
- 转发地址栏路径不变,重定向的地址栏发生改变。
- 转发只能访问当前服务器下的资源,重定向可以访问其他站点(服务器)的资源。
- 转发是一次请求,可以使用request对象来共享数据。重定向是两次请求,不能使用request对象来共享数据。
- 转发的速度比重定向
路径的写法
路径的分类
- 相对路径: 通过相对路径不可以确定唯一资源,以.开头 找到当前资源和目标资源的相对位置关系
- ./代表当前目录
- ../代表后退一级目录
- 绝对路径: 以“ / ”开头, 例如:/lwl/responseDemo1
使用绝对路径还是相对路径:
- 给客户端用的(由客户端发出):需要加虚拟目录(项目的访问路径)
- 给服务器使用(由服务器发出):不需要加虚拟目录
案例2-服务器输出字符数据到浏览器
步骤:
- 获取字符输出流
- 输出数据
注意:需要告诉浏览器自己的编码方式,否则会出现乱码的问题。
response.setContentType("text/html;charset=utf-8");
代码实现:
package cn.lwl.web.response;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @author liwenlong
* @data 2020/3/22
*/
@WebServlet("/responseDemo3")
public class ResponseDemo3 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
response.setContentType("text/html;charset=utf-8");
//获取字符输出流
PrintWriter pw = response.getWriter();
//输出数据
pw.write("你好 hello");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
案例3-服务器输出字节数据到浏览器
步骤:
- 获取字节输出流
- 输出数据
实例:
package cn.lwl.web.response;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @author liwenlong
* @data 2020/3/22
*/
@WebServlet("/responseDemo4")
public class ResponseDemo4 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
response.setContentType("text/html;charset=utf-8");
//获取字节输出流
PrintWriter pw = response.getOutputStream();
//输出数据
pw.write("你好 hello".getBytes());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
案例4-验证码
1. 本质:图片
2. 目的:防止恶意表单注册
实现代码:
package cn.lwl.web.response;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
/**
* @author liwenlong
* @data 2020/3/22
*/
@WebServlet("/checkCodeServlet")
public class checkCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 创建一个对象,在内存中画图像(验证码图片对象)
int width = 100;
int height = 50;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//2. 美化图片
//填充背景色
Graphics g = image.getGraphics(); //画笔对象
g.setColor(Color.lightGray); //画笔颜色
g.fillRect(0, 0, width, height); //填充颜色
//画边框
g.setColor(Color.blue);
g.drawRect(0, 0, width - 1, height - 1);
//写验证码
String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
//生成随机数
Random random = new Random();
for (int n = 1; n < 5; n++) {
int i = random.nextInt(str.length());
char c = str.charAt(i);
g.drawString(c + "", width / 5 * n, 3 * height / 5);
}
//画干扰线
g.setColor(Color.GREEN);
for (int n = 1; n < 7; n++) {
//随机生成四个坐标点
int randomWidth1 = random.nextInt(width);
int randomWidth2 = random.nextInt(width);
int randomHeight1 = random.nextInt(height);
int randomHeight2 = random.nextInt(height);
g.drawLine(randomWidth1,randomHeight1,randomWidth2,randomHeight2);
}
//3. 将图片输出到页面展示
ImageIO.write(image, "jpg", response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
效果:好丑哦
优化
需求:在浏览器上点击一个验证码图片可以换一个新的验证码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="/learn/requestDemo5" method="post">
<input type="text" placeholder="请输入用户名" name="username"><br>
<input type="text" placeholder="请输入密码" name="password"><br>
<input type="text" placeholder="请输入验证码" name="checkcode">
<img id="checkcode" src="/lwl/checkCodeServlet" alt=""><br>
<input type="submit" value="注册">
</form>
<script >
//给图片绑定单击事件
window.onload = function () {
//获取图片
var img = document.getElementById("checkcode");
//绑定单击事件
img.onclick = function () {
//加时间戳,防止读缓存而不获取新的验证码
var date = new Date().getTime();
img.src = "/lwl/checkCodeServlet?"+ date;
}
}
</script>
</body>
</html>