|
3我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用session保存下用户输入的其它数据的话(如姓名),用户刚刚输入的内容也不存在了,这样给用户造成不好的体验。本例在原有验证方式基础之上增加一段js,通过xmlhttp来获取返回值,以此来验证是否有效,这样即使用户浏览器不支持js,也不会影响他的正常使用了。为了防止作弊,当用户连接3次输入错误时则重载一下图片,这样也利于用户因为图片上的验证码辨认不清而使终无法输入正确。本例还特别适合检验用户名是否有效,只要从后台做个sql查询,返回一个值或是xml即可。(这种例子太多 ,就在此不赘述了)。本例的优点在于非常方便用户输入,而且减少对服务器端的请求,可以说既改善用户体验而且略会节省带宽成本,但相应地要在页面上增加一段 <%@ 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("<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); } } %> <%@ 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.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=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(); %> /* 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!" +"
readyState:"+this.req.readyState +"
status: "+this.req.status +"
headers: "+this.req.getAllResponseHeaders()); } </p |
上一篇: android的Service学习下一篇: android的消息机制
|