`
ythzjk
  • 浏览: 75682 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
zmmandcl
社区版块
存档分类
最新评论

页面上的验证码图片是servlet,采用jquery实现异步校验信息

ServletjQueryAjaxCacheJavaScript 
阅读更多

1.思路:

页面上的验证码图片是servlet,采用jquery实现异步校验信息

 

2.所用到的文件

VerifyCodeServlet.java   --用于生成图片的servlet

ResultServlet.java          --用于校验验证码正确性的servlet

verifyCode.js                  --校验的js文件

jquery.js                         --jquery包里的源文件

verifyCode.jsp                --页面

 

3.代码

VerifyCodeServlet.java

 

Java代码 复制代码
  1. import java.awt.Color;   
  2. import java.awt.Font;   
  3. import java.awt.Graphics2D;   
  4. import java.awt.image.BufferedImage;   
  5. import java.util.Random;   
  6.   
  7. import javax.imageio.ImageIO;   
  8. import javax.servlet.ServletException;   
  9. import javax.servlet.ServletOutputStream;   
  10. import javax.servlet.http.HttpServlet;   
  11. import javax.servlet.http.HttpServletRequest;   
  12. import javax.servlet.http.HttpServletResponse;   
  13. import javax.servlet.http.HttpSession;   
  14.   
  15. public class VerifyCodeServlet extends HttpServlet {   
  16.   
  17.     // 验证码图片的宽度。   
  18.     private int width = 60;   
  19.   
  20.     // 验证码图片的高度。   
  21.     private int height = 20;   
  22.   
  23.     // 验证码字符个数   
  24.     private int codeCount = 4;   
  25.   
  26.     private int x = 0;   
  27.   
  28.     // 字体高度   
  29.     private int fontHeight;   
  30.   
  31.     private int codeY;   
  32.   
  33.     char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',   
  34.             'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',   
  35.             'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };   
  36.   
  37.     /**  
  38.      * 初始化验证图片属性  
  39.      */  
  40.     public void init() throws ServletException {   
  41.         // 从web.xml中获取初始信息   
  42.         // 宽度   
  43.         String strWidth = this.getInitParameter("width");   
  44.         // 高度   
  45.         String strHeight = this.getInitParameter("height");   
  46.         // 字符个数   
  47.         String strCodeCount = this.getInitParameter("codeCount");   
  48.   
  49.         // 将配置的信息转换成数值   
  50.         try {   
  51.             if (strWidth != null && strWidth.length() != 0) {   
  52.                 width = Integer.parseInt(strWidth);   
  53.             }   
  54.             if (strHeight != null && strHeight.length() != 0) {   
  55.                 height = Integer.parseInt(strHeight);   
  56.             }   
  57.             if (strCodeCount != null && strCodeCount.length() != 0) {   
  58.                 codeCount = Integer.parseInt(strCodeCount);   
  59.             }   
  60.         } catch (NumberFormatException e) {   
  61.         }   
  62.   
  63.         x = width / (codeCount + 1);   
  64.         fontHeight = height - 2;   
  65.         codeY = height - 4;   
  66.   
  67.     }   
  68.   
  69.     protected void service(HttpServletRequest req, HttpServletResponse resp)   
  70.             throws ServletException, java.io.IOException {   
  71.   
  72.         // 定义图像buffer   
  73.         BufferedImage buffImg = new BufferedImage(width, height,   
  74.                 BufferedImage.TYPE_INT_RGB);   
  75.         Graphics2D g = buffImg.createGraphics();   
  76.   
  77.         // 创建一个随机数生成器类   
  78.         Random random = new Random();   
  79.   
  80.         // 将图像填充为白色   
  81.         g.setColor(Color.WHITE);   
  82.         g.fillRect(0, 0, width, height);   
  83.   
  84.         // 创建字体，字体的大小应该根据图片的高度来定。   
  85.         Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);   
  86.         // 设置字体。   
  87.         g.setFont(font);   
  88.   
  89.         // 画边框。   
  90.         g.setColor(Color.BLACK);   
  91.         g.drawRect(0, 0, width - 1, height - 1);   
  92.   
  93.         // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。   
  94.         g.setColor(Color.BLACK);   
  95.         for (int i = 0; i < 160; i++) {   
  96.             int x = random.nextInt(width);   
  97.             int y = random.nextInt(height);   
  98.             int xl = random.nextInt(12);   
  99.             int yl = random.nextInt(12);   
  100.             g.drawLine(x, y, x + xl, y + yl);   
  101.         }   
  102.   
  103.         // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。   
  104.         StringBuffer randomCode = new StringBuffer();   
  105.         int red = 0, green = 0, blue = 0;   
  106.   
  107.         // 随机产生codeCount数字的验证码。   
  108.         for (int i = 0; i < codeCount; i++) {   
  109.             // 得到随机产生的验证码数字。   
  110.             String strRand = String.valueOf(codeSequence[random.nextInt(36)]);   
  111.             // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。   
  112.             red = random.nextInt(255);   
  113.             green = random.nextInt(255);   
  114.             blue = random.nextInt(255);   
  115.   
  116.             // 用随机产生的颜色将验证码绘制到图像中。   
  117.             g.setColor(new Color(red, green, blue));   
  118.             g.drawString(strRand, (i + 1) * x, codeY);   
  119.   
  120.             // 将产生的四个随机数组合在一起。   
  121.             randomCode.append(strRand);   
  122.         }   
  123.         // 将四位数字的验证码保存到Session中。   
  124.         HttpSession session = req.getSession();   
  125.         session.setAttribute("validateCode", randomCode.toString());   
  126.   
  127.         // 禁止图像缓存。   
  128.         resp.setHeader("Pragma", "no-cache");   
  129.         resp.setHeader("Cache-Control", "no-cache");   
  130.         resp.setDateHeader("Expires", 0);   
  131.   
  132.         resp.setContentType("image/jpeg");   
  133.   
  134.         // 将图像输出到Servlet输出流中。   
  135.         ServletOutputStream sos = resp.getOutputStream();   
  136.         ImageIO.write(buffImg, "jpeg", sos);   
  137.         sos.close();   
  138.     }   
  139.   
  140. }  
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代码 复制代码
  1. import java.io.IOException;   
  2. import java.io.PrintWriter;   
  3.   
  4. import javax.servlet.ServletException;   
  5. import javax.servlet.http.HttpServlet;   
  6. import javax.servlet.http.HttpServletRequest;   
  7. import javax.servlet.http.HttpServletResponse;   
  8.   
  9. public class ResultServlet extends HttpServlet {   
  10.   
  11.     /**  
  12.      * The doGet method of the servlet. <br>  
  13.      *  
  14.      * This method is called when a form has its tag value method equals to get.  
  15.      *   
  16.      * @param request the request send by the client to the server  
  17.      * @param response the response send by the server to the client  
  18.      * @throws ServletException if an error occurred  
  19.      * @throws IOException if an error occurred  
  20.      */  
  21.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
  22.             throws ServletException, IOException {   
  23.   
  24.         doPost(request, response);   
  25.     }   
  26.   
  27.     /**  
  28.      * The doPost method of the servlet. <br>  
  29.      *  
  30.      * This method is called when a form has its tag value method equals to post.  
  31.      *   
  32.      * @param request the request send by the client to the server  
  33.      * @param response the response send by the server to the client  
  34.      * @throws ServletException if an error occurred  
  35.      * @throws IOException if an error occurred  
  36.      */  
  37.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  38.             throws ServletException, IOException {   
  39.   
  40.         response.setContentType("text/html;charset=utf-8");   
  41.         String validateC = (String) request.getSession().getAttribute("validateCode");   
  42.         String veryCode = request.getParameter("c");   
  43.         PrintWriter out = response.getWriter();   
  44.         if(veryCode==null||"".equals(veryCode)){   
  45.             out.println("验证码为空");   
  46.         }else{   
  47.             if(validateC.equals(veryCode)){   
  48.                 out.println("验证码正确");   
  49.             }else{   
  50.                 out.println("验证码错误");   
  51.             }   
  52.         }   
  53.         out.flush();   
  54.         out.close();   
  55.     }   
  56.   
  57. }  
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代码 复制代码
  1. function changeImg(){   
  2.     var imgSrc = $("#imgObj");   
  3.     var src = imgSrc.attr("src");   
  4.     imgSrc.attr("src",chgUrl(src));   
  5. }   
  6. //时间戳   
  7. //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
  8. function chgUrl(url){   
  9.     var timestamp = (new Date()).valueOf();   
  10.     url = url.substring(0,17);   
  11.     if((url.indexOf("&")>=0)){   
  12.         url = url + "×tamp=" + timestamp;   
  13.     }else{   
  14.         url = url + "?timestamp=" + timestamp;   
  15.     }   
  16.     return url;   
  17. }   
  18.   
  19. function isRightCode(){   
  20.     var code = $("#veryCode").attr("value");   
  21.     code = "c=" + code;   
  22.     $.ajax({   
  23.         type:"POST",   
  24.         url:"resultServlet",   
  25.         data:code,   
  26.         success:callback   
  27.     });   
  28. }   
  29.   
  30. function callback(data){   
  31.     $("#info").html(data);   
  32. }  
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代码 复制代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5.     <head>  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.         <script type="text/javascript" src="js/verifyCode.js"></script>  
  8.         <script type="text/javascript" src="js/jquery.js"></script>  
  9.         <title>test verify code</title>  
  10.     </head>  
  11.     <body>  
  12.         <input <span
    分享到：
    windows tial 查看日志
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

相关推荐

    异步校验jquery-ajax

    本工程有两种ajax异步校验注册时输入的username是否与数据库中的值重复，通过mybatis实现数据库，通过servlet或者struts2实现控制层，通过ajax，jquery，json，实现异步校验

    jquery实现页面之间的传值功能

    ### jQuery 实现页面之间的传值功能 #### 一、概述 在 Web 开发中，页面间的数据传递是一项基本且重要的任务。传统的表单提交方法虽然简单有效，但在用户体验上往往不尽如人意。随着 AJAX 技术的发展，利用 ...

    验证码的生成与校验

    验证码是网络安全领域中的一种...总结来说，这个项目涉及到Servlet生成随机验证码图片、Ajax无刷新校验验证码的技术，以及网络安全和用户体验方面的考量。通过实践这些技术，开发者可以提升网站的安全性和用户体验。

    jquery easyUI中ajax异步校验用户名

    5. 异步校验结果的前端处理，包括对不同校验结果作出不同的页面响应，比如提示信息框的弹出、表单的重置等。 以上知识点的应用，结合实际代码的编写和调试，可以实现对用户名的异步校验功能。对于前端开发者而言，...

    “AJAX校验用户名是否存在”小例子源码（JQuery+Servlet实现）.rar

    综上所述，这个"AJAX校验用户名是否存在"的小例子展示了如何结合JQuery和Servlet实现异步数据验证。通过AJAX，前端可以无刷新地与服务器通信，而Servlet则作为后端处理逻辑的核心，两者协同工作，为用户提供高效、...

    图片验证码V2.0

    在这个“图片验证码V2.0”项目中，我们将会探讨如何使用Servlet生成图片验证码，并通过Ajax进行校验。 一、Servlet生成图片验证码 1. **Servlet基础**：Servlet是Java Web开发中的一个关键组件，它是一个服务器端...

    jquery实现无刷新验证码的简单实例

    在本实例中，jQuery用于拦截表单提交事件，阻止表单的默认提交行为，然后通过AJAX请求服务器端的`ResultServlet`来异步校验验证码。 ### 知识点五：servlet技术 Servlet是Java EE中用于处理客户端请求并产生动态...

    详解javascript传统方法实现异步校验

    本文将深入探讨如何利用传统方法实现JavaScript的异步校验，主要涉及XMLHttpRequest对象的使用。 XMLHttpRequest是JavaScript中用于实现异步通信的关键组件，它允许我们在不刷新整个页面的情况下向服务器发送请求并...

    Ajax+servlet实现搜索提示列表效果

    在Java Web开发中，"Ajax + Servlet 实现搜索提示列表效果"是一个常见的需求，它能够提升用户在输入查询时的体验。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页...

    JQuery用户名校验的具体实现

    JQuery用户名校验是指使用JQuery库来实现对网站...通过上述实例的详细分析，我们可以看到JQuery和Servlet结合的用户校验流程和实现方式，这对于需要在网站上实现用户注册功能的开发者来说，是具有参考价值的实践方法。

    servlet.zip

    综上所述，"servlet.zip"这个项目是一个基于Java Web的开发实践，利用Servlet处理服务器端请求，使用Bootstrap和CSS定制美观的表单界面，用JavaScript和jQuery实现客户端的交互逻辑和数据验证，可能通过JDBC与数据库...

    ajax+servlet分页

    "Ajax + Servlet" 分页技术是结合了异步JavaScript和XML（Ajax）与Java Servlet技术来实现在不刷新整个页面的情况下动态加载分页内容。本文将深入探讨这种技术的实现原理和步骤。 首先，让我们理解Ajax的核心概念。...

    传智播客网上书城毕业设计资料和代码

    &gt; 表单页面是jQuery做校验(包含了ajax异步请求) # 在输入框失去焦点时进行校验； # 在提交时对所有输入框进行校验； # 在输入框得到焦点时，隐藏错误信息。 &gt; 表单页面使用一次性图形验证码； &gt; 在servlet中...

    javaWeb传智播客网上书城项目源码(设计以及实现论文)

    &gt; 表单页面是jQuery做校验(包含了ajax异步请求) # 在输入框失去焦点时进行校验； # 在提交时对所有输入框进行校验； # 在输入框得到焦点时，隐藏错误信息。 &gt; 表单页面使用一次性图形验证码； &gt; 在servlet中再次做了...

    AJAX+servlet入门实例用户注册

    5. **AJAX响应**：Servlet将处理结果（成功或失败信息）以JSON或XML形式响应给前端。 6. **前端更新**：JavaScript根据响应结果更新页面显示，如显示注册成功消息或错误提示。 四、AJAX实现 使用jQuery库可以简化...

    ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

    无论是传统的Ajax方式还是jQuery的`.post`方法，它们都是通过异步请求与服务器通信，校验用户名的可用性，避免了页面刷新带来的用户体验中断。在实际应用中，根据项目需求和团队技术栈，可以选择适合的实现方式。...

    基于Jsp+Servlet+Layui的学生信息管理系统.zip

    5. **前后端交互**：通过AJAX或者jQuery的$.ajax方法，实现前端JSP与后端Servlet的异步通信，无刷新地完成数据的增删改查操作。 6. **权限管理**：考虑到系统可能有多个角色（如管理员、教师、学生），可能需要实现...

    基于javaWeb cz播客网上书城项目源码【使用文档+源码+论文+答辩】

    &gt; 表单页面是jQuery做校验(包含了ajax异步请求) # 在输入框失去焦点时进行校验； # 在提交时对所有输入框进行校验； # 在输入框得到焦点时，隐藏错误信息。 &gt; 表单页面使用一次性图形验证码； &gt; 在servlet中...

    一个用dwr实现的ajax校验

    在本示例中，"一个用dwr实现的ajax校验"指的是利用DWR技术来实现在不刷新页面的情况下进行表单验证。 在Web开发中，表单验证是必不可少的一部分，它确保用户输入的数据符合预设的规则，例如邮箱格式、密码强度等。...

    JSP实现进度条

    对于登录时的进度条，我们通常会采用异步处理的方式。这意味着在用户点击登录按钮后，页面不会立即刷新，而是发送一个Ajax请求到服务器进行验证。同时，进度条开始显示，表示登录过程正在进行中。 1. **前端部分**...

Magicbox
Global site tag (gtag.js) - Google Analytics