AJAX+jsp无刷新验证码实例

AJAX+jsp无刷新验证码实例2009-11-06我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用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">返回再测试</a><br>"）;

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（）;

//当得到的值表示合法，则验证码通过。

}elseelse{

info.innerHTML="第"+times+"次验证码错误,请注意区分大小写 ";

}

document.forms["myform"].num.select（）;

}

}

function validata（obj）{

var enter=true;

var info=document.getElementById（"info"）;

var msg="";

if（obj.name.value.match（/^s*$/g））

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（）

,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"））">验证码看不清</a><br>

<br> <input type="submit" value=" 提交 "><br>

<div id=info style="color:red;padding:10px;font-size:12px;"></div>

</form>

</body>

</html>