我們?cè)谧鲵?yàn)證碼的時(shí)候往往由于要反作弊，驗(yàn)證有時(shí)故意加入多的干擾因素，這時(shí)驗(yàn)證碼顯示不很清楚，用戶經(jīng)常輸入錯(cuò)誤。這樣不但要重新刷新頁(yè)面，導(dǎo)致用戶沒有看清楚驗(yàn)證碼而重填而不是修改，而且如果沒有用session保存下用戶輸入的其它數(shù)據(jù)的話(如姓名)，用戶剛剛輸入的內(nèi)容也不存在了，這樣給用戶造成不好的體驗(yàn)。
本例在原有驗(yàn)證方式基礎(chǔ)之上增加一段js，通過(guò)xmlhttp來(lái)獲取返回值，以此來(lái)驗(yàn)證是否有效，這樣即使用戶瀏覽器不支持js，也不會(huì)影響他的正常使用了。
為了防止作弊，當(dāng)用戶連接3次輸入錯(cuò)誤時(shí)則重載一下圖片，這樣也利于用戶因?yàn)閳D片上的驗(yàn)證碼辨認(rèn)不清而使終無(wú)法輸入正確。
本例還特別適合檢驗(yàn)用戶名是否有效，只要從后臺(tái)做個(gè)sql查詢，返回一個(gè)值或是xml即可。(這種例子太多，就在此不贅述了)。
本例的優(yōu)點(diǎn)在于非常方便用戶輸入，而且減少對(duì)服務(wù)器端的請(qǐng)求，可以說(shuō)既改善用戶體驗(yàn)而且略會(huì)節(jié)省帶寬成本，但相應(yīng)地要在頁(yè)面上增加一段javascript代碼，在目前網(wǎng)速越來(lái)越快人們要求便捷舒適的 今天，似乎我們更應(yīng)注意提供給用戶良好的使用感受。
代碼如下，
4,net.js,封裝好的xmlhttp對(duì)象，可以很方便的調(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!"
+"nnreadystate:"+this.req.readystate
+"nstatus:"+this.req.status
+"nheaders:"+this.req.getallresponseheaders());
}
新聞熱點(diǎn)
疑難解答
圖片精選
