AJAX+jsp无刷新验证码实例

你若走c我不留

你若走c我不留

2016-02-19 15:05

今天图老师小编给大家介绍下AJAX+jsp无刷新验证码实例,平时喜欢AJAX+jsp无刷新验证码实例的朋友赶紧收藏起来吧!记得点赞哦~
我们在做验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用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();
   %

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

 

(本文来源于图老师网站,更多请访问http://m.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

 

(本文来源于图老师网站,更多请访问http://m.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);
  }
}
%

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

展开更多 50%)
分享

猜你喜欢

AJAX+jsp无刷新验证码实例

Web开发
AJAX+jsp无刷新验证码实例

JSP彩色验证码的实例代码

Web开发
JSP彩色验证码的实例代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JSP彩色验证码

Java JAVA基础
JSP彩色验证码

JSP验证码代码

Web开发
JSP验证码代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jsp 生成验证码代码

Web开发
jsp 生成验证码代码

jsp实现图形验证码

Web开发
jsp实现图形验证码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

WPS文字中如何设置上下左右页边距的距离

WPS文字中如何设置上下左右页边距的距离

将窗体从属于主窗体

将窗体从属于主窗体
下拉加载更多内容 ↓