JSP验证码学习笔记

开发 前端 后端
本文通过实例,介绍在做JSP验证码的时候为了给用户很好的体验,需要在原有验证方式基础之上增加一段js,通过xmlhttp来获取返回值,以此来验证是否有效。同时,本例还特别适合检验用户名是否有效。

1、我们在做JSP验证码的时候往往由于要反作弊,验证有时故意加入多的干扰因素,这时JSP验证码显示不很清楚,用户经常输入错误。这样不但要重新刷新页面,导致用户没有看清楚验证码而重填而不是修改,而且如果没有用session保存下用户输入的其它数据的话(如姓名),用户刚刚输入的内容也不存在了,这样给用户造成不好的体验。

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

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

4、本例还特别适合检验用户名是否有效,只要从后台做个sql查询,返回一个值或是xml即可。(这种例子太多 ,就在此不赘述了)。

5、本例的优点在于非常方便用户输入,而且减少对服务器端的请求,可以说既改善用户体验而且略会节省带宽成本,但相应地要在页面上增加一段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)
  }
}
%>

 

onsubmit="return validata(this);">
您的姓名: (为了更好地说明此例,特加姓名一项)

验 证 码:

验证码看不清




 




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

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

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

  1. namespacingobject*/varnet=newObject();net.READY_STATE_UNINITIALIZED=0;
    net.READY_STATE_LOADING=1;  
  2. net.READY_STATE_LOADED=2;net.READY_STATE_INTERACTIVE=3;  
  3. net.READY_STATE_COMPLETE=4;  
  4. contentloaderobjectforcross-browserrequests  
  5. net.ContentLoader=function(url,on_load,on_error,method,params,contentType){  
  6. this.req=null;  
  7. this.on_load=on_load;  
  8. this.on_error=(on_error)?on_error:this.defaultError;  
  9. this.loadXMLDoc(url,method,params,contentType);  
  10. }  
  11. net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){  
  12. if(!method){  
  13. method="GET";  
  14. }  
  15. if(!contentType&&method=="POST"){  
  16. contentType='application/x-www-form-urlencoded';  
  17. }  
  18. if(window.XMLHttpRequest){  
  19. this.req=newXMLHttpRequest();  
  20. }  
  21. elseif(window.ActiveXObject){  
  22. //addtrycatch;try{  
  23. this.req=newActiveXObject("Msxml2.XMLHTTP");  
  24. }  
  25. catch(e1){  
  26. try{  
  27. this.req=newActiveXObject("Microsoft.XMLHTTP");  
  28. }  
  29. catch(e2){  
  30. }  
  31. }  
  32. ////this.req=newActiveXObject("Microsoft.XMLHTTP");  
  33. }  
  34. if(this.req){  
  35. try{  
  36. varloader=this;  
  37. this.req.onreadystatechange=function(){  
  38. net.ContentLoader.onReadyState.call(loader);  
  39. }  
  40. this.req.open(method,url,true);  
  41. if(contentType){  
  42. this.req.setRequestHeader('Content-Type',contentType);  
  43. }  
  44. this.req.send(params);  
  45. }  
  46. catch(err){  
  47. this.on_error.call(this);  
  48. }  
  49. }  
  50. }net.ContentLoader.onReadyState=function(){  
  51. varreq=this.req;  
  52. varready=req.readyState;  
  53. if(ready==net.READY_STATE_COMPLETE){  
  54. varhttpStatus=req.status;  
  55. if(httpStatus==200||httpStatus==0){  
  56. this.on_load.call(this);  
  57. }  
  58. else{  
  59. this.on_error.call(this);  
  60. }  
  61. }  
  62. }net.ContentLoader.prototype.defaultError=function(){  
  63. alert("errorfetchingdata!"+"\n\nreadyState:"+this.req.readyState+"\nstatus:
    "+this.req.status+"\nheaders:"+this.req.getAllResponseHeaders());  

以上介绍JSP验证码学习笔记

【编辑推荐】

  1. JSP开发技术应用详解
  2. 详解JSP开发环境的配置
  3. JScript、Java、JavaScript和JSP总结
  4. 详解JSP开发环境的配置
  5. 详解ASP和JSP比较
责任编辑:佚名 来源: 中国IT实验室
相关推荐

2009-08-13 10:47:29

C#创建验证码

2013-06-19 10:19:59

2020-11-16 07:28:53

验证码

2009-02-09 14:17:36

2022-02-11 07:10:15

验证码

2015-03-23 17:58:04

验证码倒计时并行

2017-12-21 07:38:19

2015-09-21 15:31:05

php实现验证码

2021-01-19 10:29:34

短信验证码密码

2015-03-17 09:28:04

2011-11-02 12:43:33

2011-11-02 16:46:41

2019-06-18 07:12:25

验证码漏洞加密

2016-11-14 15:40:01

Android

2020-07-31 07:56:47

验证码

2009-12-16 15:46:41

Ruby on rai

2009-12-11 15:17:52

PHP验证码调用

2020-12-29 05:33:03

Serverless验证码架构

2016-11-08 19:19:06

点赞
收藏

51CTO技术栈公众号