验证码生成点击刷新 ajax校验

页面文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'index.jsp' starting page</title>
		<Meta http-equiv="pragma" content="no-cache">
		<Meta http-equiv="cache-control" content="no-cache">
		<Meta http-equiv="expires" content="0">
		<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<Meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

		<script type="text/javascript">
	//liubo

	var req;
	function validate() {
		//获取表单提交的内容  
		var idField = document.getElementById("code");
		//访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do  
		var url = "CheckServlet?code=" + escape(idField.value);
		//创建一个XMLHttpRequest对象req  
		if (window.XMLHttpRequest) {
			//IE7,Firefox,Opera支持  
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			//IE5,IE6支持  
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		/* 
		 open(String method,String url,boolean )函数有3个参数 
		 method参数指定向servlet发送请求所使用的方法，有GET,POST等 
		 boolean值指定是否异步，true为使用，false为不使用。 
		 我们使用异步才能体会到Ajax强大的异步功能。 
		 */
		req.open("GET",url,true);
		//onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态  
		req.onreadystatechange = callback;
		//send函数发送请求  
		req.send(null);
	}
	//回调函数
	function callback() {
		if (req.readyState == 4 && req.status == 200) {
			var check = req.responseText;
			show(check);
		}
	}
	//在页面显示是否验证码正确提示
	function show(str) {
		if (str == "OK") {
			var show = "<img src='image/ok.png'/>";
			document.getElementById("info").innerHTML = show;
		} else if (str == "NO") {
			var show = "<font color='red'>请重新输入！</font>";
			document.getElementById("info").innerHTML = show;
		}
	}
</script>
<!--  点击更换验证码 -->
		<script type="text/javascript">
	function change() {
		var img = document.getElementById("code1");
		img.src = "CheckCodeServlet?service" + Math.random();
	}
</script>
	</head>

	<body>
		<form>
			<img id="code1" src="CheckCodeServlet">
			<a href="javascript:" onclick="change()">看不清刷新</a>
			<input type="text" id="code" name="code" onblur="validate()">
			<span id="info"></span>
		</form>

	</body>
</html>

Java生成验证码图片的servlet

package com.code;
/**
 * @author liubo
 */

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class CheckCodeServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;
	// 放到session中的KEY
	public static final String RANDOMCODEKEY = "RANDOMCODEKEY";
	private Random random = new Random();
	// 随机产生的字符串
	private String randString = "0123456789";

	private int width = 80;
	private int height = 26;
	private int stringNum = 3;

	/*
	 * 获得字体
	 */
	private Font getFont() {
		return new Font("Fixedsys",Font.CENTER_BASELINE,18);

	}

	/*
	 * 获得颜色
	 */
	private Color getRandColor(int fc,int bc) {
		if (fc > 255) {
			fc = 255;
		}
		if (bc < 255) {
			bc = 255;
		}
		int r = fc + random.nextInt(bc - fc - 16);
		int g = fc + random.nextInt(bc - fc - 14);
		int b = fc + random.nextInt(bc - fc - 18);

		return new Color(r,g,b);
	}

	public void getRandcode(HttpServletRequest request,HttpServletResponse response) {
		HttpSession session = request.getSession();
		// BufferedImage类是具有缓冲区的Image类，Image类是用于描述图像信息的类
		BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
		// 产生image对象的graphics对象，该对象可以在图像上进行各种绘制操作
		Graphics g = image.getGraphics();
		g.fillRect(0,width,height);
		g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));
		g.setColor(getRandColor(110,133));

		String randomString = "";
		for (int i = 0; i <= stringNum; i++) {
			randomString = drowString(g,randomString,i);
		}
		session.removeAttribute(RANDOMCODEKEY);
		session.setAttribute(RANDOMCODEKEY,randomString);
		g.dispose();
		try {
			// 将内存中的图片通过流动形式输出到客户端
			ImageIO.write(image,"JPEG",response.getOutputStream());
		} catch (Exception e) {
			e.printStackTrace();
		}

	}

	/*
	 * 绘制字符串
	 */
	private String drowString(Graphics g,String randomString,int i) {
		g.setFont(getFont());
		g.setColor(new Color(random.nextInt(101),random.nextInt(111),random
				.nextInt(121)));
		String rand = String.valueOf(getRandomString(random.nextInt(randString
				.length())));
		randomString += rand;
		g.translate(random.nextInt(3),random.nextInt(3));
		g.drawString(rand,13 * i,16);
		return randomString;
	}

	/*
	 * 获取随机字符
	 */
	public String getRandomString(int num) {
		return String.valueOf(randString.charAt(num));
	}

	@Override
	protected void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {

		// 设置相应的类型，告诉浏览器输出的内容为图片
		response.setContentType("image/jpeg");
		// 设置响应头信息，告诉浏览器不要缓存此内容
		response.setHeader("Pragma","No-cache");
		response.setHeader("Cache-Control","no-cache");
		response.setDateHeader("Expire",0);

		try {
			getRandcode(request,response);
		} catch (Exception e) {
			e.printStackTrace();
		}

	}
	@Override
	protected void doGet(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException {
		// TODO Auto-generated method stub
		service(req,resp);
	}
	
}

服务器端校验的servlet

package com.code;
/**
 * @author liubo
 */
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 CheckServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {

		this.doPost(request,response);
	}

	public void doPost(HttpServletRequest request,IOException {
		PrintWriter out = response.getWriter();
		String check = request.getParameter("code");
		try {
			String code = (String) request.getSession().getAttribute(
					"RANDOMCODEKEY");

			if (code.equals(check)) {
				out.write("OK");
			} else {
				out.write("NO");
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			out.close();
		}

	}

}

验证码生成 点击刷新 ajax校验

猜你在找的Ajax相关文章

验证码生成点击刷新 ajax校验