Response验证码和验证码点击切换
Response验证码
验证码：
1.本质：就是一张图片
2.目的：防止恶意表单注册
分析：>创建一对象，在内存中图片(验证码图片对象)
>美化图片
>将图片输出到页面展示
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int width = 100;
int height = 50;
//创建一对象，在内存中图片(验证码图片对象)
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//美化图片
//1.填充背景色
Graphics g = image.getGraphics();
g.setColor(Color.blue);
g.fillRect(0,0,width,height);
//2.画边框
g.setColor(Color.CYAN);
g.drawRect(0,0,width-1,height-1);
//写验证码
//页面的页码数字
String str = "ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
//生成随机角标
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);
}
//画干扰线
g.setColor(Color.green);
//随机生成坐标点
for (int i = 1; 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);
}
//将图片输出到页面展示
ImageIO.write(image,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
刷新页面会进行变化
Response验证码点击切换
创建一个html页面
编写img绑定事件：
如果不获取事件戳，会加载缓存中的图片从而不进行变换，加一个用不重复的值欺骗服务器说图片发生了变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
//获取图片对象
var img = document.getElementById("checkCode");
//绑定单击事件
img.onclick = function () {
//加时间戳
var date = new Date().getTime();
img.src = "/checkCodeServlet?"+date;
}
}
</script>
</head>
<body>
<img id="checkCode" src="/checkCodeServlet"/>
</body>
</html>
点击图片就可以进行切换
