页面文件
<%@ 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, 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, HttpServletResponse response)
throws ServletException, 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();
}
}
}