赛迪网 > IT技术 Java > JAVA技术
  IT资讯搜索
 
IT产品搜索
[程序开发][网管世界][网络安全][数据库技术]
[操作系统][嘉宾聊天·在线访谈][活动集锦]
[精彩专题][Symantec专区][订阅IT技术周刊]
[开发论坛][网管论坛][安全论坛][数据库论坛]
[操作系统论坛][Sybase专区][IBM dW技术专区]
[病毒求助][病毒与漏洞播报][文档·源码下载]

JAVA技术:AJAX+jsp无刷新验证码实例

发布时间:2007.11.02 04:45     来源:赛迪网技术社区    作者:baocl

我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用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");
%>


图片验证



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

 

您的姓名: (为了更好地说明此例,特加姓名一项)

验 证 码: 验证码看不清




 



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("");
  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 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[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());
}

 


[ 发表评论 ] 字体[  ] [ 打印 ] [ 进入博客 ] [ 进入论坛 ]  [ 推荐给朋友 ]
  相关文章
· 规则引擎实现探讨 (11-01) · 探讨struts,ajax乱码解决方案 (11-01)
· JAVA基础:实现HTMLEncode功能的bean (10-31) · Java进阶:优化Entity Beans的七条守则 (10-31)
· JAVA进阶:如何在JBOSS Server上发布EJB (10-31) · JAVA基础:一个struts+hibernate入门实例 (10-31)
· JavaBean实现多文件上传功能的两种方法 (10-31) · Java Servlet API说明文档 (10-31)
· JAVA基础:如何成为一个成功的Jsp程序员 (10-31) · 程序人生--一个程序员对学弟学妹建议 (10-31)
  客户需求反馈表
* 姓  名:
更多资料  了解方案  认识厂商
* 单位名称:
* 联系电话:
* 电子邮件:
  赛迪推荐  
  手机·资费 ·新品·导购·评测·手机资费·宽带
手机搜索  诺基亚 N73 MOTO Z6
  IT产品 ·笔记本·台式机·服务器·打印·投影
IT产品搜索 
  IT技术 ·开发·网管·安全·数据库·操作系统
  信息化 ·热点·专题·访谈·周刊·方案案例
· 电子商务新规酝酿透明网购 冲破信息孤岛
· 中小企业加速信息化 供应链管理成出发点
· 五条黄金准则能够让CIO巧妙加薪 CIO焦虑调查
· 网上书店解决方案 深圳边检指挥中心ITSM项目
  IT博客 ·曾剑秋·项立刚·Java学习·网管
  IT技术论坛 ·开发·网管·安全·数据库·系统