首先明白验证码其实就是一张图片,只需运用相关java的awt包一些方法画出来,然后以imag流形式输出即可。当然图片中的字符串是保存在Session中的,同时一般情况下验证的提交方式都是无刷新(即Ajax)。
现在先在jsp中画一张图片,把图片中的文字保存到Session中同时整体以jpeg图片形式输出。具体代码实现如下(命名image.jsp):
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
public Color getColor(){
Random random = new Random();
int r = random.nextInt(256);//0-255
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r,g,b);
}
public String getNum(){
String str = "";
Random random = new Random();
for(int i=0;i<4;i++){
str += random.nextInt(10);//0-9
}
return str;
}
%>
<%
//不要缓存
response.setHeader("pragma", "mo-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("expires", 0);
//创建一张图片
BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
//创建画笔
Graphics g = image.getGraphics();
//设置画笔的颜色
g.setColor(new Color(200,200,200));
//画一个矩形框
g.fillRect(0,0,80,30);
//画30条随机的线条
for (int i = 0; i < 30; i++) {
Random random = new Random();
int x = random.nextInt(80);
int y = random.nextInt(30);
int xl = random.nextInt(x+10);
int yl = random.nextInt(y+10);
g.setColor(getColor());
g.drawLine(x, y, x + xl, y + yl);
}
//设置文字的属性
g.setFont(new Font("serif", Font.BOLD,16));
g.setColor(Color.BLACK);
//获取随机字符串
String checkNum = getNum();//"2525"
//这个遍历是为了使每个字符间加距离
StringBuffer sb = new StringBuffer();
for(int i=0;i<checkNum.length();i++){
sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
}
g.drawString(sb.toString(),15,20);
//把字符串存入Session中
session.setAttribute("CHECKNUM",checkNum);//2525
//显示图片
ImageIO.write(image,"jpeg",response.getOutputStream());
/*
由于jsp container在处理完成请求后会调用releasePageContet方法释放
所用的PageContext object,并且同时调用getWriter方法,由于getWriter方法
与在jsp页面中使用流相关的getOutputStream方法冲突,所以会造成这种异常,
解决办法是:只需要在jsp页面的最后加上两条语句:
*/
out.clear();
out = pageContext.pushBody();
%><strong>
</strong>
以上jsp页面运行效果如图:
然后另开一个jsp用来提交表单,表单效果图:
实现代码:
<form>
<table border="0" align="center">
<tr>
<th>验证码:</th>
<td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>
<td><img src="01_image.jsp" οnclick="this.src='01_image.jsp?refresh='+Math.random()"/></td>
<td id="res"></td>
</tr>
</table>
</form>
这里设计成当填写完4个字符(验证码4个字符)时就自动进行验证,利用Ajax。这里是结合Struts2,JQuery(也有不用Jquery版)进行编写:
js版本一(不用Jquery时候)代码:
<script type="text/javascript">
//去掉二边的空格
function trim(str){ //" zhaojun "
str = str.replace(/^\s*/,"");//"zhaojun "
str = str.replace(/\s*$/,"");//"zhaojun"
return str;
}
//创建AJAX异步对象,即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的浏览器不支持ajax,请更换浏览器");
}
}
return ajax;
}
document.getElementById("checkcodeID").onkeyup = function(){
var checkcode = this.value;
checkcode = trim(checkcode);//2525
if(checkcode.length == 4){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
ajax.open(method,url);
//NO3)
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO4)
var content = "checkcode=" + checkcode;
ajax.send(content);
//--------------------------------------------------------等待
//NO5)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO6)
var tip = ajax.responseText;
//NO7)
var img = document.createElement("img");
img.src = tip;
img.style.width = "14px";
img.style.height = "14px";
var td = document.getElementById("res");
td.innerHTML = "";
td.appendChild(img);
}
}
}
}else{
//清空图片
var td = document.getElementById("res");
td.innerHTML = "";
}
}
</script>
js版本二(用Jquery的时候)代码:
<script type="text/javascript">
//去掉二边的空格
function trim(str) { //" zhaojun "
str = str.replace(/^\s*/, "");//"zhaojun "
str = str.replace(/\s*$/, "");//"zhaojun"
return str;
}
$(document).ready(function() {
$("#checkcodeID").keyup(function() {
var $checkcode = $(this).val();
$checkcode = trim($checkcode);//2525
if($checkcode.length==4){
$.ajax( {
type : "POST",
url : "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime(),
data : {"checkcode":$checkcode},
dataType :"text",
success : function(backDate,textStatus,ajax){
//alert(backDate!=null?"收到":"为收到");
//alert(backDate);
//alert(ajax.responseText);
//$("td").filter("#res").append(img);
$("#res").html(" ");
$("#res").append("<img src='"+backDate+"' style='width:15px;height:15px;'/>");
}
} );
}else{
$("#res").html(" ");
}
});
})
</script>
Struts.xml文件配置(留意result那里是没有的):
<package name="myPackage" extends="json-default" namespace="/">
<action
name="checkRequest"
class="com.lmk.checkCodeP.CheckcodeAction"
method="check">
</action>
</package>
Action的代码:
//客户端验证码
private String checkcode;//2525
//注入客户端验证码
public void setCheckcode(String checkcode) {
this.checkcode = checkcode;
}
/**
* 验证
*/
public String check() throws Exception {
//图片路径
String tip = "images/MsgError.gif";
//从服务器获取session中的验证码
String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");
//将客户端的验证码与服务端的验证码进行比较
if(checkcode.equals(checkcodeServer)){
tip = "images/MsgSent.gif";
}
//以IO流的方式将tip变量的值输出到AJAX异步对象中
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
//以下方式不是最好的,但可以完成AJAX异步交互
return null;
}
运行效果: