JavaWeb——HTTP响应协议及Response对象使用方法一点通及案例实战（重定向、输出字符/字节数据到浏览器、验证码实现）

Winter_world

发布于 2020-09-25 11:02:51

8650

发布于 2020-09-25 11:02:51

1、HTTP响应协议概述

HTTP协议，请求消息是客户端发送给服务器的数据，响应消息是服务器端发送给客户端的数据，其数据格式为：

请求消息	响应消息
1、请求行 2、请求头 3、请求空行 4、请求体	1、响应行 2、响应头 3、响应空行 4、响应体

1）响应行：HTTP/1.1 200 OK

组成：协议/版本响应状态码状态码描述；
响应状态码：服务器告诉客户端浏览器本次请求和响应的状态，3位数字；

2）响应头：Content-Type: text/html;charset=utf-8

组成：头名称：头
常见的响应头： Content-Type：服务器告知客户端本次响应体数据格式及编码格式； Content-disposition：服务器告知客户端打开响应体数据的格式，默认值in-line，在当前页面内打开，attachment，以附件形式打开响应体（文件下载）；

3）响应体：真实传输的数据。

（关于HTTP协议的详细介绍，可以看下另一篇博文）

2、Response对象

Response对象是用来设置响应消息的，包括响应行、响应头、响应体：

1）设置响应行：

格式：HTTP/1.1 200 OK
设置状态码：setStatus(int sc)

2）设置响应头：setHeader(String name, String value)

3）设置响应体：

获取输出流字符输出流：PrintWriter getWriter() 字节输出流：ServletOutputStream getOutputStream()
使用输出流，将数据输出到客户端浏览器

3、Response案例实战

3.1 重定向

重定向也是资源跳转的方式，应用非常广泛

【代码实现】实际应用中主要使用下面一种简单的重定向代码实现方式

//访问responseDemo1，自动跳转至responseDemo2
 //1、设置状态码为302
 response.setStatus(302);
//2、设置响应头location
 response.setHeader("location","/response/responseDemo2");

//有一种简单的重定向方法替代以上：
response.sendRedirect("/response/responseDemo2");

【特点】此处直接对比下之前学过的转发特点

转发（forward）	重定向(redirect)
1、转发地址栏路径不变 2、转发只能访问当前服务器下的资源 3、转发是一次请求，意味着可以使用request对象来共享数据	1、地址栏发生变化 2、可以访问其他站点（服务器）的资源 3、重定向是两次请求，不能使用request对象共享数据

【路径写法】路径分为两类：

相对路径：通过相对路径不可以确定唯一资源，不以/ 开头，以. 开头路径，如 ./index.html 规则：找到当前资源和目标资源之间的相对位置关系
绝对路径：通过绝对路径可以确定唯一资源，如下，以/开头的路径 http://localhost:8080/response/responseDemo2 /response/responseDemo2

1、相对路径

如在web目录下新建一个htmls目录，htmls目录中新建一个页面location1.html，要点击location1.html中的超链接访问responseDemo2,，那么：

当前资源：http://localhost:8080/response/htmls/location1.html
目标资源：http://localhost:8080/response/responseDemo2
那么location1.html页面的a标签的href相对路径可以写为：../responseDemo2

注意：./代表当前目录；../代表后退一级目录，后期我们使用jsp页面，不推荐使用相对路径，而是绝对路径，因为相对路径总要确定当前资源和目标资源的关系，比较麻烦。

2、绝对路径

绝对路径定义的规则是要判断定义的路径是给谁用的？判断请求将来从哪发出

给客户端浏览器：需要加虚拟目录（项目的访问路径，如<a>标签、<form>、重定向等）
给服务器：不需要加虚拟目录（如转发跳转时）

注意：实际项目开发中，虚拟目录不要写死（因为虚拟目录一旦改动，程序中修改的地方会很多），而是采用动态获取虚拟目录的方法：

        String contextPath = request.getContextPath();
        response.sendRedirect(contextPath+"/responseDemo2");

3.2 服务器输出字符数据到浏览器

实现步骤：

获取字符输出流
输出数据

注意：乱码的问题，产生的原因就是因为编解码的不一致，需要设置输出流的默认编码，告诉浏览器响应体使用的编码，设置方法：response.setContentType("text/html;charset=utf-8");

@WebServlet("/responseDemo3")
public class ResponseDemo3 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取流对象前设置流的默认编码：ISO-8859-1 ，设置为utf-8
//        response.setCharacterEncoding("utf-8");
        //告诉浏览器，服务器发送的消息体数据编码，建议浏览器使用该编码解码(可以使用IE浏览器测试)，上一行代码可以注释了
//        response.setHeader("content-type","text/html;charset=utf-8");
        //简单形式来设置编码：
        response.setContentType("text/html;charset=utf-8");
        //1、获取字符输出流
        PrintWriter pw = response.getWriter();
        //2、输出数据
//        pw.write("<h1>hello world</h1>");
        pw.write("你好hello");  //乱码：??hello

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

3.3 服务器输出字节数据到浏览器

实现步骤：

获取字节输出流
输出数据

@WebServlet("/responseDemo4")
public class ResponseDemo4 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //告诉浏览器，服务器发送的消息体数据编码，建议浏览器使用该编码解码(可以使用IE浏览器测试)，上一行代码可以注释了
        response.setContentType("text/html;charset=utf-8");
        //1、获取字节输出流
        ServletOutputStream sos = response.getOutputStream();
        //2、输出数据
        sos.write("你好hello".getBytes("utf-8"));
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

3.4 验证码

网页登录验证码，本质上就是一张图片，加这个验证码的目的就是为了防止恶意的表单注册。以下验证码案例比较丑陋，简单了解即可，实际开发中可以找一些开源代码直接应用。

@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、美化图片
        //2.1 填充背景色
        Graphics g = image.getGraphics();//画笔对象
        g.setColor(Color.PINK); //设置画笔颜色
        g.fillRect(0,0,width,height); //填充
        //2.2 画边框
        g.setColor(Color.BLUE);
        g.drawRect(0,0,width-1,height-1);
        //2.3 写验证码
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        //生成随机角标
        Random ran = new Random();

        for (int i = 1; i <= 4; i++) {
            int index = ran.nextInt(str.length());
            //获取随机字符
            char ch = str.charAt(index);
            g.drawString(ch+"",width/5*i,height/2);
        }
        //3、画干扰线
        g.setColor(Color.GREEN);
        //随机生成坐标点
        for (int i = 0; i < 10; i++) {
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);
            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }
        //4、将图片输出到页面展示
        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</title>
    <script>
        //需求：点击超链接或图片，换一张
        //1、给超链接和图片绑定单击事件
        //2、重新设置图片的src属性值
        window.onload = function () {
            //获取图片对象
            var image = document.getElementById("checkCode");
            //绑定单击事件
            image.onclick =  function () {
                //加时间戳，避免不刷新
                var date = new Date().getTime();
                image.src = "/response/checkCodeServlet?"+date;
            }

            //获取超链接对象
            var change = document.getElementById("change");
            //绑定单击事件
            change.onclick =  function () {
                //加时间戳，避免不刷新
                var date = new Date().getTime();
                image.src = "/response/checkCodeServlet?"+date;
            }

        }

    </script>
</head>
<body>
    <img id="checkCode" src="/response/checkCodeServlet"/>
    <a id="change" href=""> 看不清，换一张</a>
</body>
</html>