ajax+jsp无刷新验证码

img.jsp:
<%@ page contentType="text/html; charset=GBK" language="java"
 import="java.sql.*" errorPage="" pageEncoding="GBK"%>
<%
 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="/js/net.js"></script>
 </head>

 <body>
  AJAX(无刷新及时提示)验证码实例！
  <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/">返回再测试</a><br>");
     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=document.getElementById("info");
  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">
   <a href="javascript:show(document.getElementById('random'))">验证码看不清</a>
   <br>
   <br>
   <input type="submit" value=" 提交 ">
   <br>
   <div id=info style="color: red; padding: 10px; font-size: 12px;"></div>
  </form>
 </body>
</html>

 

num.jsp:

<%@ page contentType="text/html; charset=GBK" language="java"
 import="java.sql.*" errorPage="" pageEncoding="GBK"%>
<%

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

 

random.jsp:

<%@ page autoFlush="false"
 import="java.util.*,java.awt.*,java.awt.image.*,
 com.sun.image.codec.jpeg.*,java.util.*,
 java.io.File,java.io.FileOutputStream,javax.imageio.ImageIO"
 pageEncoding="GBK"%>

<%

 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;

 Random rand = new Random();

 for (int i = 0; i < 4; 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));
%>
<%
 Random jpgRand=new Random();
 String jpg = "d:/test/background"+(jpgRand.nextInt(8)+1)+".jpg";
%>

<%
 out.clear();
 response.setContentType("image/jpeg");
 response.addHeader("pragma", "NO-cache");
 response.addHeader("Cache-Control", "no-cache");
 response.addDateHeader("Expries", 0);
 int width = 150, height = 50;
 File _file = new File(jpg);  
    Image src = ImageIO.read(_file);  
 
 BufferedImage image = new BufferedImage(width, height,
   BufferedImage.TYPE_INT_RGB);
 Graphics g = image.getGraphics();
 //以下填充背景颜色
 g.drawImage(src, 0, 0, width, height, null);  
 //设置字体颜色
 g.setColor(Color.BLUE);
 Font font = new Font("Times New Roman",Font.PLAIN,40);
 g.setFont(font);
 g.drawString(random,width-140,height-10);
 for (int i=0;i<5;i++)
         {
    Color[] colors = {Color.BLACK,Color.BLUE,Color.CYAN,
        Color.GRAY,Color.GREEN,Color.MAGENTA,Color.ORANGE,Color.PINK,Color.RED,Color.YELLOW}; 
       int x = rand.nextInt(width);
       int y = rand.nextInt(height);
       int xl = rand.nextInt(100);
       int yl = rand.nextInt(50);
       g.setColor(colors[rand.nextInt(10)]);
       g.drawLine(x,y,x+xl,y+yl);
       g.drawOval(x,y,x+xl,y+yl);
       }
   
 //g.drawLine(15,25,50,10);
 g.dispose();
 ServletOutputStream outStream = response.getOutputStream();
 JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(outStream);
 encoder.encode(image);
 outStream.close();
%>

 

net.js:

/* 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 {
      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(){
  alert("error fetching data!"
 +"/n/nreadyState:"+this.req.readyState
 +"/nstatus: "+this.req.status
 +"/nheaders: "+this.req.getAllResponseHeaders());
}