代码如下,
1,img.jsp,输入主页面
%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" pageEncoding="GBK"%
%
//set Chinese Char
//Cody by JarryLi@gmail.com;
//homepage:jiarry.126.com
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%
html
head
title图片验证/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
script src="net.js"/script
/head
body
AJAX(无刷新及时提示)验证码实例!cody by jarry
hr
%
String num=request.getParameter("num");
String random=(String)session.getAttribute("random");
String name=request.getParameter("name");
if(num!=null&&random!=null&&name!=null)
{
if(num.equals(random))
{
out.println("font style="color:green;font-weight:bold"恭喜您,验证码输入成功,这里是提交结果页面,可以写入数据库了!/font a href="img.jsp"返回再测试/abr");
out.println("您的名字是:"+name);
out.println("br");
out.println("您输入的是:"+num);
out.println("验证码是:"+random);
out.println("/body");
return;//javascript:history.go(-1)
}
}
%
script type="text/javascript"
var times=0;
function subform(){
var gtext=this.req.responseText;
var info=document.getElementById("info");
if(gtext.indexOf("validate_successful")!=-1){
//info.innerHTML="font color=green验证码通过/font";
document.forms["myform"].submit();
//当得到的值表示合法,则验证码通过。
}else{
times++;
if(times=3){//如果连接3次输入错误,则重载图片,可以防止作弊和用户看不清图片;
info.innerHTML="接连3次输入错误。更新验证码,请重新输入";
document.forms["myform"].num.value="";
show(document.getElementById('random'));
times=0;
}else{
info.innerHTML="第"+times+"次验证码错误,请注意区分大小写 ";
}
document.forms["myform"].num.select();
}
}
function validata(obj){
var enter=true;
var info=do
response.setContentType("text/html; charset=GBK");
%
%
String chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp;
Random rand=new Random();
for(int i=0;i4;i++)
{
temp=chose.charAt(rand.nextInt(chose.length()));
display[i*2]=temp;
ran[i]=temp;
}
String random=String.valueOf(display);
session.setAttribute("random",String.valueOf(ran));
%
%
out.clear();
response.setContentType("image/jpeg");
response.addHeader("pragma","NO-cache");
response.addHeader("Cache-Control","no-cache");
response.addDateHeader("Expries",0);
int width=80, height=30;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
//以下填充背景颜色
g.setColor(Color.GREEN);
g.fillRect(0, 0, width, height);
//设置字体颜色
g.setColor(Color.RED);
Font font=new Font("Arial",Font.PLAIN,20);
g.setFont(font);
//g.drawString(random,5,14);
g.drawString(random,5,20);
g.dispose();
ServletOutputStream outStream = response.getOutputStream();
JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);
encoder.encode(image);
outStream.close();
%
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
4,net.js,封装好的xmlhttp对象,可以很方便的调用
/* namespacing object */
var net=new Object();
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,on_load,on_error,method,params,contentType){
this.req=null;
this.on_load=on_load;
this.on_error=(on_error) ? on_error : this.defaultError;
var msg="";
if(obj.name.value.match(/^s*$/g)){//如果未输入名字,提示
msg+="请输入您的姓名br";enter=false
}
if(obj.num.value.match(/^s*$/g)){//如果未输入验证码,提示
msg+="请输入验证码br";enter=false
}
if(enter==false){
info.innerHTML=msg;
return false;
}
var url="num.jsp?num="+obj.num.value;
var newxmlhttp=new net.ContentLoader(url,subform,"","get",null,null);
return false;
}
function show(o){
//重载验证码
var timenow = new Date().getTime();
o.src="random.jsp?d="+timenow;
/*
//超时执行;
setTimeout(function(){
o.src="random.jsp?d="+timenow;
}
,20);
*/
}
/script
form action="img.jsp" name="myform" method="post" onsubmit="return validata(this);"
您的姓名:input type="text" name="name" size=10 (为了更好地说明此例,特加姓名一项)br
验 证 码:input type="text" name="num" size=10 maxlength="4" img src="random.jsp" id="random" align="" valign="absmiddle" hspace="5" a href="javascript:show(document.getElementById('random'))"验证码看不清/abr
br input type="submit" value=" 提交 "br
div id=info style="color:red;padding:10px;font-size:12px;"/div
/form
/body
/html
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
2,num.jsp,反馈xmlhttp请求的页面
%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" pageEncoding="GBK"%
%
//set Chinese Char
//Cody by JarryLi@gmail.com;
//homepage:jiarry.126.com
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%
%
String num=request.getParameter("num");
String random=(String)session.getAttribute("random");
if(num!=null&&random!=null)
{
if(!num.equals(random))
{
/*
out.println("scriptalert('验证码错误!请重试。')/script");
out.println("scripthistory.go(-1)/script");
//response.sendRedirect("img.jsp");
*/
out.print("validate_failed:"+random);
}
else
{
//out.println("center验证成功!/center");
out.print("validate_successful:"+random);
}
}
%
3,random.jsp,生成验证码图片的页面
%@ page autoFlush="false" import="java.util.*,java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %
%
//set Chinese Char
//Cody by JarryLi@gmail.com;
//homepage:jiarry.126.com
request.setCharacterEncoding("GBK");
response.setChar