Request和Response-学习笔记04【response之输出数据、response之验证码】

待我称王封你为后i 2022-10-29 12:22 160阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Request和Response-学习笔记01【Request\_原理和继承体系、Request\_获取请求数据】][Request_Response-_01_Request_Request]【day01】
> 2.  [Request和Response-学习笔记02【请求转发和request共享数据、Request\_获取ServletContext、request登录案例】][Request_Response-_02_request_Request_ServletContext_request]\[day01\]
> 3.  [Request和Response-学习笔记03【HTTP响应协议、response之重定向、response之相对路径和绝对路径】][Request_Response-_03_HTTP_response_response]【day02】
> 4.  [Request和Response-学习笔记04【response之输出数据、response之验证码】][Request_Response-_04_response_response]【day02】
> 5.  [Request和Response-学习笔记05【ServletContext对象、文件下载】][Request_Response-_05_ServletContext]【day02】

**目录**

09 response之输出数据

Response\_案例2\_输出字符数

Response\_案例3\_输出字节数

10 response之验证码

Response\_案例4\_验证码\_分析

Response\_案例4\_验证码\_代码

Response\_案例4\_验证码\_点击

--------------------

# 09 response之输出数据 #

## Response\_案例2\_输出字符数 ##

> **Response 对象 \* 案例：**  
>     1. 完成重定向  
>     2. 服务器输出字符数据到浏览器  
>         \* 步骤：  
>             1. 获取字符输出流（流向客户端浏览器）  
>             2. 输出数据  
>         \* 注意：  
>             \* 乱码问题：  
>                 1. PrintWriter pw = response.getWriter();获取的流的默认编码是ISO-8859-1  
>                 2. 设置该流的默认编码  
>                 3. 告诉浏览器响应体使用的编码  
>                 //简单的形式，设置编码，是在获取流之前设置  
>                 response.setContentType("text/html;charset=utf-8");

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![20210214130602626.png][]
> 
> ![20210214130806386.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][] response乱码

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

package cn.itcast.web.servlet;
    
    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;
    
    @WebServlet("/responseDemo4")
    public class ResponseDemo4 extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //获取流对象之前，设置流的默认编码：ISO-8859-1 设置为：GBK
            //response.setCharacterEncoding("utf-8");
            //告诉浏览器，服务器发送的消息体数据的编码。建议浏览器使用该编码解码
            //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 response</h1>");
            pw.write("你好啊啊啊 response");
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

## Response\_案例3\_输出字节数 ##

> **Response 对象 \* 案例：**  
>     1. 完成重定向  
>     2. 服务器输出字符数据到浏览器  
>     3. 服务器输出字节数据到浏览器  
>         \* 步骤：  
>             1. 获取字节输出流  
>             2. 输出数据  
>     4. 验证码
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

# 10 response之验证码 #

## Response\_案例4\_验证码\_分析 ##

> **Response 对象 \* 案例：**  
>     1. 完成重定向  
>     2. 服务器输出字符数据到浏览器  
>     3. 服务器输出字节数据到浏览器  
>     4. 验证码  
>         1. 本质：图片  
>         2. 目的：防止恶意表单注册

> ![20210214133236813.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

## Response\_案例4\_验证码\_代码 ##

> ![20210214133425512.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]
> 
> ![20210214133702903.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]
> 
> ![20210214133900517.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]
> 
> ![20210214134311774.png][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]

package cn.itcast.web.servlet;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.ServletOutputStream;
    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;
    
    @WebServlet("/checkCodeServlet")
    public class CheckCodeServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            int width = 100;
            int height = 50;
            //1.创建一对象，在内存中图片(验证码图片对象)
            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); // 从(0,0)开始填充
    
            //2.2画边框
            g.setColor(Color.BLUE);
            g.drawRect(0, 0, width - 1, height - 1);
    
            String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
            //生成随机角标
            Random ran = new Random();
            for (int i = 1; i <= 4; i++) {
                int index = ran.nextInt(str.length());
                //获取字符
                char ch = str.charAt(index);//随机字符
                //2.3写验证码
                g.drawString(ch + "", width / 5 * i, height / 2);
            }
    
            //2.4画干扰线
            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);
            }
    
            //3.将图片输出到页面展示
            ImageIO.write(image, "jpg", response.getOutputStream());
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

## Response\_案例4\_验证码\_点击 ##

> **分析：**  
>     点击超链接或者图片，需要换一张  
>     1.给超链接和图片绑定单击事件  
>     2.重新设置图片的src属性值
> 
> ![20210214135710301.png][]
> 
> ![20210214135734779.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证码图片</title>
        <script>
            window.onload = function () {
                //1.获取图片对象
                var img = document.getElementById("checkCode");
                //2.绑定单击事件
                img.onclick = function () {
                    //加时间戳
                    var date = new Date().getTime();
                    img.src = "/day15/checkCodeServlet?" + date;
                }
            }
        </script>
    </head>
    <body>
        <img id="checkCode" src="/day15/checkCodeServlet"/>
        <a id="change" href="">看不清？换一张！</a>
    </body>
    </html>

> 加油~~~

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Request_Response-_01_Request_Request]: https://blog.csdn.net/weixin_44949135/article/details/113794743
[Request_Response-_02_request_Request_ServletContext_request]: https://blog.csdn.net/weixin_44949135/article/details/113795552
[Request_Response-_03_HTTP_response_response]: https://blog.csdn.net/weixin_44949135/article/details/113803361
[Request_Response-_04_response_response]: https://blog.csdn.net/weixin_44949135/article/details/113807150
[Request_Response-_05_ServletContext]: https://blog.csdn.net/weixin_44949135/article/details/113807730
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/d21f4beae3db41dc8d502b7abccfe35b.png
[20210214130602626.png]: /images/20221024/8383383fa2fa4bd6ac87f0680866398d.png
[20210214130806386.png]: /images/20221024/e3f451210bb8427c91e69e83e118efdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/3a84313ecd3148ffa649f563305c0d12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/5f7146c310ae4a3fb8b11c6764a7ac1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/8686cb3de6c646a4855a795d8b6ed63f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/8f0a1a353e4946f5aa0b741b593e4653.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/0f8049e9d96a4c12a09d755f365b8642.png
[20210214133236813.png]: /images/20221024/cc4e7dee3c0a4a7b9f04e6cf50dac2cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/d851d27aad7f490eb5d8d1fbca09db01.png
[20210214133425512.png]: /images/20221024/a3a6b173ecb14c3da4fd514b824a29f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/3cb14309005b495e9c33ae3afd8bbcdb.png
[20210214133702903.png]: /images/20221024/97b4ffd332f74a009e0e3b8b41b49269.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/9b004646c32e4435a11c99a717ed0cfd.png
[20210214133900517.png]: /images/20221024/4c5393f78bc84c00ba3d36fafbcc7cba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/4e3e4d42fdb548e0be9514aed315a723.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/3ee088c0fb4c4f0c9e09fe9ff345783d.png
[20210214134311774.png]: /images/20221024/e9637aa4a09b495e8c2b256fd45d6e25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/23a828af769042fea59b27e99ce5300d.png
[20210214135710301.png]: /images/20221024/6df2ccb801a64d0abe609ec7501e81d2.png
[20210214135734779.png]: /images/20221024/05b694788595407db0d26057d527b84f.png