jsp页面验证码源代码在java后台中生成验证码的ImageIO传到前端页面显示,同时把验证码的v alue值传入session 中用于与用户输入的验证码进行匹配,在用户验证中使用ajax技术,在不刷新页面的同时进行验证码验证。
程序结构图:VerifyCodeUtils程序主要内容为通过Java生成验证码的图片,以及验证码的value值,程序如下:package utils;import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.util.HashMap;import java.util.Map;import java.util.Random;publicclass VerifyCodeUtils {privatestatic BufferedImage image = null;privatestatic Random random = new Random();//在自己定义的一些数中,生成4位随机数publicstatic String getVerifyCode() {String str = "";char[] code = newchar[]{'A','B','C','D','E','F','G','H','I ','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i',' j','k','m','n','p','q','r','s','t','u','v','w','x','y','z','2','3','4','5','6','7','8','9'};Random random = new Random();for(int i = 0; i <4; i++) {str += String.valueOf(code[random.nextInt(code.length)]);}return str;}//生成验证码图像publicstatic Map getVerifyCode(int width, int heigth) {VerifyCodeUtils.image = new BufferedImage(width, heigth, Bu fferedImage.TYPE_INT_RGB);Graphics2D g = (Graphics2D) VerifyCodeUtils.image.g etGraphics();String verifyCode = getVerifyCode();Map map = new HashMap();map.put("verifyCode", verifyCode);//将图像填充为白色g.setColor(Color.WHITE);g.fillRect(0, 0, width, heigth);//设置字体g.setFont(new Font("宋体", Font.BOLD + Font.ITALIC, heigth-10));//画边框。
g.setColor(VerifyCodeUtils.getColor());g.drawRect(0, 0, width, heigth);//随机产生干扰线,使图象中的认证码不易被其它程序探测到g.setColor(Color.BLACK);for (int i = 0; i <50; i++) {int x = VerifyCodeUtils.random.nextInt(width);int y = VerifyCodeUtils.random.nextInt(heigth);int xl = VerifyCodeUtils.random.nextInt(5);int yl = VerifyCodeUtils.random.nextInt(5);g.setColor(getColor());g.drawLine(x, y, x + xl, y + yl);}char c;for(int i = 0; i <4; i++) {c = verifyCode.charAt(i);g.drawString(c+"", i*20+40, heigth-10);}map.put("image", VerifyCodeUtils.image);return map;}//随机化颜色publicstatic Color getColor() {int red = 0, green = 0, blue = 0;// 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
red = VerifyCodeUtils.random.nextInt(255);green = VerifyCodeUtils.random.nextInt(255);blue = VerifyCodeUtils.random.nextInt(255);returnnew Color(red,green,blue);}}VerifyCodeServlet把VerifyCodeUtils生成的验证码图片通过io流传入前端显示,代码如下:package Servlet;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Map;import javax.imageio.ImageIO;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 utils.VerifyCodeUtils;/*** Servlet implementation class VerifyCodeServlet*/@WebServlet("/")publicclass VerifyCodeServlet extends HttpServlet { privatestaticfinallong serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public VerifyCodeServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, Ht tpServletResponse response)*/protectedvoid doGet(HttpServletRequest request, HttpServlet Response response) throws ServletException, IOException {response.setHeader("Expires", "-1");response.setHeader("Cache-Control", "no-cache");response.setHeader("Pragma", "no-cache");response.setHeader("Content-type", "image/jpeg");Map map = VerifyCodeUtils.getVerifyCode(223, 50);//把verifyCode的数值传入session中用于验证用户输入的验证码是否正确request.getSession().setAttribute("verifyCode", map.get(" verifyCode").toString().toUpperCase());//通过IO流传入前端显示ImageIO.write((BufferedImage) map.get("image"), "jpg", res ponse.getOutputStream());}/*** @see HttpServlet#doPost(HttpServletRequest request, H ttpServletResponse response)*/protectedvoid doPost(HttpServletRequest request, HttpServle tResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}页面jsp代码如下:<%@ pagelanguage="java"contentType="text/html; charset=utf -8"pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ /EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset =utf-8"><base id="base"href="${pageContext.request.contextPath}"><title>验证码测试界面</title><style>div{float:left;}input{width:223px;height:31px;margin-right:20px;}img{width:223px;height:35px;}p{margin:10px;}</style></head><body><script src="${pageContext.request.contextPath}/JS/demo.js "></script><div><input type="text"name="verifyCode"id="verifyCode"placehol der="验证码"onblur="check_verifyCode()"></div><div><img src="${pageContext.request.contextPath}/servlet/Verif yCodeServlet"style="width: 100%"onclick="this.src=this.sr c + '?' + Math.random()"/></div><div><p id = "tip"></p></div></body></html>js实现ajax代码如下:/****/function check_verifyCode(){var XMLHttpReqVerifyCode = null;var url =document.getElementById("base").href +"/servlet/Te stVerifyCodeServlet";var verifyCode = document.getElementById("verifyCode").valu e;var tip = document.getElementById("tip");var errorTip = "输入的验证码不正确";var successTip = "输入的验证码正确";tip.innerHTML=errorTip;if(verifyCode==null || verifyCode==""){tip.innerHTML=errorTip;tip.style.color = "red";}else{if(window.XMLHttpRequest) {//DOM2浏览器XMLHttpReqVerifyCode = new XMLHttpRequest();} elseif(window.ActiveXObject) {//使用json语法创建数组var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', ' MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP '];for(var i = 0; i <MSXML.length; i++) {try{XMLHttpReqVerifyCode = new ActiveXObject(MSXML[i]);} catch(e) {}}}XMLHttpReqVerifyCode.open("POST",url, true);XMLHttpReqVerifyCode.setRequestHeader("Content-Type", "ap plication/x-www-form-urlencoded");XMLHttpReqVerifyCode.onreadystatechange = function testVeri fyCodeServletResponse(){if(XMLHttpReqVerifyCode.readyState == 4&& (XMLHttpReqVerif yCode.status == 200 || XMLHttpReqVerifyCode.status == 304)) {if(XMLHttpReqVerifyCode.responseText == 1){tip.innerHTML = successTip;tip.style.color = "green";}elseif(XMLHttpReqVerifyCode.responseText == 0){tip.innerHTML = errorTip;tip.style.color = "red";}}}XMLHttpReqVerifyCode.send("code="+verifyCode);}//ajax前后台交互function createXMLHttpRequest(XMLHttpReq) {if(window.XMLHttpRequest) {//DOM2浏览器XMLHttpReq = new XMLHttpRequest();} elseif(window.ActiveXObject) {//使用json语法创建数组var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', ' MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP '];for(var i = 0; i <MSXML.length; i++) {try{XMLHttpReq = new ActiveXObject(MSXML[i]);} catch(e) {}}return XMLHttpReq;}}}TestVerifyCodeServlet与js交互代码为:package Servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class TestVerifyCodeServlet */@WebServlet("/TestVerifyCodeServlet")publicclass TestVerifyCodeServlet extends HttpServlet { privatestaticfinallong serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public TestVerifyCodeServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, Ht tpServletResponse response)*/protectedvoid doGet(HttpServletRequest request, HttpServlet Response response) throws ServletException, IOException {// TODO Auto-generated method stubString codeTrue = (String) request.getSession().get Attribute("verifyCode");String codeInput = request.getParameter("code");System.out.println(codeInput);response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter();//打印流if(codeInput!=null){if(codeInput.toUpperCase().equals(codeTrue)){out.println("1");}else{out.println("0");}}}/*** @see HttpServlet#doPost(HttpServletRequest request, H ttpServletResponse response)*/protectedvoid doPost(HttpServletRequest request, HttpServle tResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}xml代码为<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="/2001/XMLSchema-insta nce"xmlns="/xml/ns/javaee"xsi:schemaLo cation="/xml/ns/javaee http://java.sun. com/xml/ns/javaee/web-app_2_5.xsd"version="2.5"><display-name></display-name><welcome-file-list><welcome-file>demo.jsp</welcome-file></welcome-file-list><servlet><servlet-name>VerifyCodeServlet</servlet-name><servlet-class>Servlet.VerifyCodeServlet</servlet-class></servlet><servlet-mapping><servlet-name>VerifyCodeServlet</servlet-name><url-pattern>/servlet/VerifyCodeServlet</url-pattern></servlet-mapping><servlet><servlet-name>TestVerifyCodeServlet</servlet-name><servlet-class>Servlet.TestVerifyCodeServlet</servlet-cla ss></servlet><servlet-mapping><servlet-name>TestVerifyCodeServlet</servlet-name><url-pattern>/servlet/TestVerifyCodeServlet</url-pattern></servlet-mapping></web-app>结果显示:。