jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)
本文实例讲述了jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验)。分享给大家供大家参考，具体如下：
前台显示页面:
welcome.jsp
<%@pagelanguage="java"contentType="text/html;utf-8"
pageEncoding="utf-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>修改个人信息</title>
<script>
functioncreateXMLHttpRequest(){
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
}
functionvalidate(field){
vardiv=document.getElementById("divbid");
//varreg=/[^A-Za-z0-9_]{7,10}/g;
if(field.value.length!=0){
//创建XMLHttpRequest
createXMLHttpRequest();
varurl="codevalidate.jsp?authcode="+field.value+"×tamp="+newDate().getTime();//加时间戳防止缓存重复
xmlHttp.open("GET",url,true);
//方法地址，处理完成后自动调用，回调
xmlHttp.onreadystatechange=function(){//匿名函数
if(xmlHttp.readyState==4){//Ajax引擎初始化成功
if(xmlHttp.status==200){//http协议成功
document.getElementById("divbid").innerHTML=xmlHttp.responseText;
}else{
alert("请求失败，错误码="+xmlHttp.status);
}
}
};
//将参数发送到Ajax引擎
xmlHttp.send(null);
}else{
div.innerHTML="<divclass=\"wrong\">验证码不能为空</div>"
}
}
functionreloadImage(imgurl){
vargetimagecode=document.getElementById("codeimg");
getimagecode.src=imgurl+"?id="+Math.random();
varcode=<%=session.getAttribute("code")%>;
alert(code)
}
</script>
</head>
<body>
<formaction="authcode.jsp"method="post"name="loginform">
输入验证码：<inputtype="text"name="authcode"id="authcode"maxlength="4"size="10"onblur="validate(this)"><spanid="divbid"></span>
<imgid="codeimg"name="codeimg"border=0src="authcode.jsp">
<ahref="javascript:reloadImage('authcode.jsp')">看不清</a><br/>
</form>
<scriptlanguage="javascript"type="text/javascript">
functionreloadImage(imgurl){
vargetimagecode=document.getElementById("codeimg");
getimagecode.src=imgurl+"?id="+Math.random();
varcode=<%=session.getAttribute("code")%>;
alert(code)
}
</script>
</body>
</html>
产生图片页面
authcode.jsp
<%@pagecontentType="image/JPEG"
import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"
pageEncoding="GBK"%>
<%!ColorgetRandColor(intfc,intbc){//给定范围获得随机颜色
Randomrandom=newRandom();
if(fc>255)
fc=255;
if(bc>255)
bc=255;
intr=fc+random.nextInt(bc-fc);
intg=fc+random.nextInt(bc-fc);
intb=fc+random.nextInt(bc-fc);
returnnewColor(r,g,b);
}%>
<%
//设置页面不缓存
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires",0);
//在内存中创建图象
intwidth=60,height=20;
BufferedImageimage=newBufferedImage(width,height,
BufferedImage.TYPE_INT_RGB);
//获取图形上下文
Graphicsg=image.getGraphics();
//生成随机类
Randomrandom=newRandom();
//设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0,0,width,height);
//设定字体
g.setFont(newFont("TimesNewRoman",Font.PLAIN,18));
//画边框
//g.setColor(newColor());
//g.drawRect(0,0,width-1,height-1);
//随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for(inti=0;i<100;i++){
intx=random.nextInt(width);
inty=random.nextInt(height);
intxl=random.nextInt(12);
intyl=random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}
//取随机产生的认证码(4位数字)
StringsRand="";
for(inti=0;i<4;i++){
Stringrand=String.valueOf(random.nextInt(10));
sRand+=rand;
//将认证码显示到图象中
g.setColor(newColor(20+random.nextInt(110),20+random
.nextInt(110),20+random.nextInt(110)));//调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(rand,13*i+6,16);
System.out.println(rand);
}
//将认证码存入SESSION
session.setAttribute("code",sRand);
//图象生效
g.dispose();
//输出图象到页面
ImageIO.write(image,"JPEG",response.getOutputStream());
%>
ajax动态验证页面
codevalidate.jsp
<%@pagelanguage="java"import="java.util.*,java.util.*,java.text.*,com.neusoft.xkxt.dao.*,com.neusoft.xkxt.bean.*,com.neusoft.xkxt.util.*"pageEncoding="UTF-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
Stringauthcode=request.getParameter("authcode");
Stringcode=(String)session.getAttribute("code");
if(authcode.equals(code)){
out.println("<divclass='right'>√</div>");}
else{
out.println("<divclass='wrong'>验证码不正确</div>");}
%>
希望本文所述对大家JSP程序设计有所帮助。