AJAX jsp无刷新验证码实例

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("<script>alert('验证码错误！请重试。')</script>");
out.println("<script>history.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.*" %> 字串3

<%
//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 chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp; 字串1

Random rand=new Random();

字串5

for(int i=0;i<4;i )
{

字串6

temp=chose.charAt(rand.nextInt(chose.length())); 字串5

display[i*2]=temp;

ran[i]=temp;
}

String random=String.valueOf(display); 字串9

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();
%>

字串4

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;
this.loadXMLDoc(url,method,params,contentType);
}
net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
if (!method)
{
method="GET";
}
if (!contentType && method=="POST")
{
contentType='application/x-www-form-urlencoded';
}
if (window.XMLHttpRequest)
{
this.req=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//add try catch;
try {

字串8

this.req = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e1){
try {
this.req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2){
}
}
//
//this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req)
{
try
{
var loader=this;
this.req.onreadystatechange=function()
{
net.ContentLoader.onReadyState.call(loader);
}
this.req.open(method,url,true);
if (contentType)
{
this.req.setRequestHeader('Content-Type', contentType);
}
this.req.send(params);
}
catch (err)
{
this.on_error.call(this);
}
}
}
net.ContentLoader.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
this.on_load.call(this);
}else{
this.on_error.call(this);
}
}
}
net.ContentLoader.prototype.defaultError=function(){

字串2

alert("error fetching data!"
"\n\nreadyState:" this.req.readyState
"\nstatus: " this.req.status
"\nheaders: " this.req.getAllResponseHeaders());