Response实现验证码功能

Servlet代码：

    public static final int WIDTH=120;
    public static final int HEIGHT=35;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        BufferedImage image=new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        Graphics  g=image.getGraphics();
        
        //1 设置背景颜色
        setBackGround(g);
        
        //2 设置边框
        setBorder(g);
        
        //3 画出干扰线
        drawRandomLine(g);
        
        //4 写随机数
        drawRandomNum((Graphics2D)g);
        
        //5 图形写给浏览器
        response.setContentType("image/jpeg");
        response.setHeader("Expires", "-1");  
        response.setHeader("Cache-Control", "no-cache");  
        response.setHeader("Pragma", "no-cache");
        ImageIO.write(image, "jpg", response.getOutputStream());
    }


    private void drawRandomNum(Graphics2D g) {
        g.setColor(Color.RED);
        g.setFont(new Font("宋体",Font.BOLD,20));
        String base = "\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6\u8fd9\u4e0a\u7740\u4e2a\u5730\u5230\u5927\u91cc\u8bf4\u5c31\u53bb\u5b50\u5f97\u4e5f\u548c\u90a3\u8981\u4e0b\u770b\u5929\u65f6\u8fc7\u51fa\u5c0f\u4e48\u8d77\u4f60\u90fd\u628a\u597d\u8fd8\u591a\u6ca1\u4e3a";
        int x=5;    
        for(int i=0;i<4;i++){
            int degree=new Random().nextInt()%30;
            String ch=base.charAt(new Random().nextInt(base.length()))+"";
            g.rotate(degree*Math.PI/180, x, 20);
            g.drawString(ch, x, 20);
            g.rotate(-degree*Math.PI/180, x, 20);
            x+=30;
        }
    }


    private void drawRandomLine(Graphics g) {
        g.setColor(Color.GREEN);
        for(int i=0;i<5;i++){
            int x1=new Random().nextInt(WIDTH);
            int y1=new Random().nextInt(HEIGHT);
    
            int x2=new Random().nextInt(WIDTH);
            int y2=new Random().nextInt(HEIGHT);
            g.drawLine(x1, y1, x2, y2);
        }
        
    }


    private void setBorder(Graphics g) {
        g.setColor(Color.BLUE);
        g.drawRect(1, 1, WIDTH-2, HEIGHT-2);
    }


    private void setBackGround(Graphics g) {
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, WIDTH, HEIGHT);
    }

jsp代码：

<html>
  <head>
    <script>
        function changeImage(img){
            img.src=img.src+"?"+new Date().getTime(); //改变地址
        }
    </script>
  </head>
  
  <body>
    <form>
        用户名：<input type="text" name="username"> <br/>
        密码：<input type="text" name="password">  <br/>
        认证码：<input type="text" name="checkcode">
        <img src="/day07/servlet/ResponseDemo4" onclick="changeImage(this)"  alt="换一张" style="cursor:hand">  <br/>
        <input type="submit" value="注册">
    </form>
  </body>
</html>

onclick调用的方法能不能改成下边的这行：

onclick="this.src=this.src"

实践是错误的。第一次你请求的地址是

http://localhost:8080/day07/servlet/ResponseDemo4

因为你再次请求得地址和上边是一样的，浏览器里边有缓存，所有页面并没有刷新，没有得到我们想要的效果。

因此我们使用下边的方法

 img.src=img.src+"?"+new Date().getTime(); //改变地址

我们的传送方式是 get()方法，因此我们后边可以传送一个没有用的数据，只是为了改变这个请求的网址。就会得到下边的地址：

http://localhost:8080/day07/servlet/ResponseDemo4？1444884854019

所以这次就会得到我们想要的效果。

秒客网

Response实现验证码功能

相关文章