AJAX+jsp無刷新驗證碼實例

2024-09-05 00:20:40

字體：大中小

來源：轉載

供稿：網友

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

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

　　為了防止作弊，當用戶連接3次輸入錯誤時則重載一下圖片，這樣也利于用戶因為圖片上的驗證碼辨認不清而使終無法輸入正確?！?/p>

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

　　本例的優點在于非常方便用戶輸入，而且減少對服務器端的請求，可以說既改善用戶體驗而且略會節省帶寬成本，但相應地要在頁面上增加一段javascript代碼，在目前網速越來越快人們要求便捷舒適的　今天，似乎我們更應注意提供給用戶良好的使用感受?！?/p>

　　代碼如下，

　　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!"
+"nnreadystate:"+this.req.readystate
+"nstatus:"+this.req.status
+"nheaders:"+this.req.getallresponseheaders());
}