书签分享收藏举报版权申诉 / 8

立即下载加入VIP,免费下载

当前位置：首页 > 教学研究 > 教学计划 > Ajax+jsp无刷新验证码实例.docx

Ajax+jsp无刷新验证码实例.docx

文档编号：10339629
上传时间：2023-02-10
格式：DOCX
页数：8
大小：18.13KB

《Ajax+jsp无刷新验证码实例.docx》由会员分享，可在线阅读，更多相关《Ajax+jsp无刷新验证码实例.docx（8页珍藏版）》请在冰豆网上搜索。

Ajax+jsp无刷新验证码实例.docx

Ajax+jsp无刷新验证码实例

我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。

这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用session保存下用户输入的其它数据的话（如姓名），用户刚刚输入的内容也不存在了，这样给用户造成不好的体验。

本例在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效，这样即使用户浏览器不支持js，也不会影响他的正常使用了。

为了防止作弊，当用户连接3次输入错误时则重载一下图片，这样也利于用户因为图片上的验证码辨认不清而使终无法输入正确。

本例还特别适合检验用户名是否有效，只要从后台做个sql查询，返回一个值或是xml即可。

（这种例子太多，就在此不赘述了）。

本例的优点在于非常方便用户输入，而且减少对服务器端的请求，可以说既改善用户体验而且略会节省带宽成本，但相应地要在页面上增加一段JavaScript代码，在目前网速越来越快人们要求便捷舒适的今天，似乎我们更应注意提供给用户良好的使用感受。

代码如下，

1,img.jsp,输入主页面

<%@pagecontentType="text/html;charset=GBK"language="java"import="java.sql.*"errorPage=""pageEncoding="GBK"%>

<%

//setChineseChar

//CodybyJarryLi@;

//homepage:

request.setCharacterEncoding（"GBK"）;

response.setCharacterEncoding（"GBK"）;

response.setContentType（"text/html;charset=GBK"）;

%>

图片验证

AJAX（无刷新及时提示）验证码实例！

codybyjarry

<%

Stringnum=request.getParameter（"num"）;

Stringrandom=（String）session.getAttribute（"random"）;

Stringname=request.getParameter（"name"）;

if（num!

=null&&random!

=null&&name!

=null）

