JSP验证码及刷新

最新推荐文章于 2019-11-02 09:48:04 发布

原创最新推荐文章于 2019-11-02 09:48:04 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSP #JavaScript #Cache #浏览器 #ViewUI

本文介绍了一个使用Java生成验证码并实现验证码刷新功能的方法。通过在服务器端生成包含随机字符的图片，并利用JavaScript实现验证码的刷新功能，确保了每次请求都能得到不同的验证码。文章详细展示了如何设置响应头来避免浏览器缓存，以及如何在图片中绘制随机线条和字符。

image.jsp

<%@   page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="UTF-8"%>
<%!Color getRandColor(int fc, int bc) {//给定范围获得随机颜色 
		Random random = new Random();
		if (fc > 255)
			fc = 255;
		if (bc > 255)
			bc = 255;
		int r = fc + random.nextInt(bc - fc);
		int g = fc + random.nextInt(bc - fc);
		int b = fc + random.nextInt(bc - fc);
		return new Color(r, g, b);
	}%>
<%
	//设置页面不缓存 
	out.clear();
	out.clearBuffer();
	response.getOutputStream().flush();
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);

	//   在内存中创建图象 
	int width = 60, height = 20;
	BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

	//   获取图形上下文 
	Graphics g = image.getGraphics();

	//生成随机类 
	Random random = new Random();

	//   设定背景色 
	g.setColor(getRandColor(200, 250));
	g.fillRect(0, 0, width, height);

	//设定字体 
	g.setFont(new Font("Times   New   Roman", Font.PLAIN, 18));

	//画边框 
	//g.setColor(new   Color()); 
	//g.drawRect(0,0,width-1,height-1); 

	//   随机产生155条干扰线，使图象中的认证码不易被其它程序探测到 
	g.setColor(getRandColor(160, 200));
	for (int i = 0; i < 155; i++) {
		int x = random.nextInt(width);
		int y = random.nextInt(height);
		int xl = random.nextInt(12);
		int yl = random.nextInt(12);
		g.drawLine(x, y, x + xl, y + yl);
	}

	//   取随机产生的认证码(4位数字) 
	String sRand = "";
	for (int i = 0; i < 4; i++) {
		String rand = String.valueOf(random.nextInt(10));
		sRand += rand;
		//   将认证码显示到图象中 
		g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
		//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成 
		g.drawString(rand, 13 * i + 6, 16);
	}

	//   将认证码存入SESSION 
	session.setAttribute("rand", sRand);

	//   图象生效 
	g.dispose();

	//   输出图象到页面 
	ImageIO.write(image, "JPEG", response.getOutputStream());
	out.clear();
	out = pageContext.pushBody();
%>

实现刷新的 JavaScript

<script type="text/javascript">
      function reloadImage(url){ 
	document.myform.randImg.src = url; 
      } 
</script>

页面中调用验证码部分

<img name="randImg" src="<%=path%>/images2/image.jsp" width="109" height="40" />
						
<a a href="#" onclick="reloadImage('<%=path%>/images2/image.jsp?rnd'+Math.random());" class="login-text03">看不清楚，换张图片</a>

最后那个参数不是用来处理的,是用来避免浏览器缓存的，对浏览器来说，参数不一样代表不一样的请求，就不会在本地缓存取数据了,否则无法实现验证码的刷新。