1. 思路:页面上的验证码图片是servlet,采用jquery实现异步校验信息
2. 所用到的文件VerifyCodeServlet.java --用于生成图片的servlet
ResultServlet.java --用于校验验证码正确性的servlet
verifyCode.js --校验的js文件
jquery.js --jquery包里的源文件
verifyCode.jsp --页面
3. 代码VerifyCodeServlet.java
Java代码
import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class VerifyCodeServlet extends HttpServlet {// 验证码图片的宽度。private int width = 60;// 验证码图片的高度。private int height = 20;// 验证码字符个数private int codeCount = 4;private int x = 0;// 字体高度private int fontHeight;private int codeY;char[] codeSequence = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J","K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W","X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" };/** * 初始化验证图片属性 */public void init（） throws ServletException {// 从web.xml中获取初始信息// 宽度String strWidth = this.getInitParameter（"width"）;// 高度String strHeight = this.getInitParameter（"height"）;// 字符个数String strCodeCount = this.getInitParameter（"codeCount"）;// 将配置的信息转换成数值try {if （strWidth ！= null && strWidth.length（） ！= 0） {width = Integer.parseInt（strWidth）;}if （strHeight ！= null && strHeight.length（） ！= 0） {height = Integer.parseInt（strHeight）;}if （strCodeCount ！= null && strCodeCount.length（） ！= 0） {codeCount = Integer.parseInt（strCodeCount）;}} catch （NumberFormatException e） {}x = width / （codeCount + 1）;fontHeight = height - 2;codeY = height - 4;}protected void service（HttpServletRequest req, HttpServletResponse resp）throws ServletException, java.io.IOException {// 定义图像bufferBufferedImage buffImg = new BufferedImage（width, height,BufferedImage.TYPE_INT_RGB）;Graphics2D g = buffImg.createGraphics（）;// 创建一个随机数生成器类Random random = new Random（）;// 将图像填充为白色g.setColor（Color.WHITE）;g.fillRect（0, 0, width, height）;// 创建字体，字体的大小应该根据图片的高度来定。Font font = new Font（"Fixedsys", Font.PLAIN, fontHeight）;// 设置字体。g.setFont（font）;// 画边框。g.setColor（Color.BLACK）;g.drawRect（0, 0, width - 1, height - 1）;// 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。g.setColor（Color.BLACK）;for （int i = 0; i < 160; 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）;}// randomCode用于保存随机产生的验证码，以便用户登录后进行验证。StringBuffer randomCode = new StringBuffer（）;int red = 0, green = 0, blue = 0;// 随机产生codeCount数字的验证码。for （int i = 0; i < codeCount; i++） {// 得到随机产生的验证码数字。String strRand = String.valueOf（codeSequence[random.nextInt（36）]）;// 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。red = random.nextInt（255）;green = random.nextInt（255）;blue = random.nextInt（255）;// 用随机产生的颜色将验证码绘制到图像中。g.setColor（new Color（red, green, blue））;g.drawString（strRand, （i + 1） * x, codeY）;// 将产生的四个随机数组合在一起。randomCode.append（strRand）;}// 将四位数字的验证码保存到Session中。HttpSession session = req.getSession（）;session.setAttribute（"validateCode", randomCode.toString（））;// 禁止图像缓存。resp.setHeader（"Pragma", "no-cache"）;resp.setHeader（"Cache-Control", "no-cache"）;resp.setDateHeader（"Expires", 0）;resp.setContentType（"image/jpeg"）;// 将图像输出到Servlet输出流中。ServletOutputStream sos = resp.getOutputStream（）;ImageIO.write（buffImg, "jpeg", sos）;sos.close（）;}} import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class VerifyCodeServlet extends HttpServlet { // 验证码图片的宽度。 private int width = 60; // 验证码图片的高度。 private int height = 20; // 验证码字符个数 private int codeCount = 4; private int x = 0; // 字体高度 private int fontHeight; private int codeY; char[] codeSequence = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J","K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W","X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" }; /** * 初始化验证图片属性 */ public void init（） throws ServletException { // 从web.xml中获取初始信息 // 宽度 String strWidth = this.getInitParameter（"width"）; // 高度 String strHeight = this.getInitParameter（"height"）; // 字符个数 String strCodeCount = this.getInitParameter（"codeCount"）; // 将配置的信息转换成数值 try {if （strWidth ！= null && strWidth.length（） ！= 0） {width = Integer.parseInt（strWidth）;}if （strHeight ！= null && strHeight.length（） ！= 0） {height = Integer.parseInt（strHeight）;}if （strCodeCount ！= null && strCodeCount.length（） ！= 0） {codeCount = Integer.parseInt（strCodeCount）;} } catch （NumberFormatException e） { } x = width / （codeCount + 1）; fontHeight = height - 2; codeY = height - 4; } protected void service（HttpServletRequest req, HttpServletResponse resp）throws ServletException, java.io.IOException { // 定义图像buffer BufferedImage buffImg = new BufferedImage（width, height,BufferedImage.TYPE_INT_RGB）; Graphics2D g = buffImg.createGraphics（）; // 创建一个随机数生成器类 Random random = new Random（）; // 将图像填充为白色 g.setColor（Color.WHITE）; g.fillRect（0, 0, width, height）; // 创建字体，字体的大小应该根据图片的高度来定。 Font font = new Font（"Fixedsys", Font.PLAIN, fontHeight）; // 设置字体。 g.setFont（font）; // 画边框。 g.setColor（Color.BLACK）; g.drawRect（0, 0, width - 1, height - 1）; // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。 g.setColor（Color.BLACK）; for （int i = 0; i < 160; 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）; } // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。 StringBuffer randomCode = new StringBuffer（）; int red = 0, green = 0, blue = 0; // 随机产生codeCount数字的验证码。 for （int i = 0; i < codeCount; i++） {// 得到随机产生的验证码数字。String strRand = String.valueOf（codeSequence[random.nextInt（36）]）;// 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。red = random.nextInt（255）;green = random.nextInt（255）;blue = random.nextInt（255）;// 用随机产生的颜色将验证码绘制到图像中。g.setColor（new Color（red, green, blue））;g.drawString（strRand, （i + 1） * x, codeY）;// 将产生的四个随机数组合在一起。randomCode.append（strRand）; } // 将四位数字的验证码保存到Session中。 HttpSession session = req.getSession（）; session.setAttribute（"validateCode", randomCode.toString（））; // 禁止图像缓存。 resp.setHeader（"Pragma", "no-cache"）; resp.setHeader（"Cache-Control", "no-cache"）; resp.setDateHeader（"Expires", 0）; resp.setContentType（"image/jpeg"）; // 将图像输出到Servlet输出流中。 ServletOutputStream sos = resp.getOutputStream（）; ImageIO.write（buffImg, "jpeg", sos）; sos.close（）; }}ResultServlet.java
Java代码
import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ResultServlet extends HttpServlet {/** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */public void doGet（HttpServletRequest request, HttpServletResponse response）throws ServletException, IOException {doPost（request, response）;}/** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */public void doPost（HttpServletRequest request, HttpServletResponse response）throws ServletException, IOException {response.setContentType（"text/html;charset=utf-8"）;String validateC = （String） request.getSession（）.getAttribute（"validateCode"）;String veryCode = request.getParameter（"c"）;PrintWriter out = response.getWriter（）;if（veryCode==null||"".equals（veryCode））{out.println（"验证码为空"）;}else{if（validateC.equals（veryCode））{out.println（"验证码正确"）;}else{out.println（"验证码错误"）;}}out.flush（）;out.close（）;}} import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ResultServlet extends HttpServlet { /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. ** @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet（HttpServletRequest request, HttpServletResponse response）throws ServletException, IOException { doPost（request, response）; } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. ** @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost（HttpServletRequest request, HttpServletResponse response）throws ServletException, IOException { response.setContentType（"text/html;charset=utf-8"）; String validateC = （String） request.getSession（）.getAttribute（"validateCode"）; String veryCode = request.getParameter（"c"）; PrintWriter out = response.getWriter（）; if（veryCode==null||"".equals（veryCode））{out.println（"验证码为空"）; }else{if（validateC.equals（veryCode））{out.println（"验证码正确"）;}else{out.println（"验证码错误"）;} } out.flush（）; out.close（）; }}verifyCode.js
Js代码
function changeImg（）{var imgSrc = $（"#imgObj"）;var src = imgSrc.attr（"src"）;imgSrc.attr（"src",chgUrl（src））;}//时间戳//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳function chgUrl（url）{var timestamp = （new Date（））.valueOf（）;url = url.substring（0,17）;if（（url.indexOf（"&"）>=0））{url = url + "×tamp=" + timestamp;}else{url = url + "?timestamp=" + timestamp;}return url;}function isRightCode（）{var code = $（"#veryCode"）.attr（"value"）;code = "c=" + code;$.ajax（{type:"POST",url:"resultServlet",data:code,success:callback}）;}function callback（data）{$（"#info"）.html（data）;} function changeImg（）{ var imgSrc = $（"#imgObj"）; var src = imgSrc.attr（"src"）; imgSrc.attr（"src",chgUrl（src））;}//时间戳//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳function chgUrl（url）{ var timestamp = （new Date（））.valueOf（）; url = url.substring（0,17）; if（（url.indexOf（"&"）>=0））{ url = url + "×tamp=" + timestamp; }else{ url = url + "?timestamp=" + timestamp; } return url;}function isRightCode（）{ var code = $（"#veryCode"）.attr（"value"）; code = "c=" + code; $.ajax（{ type:"POST", url:"resultServlet", data:code, success:callback }）;}function callback（data）{ $（"#info"）.html（data）;}verifyCode.jsp
Html代码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/verifyCode.js"></script><script type="text/javascript" src="js/jquery.js"></script><title>test verify code</title></head><body><input id="veryCode" name="veryCode" type="text"/><img id="imgObj" alt="" src="verifyCodeServlet"/><a href="#" onclick="changeImg（）">换一张</a><input type="button" value="验证" onclick="isRightCode（）"/><div id="info"></div></body></html>
以上这篇jquery实现无刷新验证码的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
易网时代-编程资源站