Java Web开发——自动刷新展示验证码图片

在浏览器上实现自动刷新的效果一般有两种思路：（1）前端实现，通过javascript进行操作；（2）后端实现，通过设置HTTP响应消息头的内容，告知浏览器自动进行刷新。这里我们介绍后一种实现策略。

假设我们现在希望在浏览器上每隔3秒钟自动从后台获取一张新的八位随机验证码图片并进行展示，则代码如下：

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
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;

public class RefreshServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 生成八位随机验证码图片
        // 1.1 新建一张RGB图片
        BufferedImage img = new BufferedImage(500, 200, BufferedImage.TYPE_INT_RGB);
        Graphics2D graphics = img.createGraphics();
        // 1.2 将背景填充为白色
        graphics.setColor(Color.WHITE);
        graphics.fillRect(0, 0, 500, 200);
        // 1.3 在图片中添加验证码字符串
        graphics.setColor(Color.RED);
        graphics.setFont(new Font("Times", Font.BOLD, 108));
        graphics.drawString(generateRandomString(), 50, 150);

        // 2. 设置HTTP响应消息头
        // 2.1 告知浏览器按照PNG图片的内容格式进行处理
        resp.setContentType("image/png");
        // 2.2 告知浏览器每隔3秒刷新一次
        resp.setHeader("Refresh", "3");
        // 2.3 告知浏览器不缓存
        resp.setHeader("Cache-Control", "no-cache");
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Expires", "-1");

        // 3. 将图片写入HTTP响应输出流中，由服务器发送至浏览器
        ImageIO.write(img, "png", resp.getOutputStream());
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    /* 生成八位随机数字串 */
    private String generateRandomString() {
        Random random = new Random();
        String number = String.valueOf(random.nextInt(99999999));
        // 若随机生成的数字不足8位，则要在前面补零，使之成为8位字符串
        StringBuilder sb = new StringBuilder();
        for (int i = 1; i <= 8 - number.length(); ++i) {
            sb.append('0');
        }
        number = sb.toString() + number;
        return number;
    }
}

这段程序的几个关键点是：

1. 通过设置HTTP响应消息头

resp.setHeader("Refresh", "3");

告知浏览器每隔3秒钟进行一次刷新。

2. 通过设置HTTP Content-Type为image/png告知浏览器以PNG图片的方式读取送来的响应报文。

resp.setContentType("image/png");

3. 如下几行程序设置了不进行缓存。

resp.setHeader("Cache-Control", "no-cache");
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Expires", "-1");

4. 我们通过BufferedImage生成图片。