1、我們在做JSP驗證碼的時候往往由于要反作弊，驗證有時故意加入多的干擾因素，這時JSP驗證碼顯示不很清楚，用戶經(jīng)常輸入錯誤。這樣不但要重新刷新頁面，導(dǎo)致用戶沒有看清楚驗證碼而重填而不是修改，而且如果沒有用session保存下用戶輸入的其它數(shù)據(jù)的話(如姓名)，用戶剛剛輸入的內(nèi)容也不存在了，這樣給用戶造成不好的體驗。

2、本例在原有驗證方式基礎(chǔ)之上增加一段js，通過xmlhttp來獲取返回值，以此來驗證是否有效，這樣即使用戶瀏覽器不支持js，也不會影響他的正常使用了。

3、為了防止作弊，當(dāng)用戶連接3次輸入錯誤時則重載一下圖片，這樣也利于用戶因為圖片上的驗證碼辨認(rèn)不清而使其終無法輸入正確。

4、本例還特別適合檢驗用戶名是否有效，只要從后臺做個sql查詢，返回一個值或是xml即可。(這種例子太多 ，就在此不贅述了)。

5、本例的優(yōu)點在于非常方便用戶輸入，而且減少對服務(wù)器端的請求，可以說既改善用戶體驗而且略會節(jié)省帶寬成本，但相應(yīng)地要在頁面上增加一段JavaScript代碼，在目前網(wǎng)速越來越快人們要求便捷舒適的今天，似乎我們更應(yīng)注意提供給用戶良好的使用感受。

代碼如下：

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("
恭喜您，驗證碼輸入成功，這里是提交結(jié)果頁面，可以寫入數(shù)據(jù)庫了！ 
返回再測試
");
  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對象，可以很方便的調(diào)用

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());  
} 

以上介紹JSP驗證碼學(xué)習(xí)筆記

【編輯推薦】

1. JSP開發(fā)技術(shù)應(yīng)用詳解
2. 詳解JSP開發(fā)環(huán)境的配置
3. JScript、Java、JavaScript和JSP總結(jié)
4. 詳解JSP開發(fā)環(huán)境的配置
5. 詳解ASP和JSP比較