{

if（num.equals（random））

{

out.println（"

green;font-weight:

bold\">恭喜您，验证码输入成功，这里是提交结果页面，可以写入数据库了！

返回再测试
"）;

out.println（"您的名字是：

"+name）;

out.println（"
"）;

out.println（"您输入的是：

"+num）;

out.println（"验证码是：

"+random）;

out.println（""）;

return;//javascript:

history.go（-1）

}

%>

vartimes=0;

functionsubform（）{

vargtext=this.req.responseText;

varinfo=document.getElementById（"info"）;

if（gtext.indexOf（"validate_successful"）!

=-1）{

//info.innerHTML="验证码通过";

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

}

functionvalidata（obj）{

varenter=true;

varinfo=document.getElementById（"info"）;

varmsg="";

if（obj.name.value.match（/^\s*$/g））{//如果未输入名字，提示

msg+="请输入您的姓名
";enter=false

}

if（obj.num.value.match（/^\s*$/g））{//如果未输入验证码，提示

msg+="请输入验证码
";enter=false

}

if（enter==false）{

info.innerHTML=msg;

returnfalse;

}

varurl="num.jsp?

num="+obj.num.value;

varnewxmlhttp=newnet.ContentLoader（url,subform,"","get",null,null）;

returnfalse;

}

functionshow（o）{

//重载验证码

vartimenow=newDate（）.getTime（）;

o.src="random.jsp?

d="+timenow;

/*

//超时执行;

setTimeout（function（）{

o.src="random.jsp?

d="+timenow;

}

,20）;

*/

}

您的姓名：

（为了更好地说明此例，特加姓名一项）

验证码：

show（document.getElementById（'random'））">验证码看不清

red;padding:

10px;font-size:

12px;">

2,num.jsp,反馈xmlhttp请求的页面

<%@pagecontentType="text/html;charset=GBK"language="java"import="java.sql.*"errorPage=""pageEncoding="GBK"%>

<%

//setChineseChar

//CodybyJarryLi@;

//homepage:

request.setCharacterEncoding（"GBK"）;

response.setCharacterEncoding（"GBK"）;

response.setContentType（"text/html;charset=GBK"）;

%>

<%

Stringnum=request.getParameter（"num"）;

Stringrandom=（String）session.getAttribute（"random"）;

if（num!

=null&&random!

=null）

{

if（!

num.equals（random））

{

/*

out.println（""）;

//response.sendRedirect（"img.jsp"）;

*/

out.print（"validate_failed:

"+random）;

}

else

{

//out.println（"

验证成功！

"）;

out.print（"validate_successful:

"+random）;

}

%>

3,random.jsp,生成验证码图片的页面

<%@pageautoFlush="false" import="java.util.*,java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*"%>

<%

//setChineseChar

//CodybyJarryLi@;

//homepage:

request.setCharacterEncoding（"GBK"）;

response.setCharacterEncoding（"GBK"）;

response.setContentType（"text/html;charset=GBK"）;

%>

<%

Stringchose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

chardisplay[]={'0','','0','','0','','0'},ran[]={'0','0','0','0'},temp;

Randomrand=newRandom（）;

for（inti=0;i<4;i++）

{

temp=chose.charAt（rand.nextInt（chose.length（）））;

display[i*2]=temp;

ran[i]=temp;

}

Stringrandom=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）;

intwidth=80,height=30;

BufferedImageimage=newBufferedImage（width,height,BufferedImage.TYPE_INT_RGB）;

Graphicsg=image.getGraphics（）;

//以下填充背景颜色

g.setColor（Color.GREEN）;

g.fillRect（0,0,width,height）;

//设置字体颜色

g.setColor（Color.RED）;

Fontfont=newFont（"Arial",Font.PLAIN,20）;

g.setFont（font）;

//g.drawString（random,5,14）;

g.drawString（random,5,20）;

g.dispose（）;

ServletOutputStreamoutStream=response.getOutputStream（）;

JPEGImageEncoderencoder=JPEGCodec.createJPEGEncoder（outStream）;

encoder.encode（image）;

outStream.close（）;

response.flushBuffer（）;

out.clear（）;

out=pageContext.pushBody（）;

%>

4,net.js,封装好的xmlhttp对象，可以很方便的调用

/*namespacingobject*/

varnet=newObject（）;

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;

/*---contentloaderobjectforcross-browserrequests---*/

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

}

elseif（window.ActiveXObject）

{

//addtrycatch;

try{

this.req=newActiveXObject（"Msxml2.XMLHTTP"）;

}catch（e1）{

try{

this.req=newActiveXObject（"Microsoft.XMLHTTP"）;

}catch（e2）{

}

//

//this.req=newActiveXObject（"Microsoft.XMLHTTP"）;

}

if（this.req）

{

try

{

varloader=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（）{

varreq=this.req;

varready=req.readyState;

if（ready==net.READY_STATE_COMPLETE）{

varhttpStatus=req.status;

if（httpStatus==200||httpStatus==0）{

this.on_load.call（this）;

}else{

this.on_error.call（this）;

}

net.ContentLoader.prototype.defaultError=function（）{

alert（"errorfetchingdata!

"

+"\n\nreadyState:

"+this.req.readyState

+"\nstatus:

"+this.req.status

+"\nheaders:

"+this.req.getAllResponseHeaders（））;

}

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: Ajax jsp 刷新验证实例

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：Ajax+jsp无刷新验证码实例.docx
链接地址：https://www.bdocx.com/doc/10339629.html

Ajax+jsp无刷新验证码实例.docx

热门标签