AJAX+jsp无刷新验证码实例

【 tulaoshi.com - Web开发 】

我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用session保存下用户输入的其它数据的话(如姓名)，用户刚刚输入的内容也不存在了，这样给用户造成不好的体验。 本例在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效，这样即使用户浏览器不支持js，也不会影响他的正常使用了。 为了防止作弊，当用户连接3次输入错误时则重载一下图片，这样也利于用户因为图片上的验证码辨认不清而使终无法输入正确。 本例还特别适合检验用户名是否有效，只要从后台做个sql查询，返回一个值或是xml即可。(这种例子太多 ，就在此不赘述了)。 本例的优点在于非常方便用户输入，而且减少对服务器端的请求，可以说既改善用户体验而且略会节省带宽成本，但相应地要在页面上增加一段JavaScript代码，在目前网速越来越快人们要求便捷舒适的今天，似乎我们更应注意提供给用户良好的使用感受。

代码如下，
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

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

 

（本文来源于图老师网站，更多请访问https://www.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;

cument.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" 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

 

（本文来源于图老师网站，更多请访问https://www.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);
  }
}
%

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）

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