AJAX+jsp无刷新验证码实例

出处:中国IT实验室

【导读】本文通过实例，介绍在做验证码的时候为了给用户很好的体验，需要在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效。同时，本例还特别适合检验用户名是否有效。 

 

1、我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用session保存下用户输入的其它数据的话(如姓名)，用户刚刚输入的内容也不存在了，这样给用户造成不好的体验。

2、本例在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效，这样即使用户浏览器不支持js，也不会影响他的正常使用了。

3、为了防止作弊，当用户连接3次输入错误时则重载一下图片，这样也利于用户因为图片上的验证码辨认不清而使其终无法输入正确。

4、本例还特别适合检验用户名是否有效，只要从后台做个sql查询，返回一个值或是xml即可。(这种例子太多 ，就在此不赘述了)。

5、本例的优点在于非常方便用户输入，而且减少对服务器端的请求，可以说既改善用户体验而且略会节省带宽成本，但相应地要在页面上增加一段JavaScript代码，在目前网速越来越快人们要求便捷舒适的今天，似乎我们更应注意提供给用户良好的使用感受。

代码如下：

1、img.jsp,输入主页面

<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" pageEncoding="GBK"%> <% //set Chinese Char //Cody by [email protected]; //homepage:jiarry.126.com request.setCharacterEncoding("GBK"); response.setCharacterEncoding("GBK"); response.setContentType("text/html; charset=GBK"); %> AJAX(无刷新及时提示)验证码实例！cody by jarry <% 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(" 恭喜您，验证码输入成功，这里是提交结果页面，可以写入数据库了！ 返回再测试 "); out.println("您的名字是："+name); out.println(" "); out.println("您输入的是："+num); out.println("验证码是："+random); out.println(""); return;//javascript:history.go(-1) } } %> οnsubmit="return validata(this);"> 您的姓名： (为了更好地说明此例，特加姓名一项) 验 证 码： 验证码看不清

2、num.jsp,反馈xmlhttp请求的页面

<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" pageEncoding="GBK"%> <% //set Chinese Char //Cody by [email protected]; //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(""); out.println(""); //response.sendRedirect("img.jsp"); */ out.print("validate_failed:"+random); } else { //out.println(" 验证成功！"); 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 [email protected]; //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; 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)); %> <% 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、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 { 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()); }