亚洲色婷婷一区二区三区,亚洲日韩一区二区三区,精品亚洲AV无码一区二区三区

AJAX+jsp無(wú)刷新驗(yàn)證碼實(shí)例

【導(dǎo)讀】本文通過(guò)實(shí)例，介紹在做驗(yàn)證碼的時(shí)候?yàn)榱私o用戶很好的體驗(yàn)，需要在原有驗(yàn)證方式基礎(chǔ)之上增加一段js，通過(guò)xmlhttp來(lái)獲取返回值，以此來(lái)驗(yàn)證是否有效。同時(shí)，本例還特別適合檢驗(yàn)用戶名是否有效。

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

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

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

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

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

代碼如下：

1、img.jsp,輸入主頁(yè)面

																<%@ 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");

%>

<html>

<head>

<title>圖片驗(yàn)證</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script src="net.js"></script>

</head>
																<body>

AJAX(無(wú)刷新及時(shí)提示)驗(yàn)證碼實(shí)例！cody by jarry

<hr>

<%

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("<font style=\"color:green;font-weight:bold\">
																恭喜您，驗(yàn)證碼輸入成功，這里是提交結(jié)果頁(yè)面，可以寫(xiě)入數(shù)據(jù)庫(kù)了！</font> 
																<a href=\"img.jsp\">返回再測(cè)試</a><br>");

out.println("您的名字是："+name);

out.println("<br>");

out.println("您輸入的是："+num);

out.println("驗(yàn)證碼是："+random);

out.println("</body>");

return;//javascript:history.go(-1)

}

}

%>

<script type="text/javascript">

var times=0;

function subform(){

var gtext=this.req.responseText;

var info=document.getElementById("info");

if(gtext.indexOf("validate_successful")!=-1){

//info.innerHTML="<font color=green>驗(yàn)證碼通過(guò)</font>";

document.forms["myform"].submit();

//當(dāng)?shù)玫降闹当硎竞戏ǎ瑒t驗(yàn)證碼通過(guò)。

}else{

times++;

if(times>=3){//如果連接3次輸入錯(cuò)誤，則重載圖片，可以防止作弊和用戶看不清圖片;

info.innerHTML="接連3次輸入錯(cuò)誤。更新驗(yàn)證碼，請(qǐng)重新輸入";

document.forms["myform"].num.value="";

show(document.getElementById('random'));

times=0;

}else{

info.innerHTML="第"+times+"次驗(yàn)證碼錯(cuò)誤,請(qǐng)注意區(qū)分大小寫(xiě) ";

}

document.forms["myform"].num.select();

}
																}

function validata(obj){

var enter=true;

var info=document.getElementById("info");

var msg="";

if(obj.name.value.match(/^\s*$/g)){//如果未輸入名字，提示

msg+="請(qǐng)輸入您的姓名<br>";enter=false

}

if(obj.num.value.match(/^\s*$/g)){//如果未輸入驗(yàn)證碼，提示

msg+="請(qǐng)輸入驗(yàn)證碼<br>";enter=false? 

}

if(enter==false){

info.innerHTML=msg;

return false;

}

var url="num.jsp?num="+obj.num.value;

var newxmlhttp=new net.ContentLoader(url,subform,"","get",null,null); 

return false;

}

function show(o){

//重載驗(yàn)證碼

var timenow = new Date().getTime();

o.src="random.jsp?d="+timenow;

/*

//超時(shí)執(zhí)行;

setTimeout(function(){

o.src="random.jsp?d="+timenow;

}

,20);

*/

}

</script>

<form action="img.jsp" name="myform" method="post"
																onsubmit="return validata(this);">

您的姓名：<input type="text" name="name" size=10> (為了更好地說(shuō)明此例，特加姓名一項(xiàng))<br>

驗(yàn) 證 碼：<input type="text" name="num" size=10 maxlength="4"> 
																<img src="random.jsp" id="random" align="" valign="absmiddle" hspace="5"> 
																<a href="javascript:show(document.getElementById('random'))">驗(yàn)證碼看不清</a><br>

<br> <input type="submit" value=" 提交 "><br>

<div id=info style="color:red;padding:10px;font-size:12px;"></div>

</form>

</body>

</html>

2、num.jsp,反饋xmlhttp請(qǐng)求的頁(yè)面

																<%@ 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");

%>

<%

String num=request.getParameter("num");

String random=(String)session.getAttribute("random");
																if(num!=null&&random!=null)

{

if(!num.equals(random))

{

/*

out.println("<script>alert('驗(yàn)證碼錯(cuò)誤！請(qǐng)重試。')</script>");

out.println("<script>history.go(-1)</script>");

//response.sendRedirect("img.jsp");

*/

out.print("validate_failed:"+random);

}

else

{

//out.println("<center>驗(yàn)證成功！</center>");

out.print("validate_successful:"+random);

}

}

%>

3、random.jsp,生成驗(yàn)證碼圖片的頁(yè)面

																
com.sun.image.codec.jpeg.*,java.util.*" %>]]>
																<%@ page autoFlush="false"? import="java.util.*,java.awt.*,
																java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %>
																<%

//set Chinese Char 

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>

<%

String chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
																char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp;
																Random rand=new Random();
																for(int i=0;i<4;i++)

{
																temp=chose.charAt(rand.nextInt(chose.length()));
																display[i*2]=temp;
																ran[i]=temp;

}



String random=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);

int width=80, height=30;

BufferedImage image = new BufferedImage(width, height, 
																BufferedImage.TYPE_INT_RGB);

Graphics g = image.getGraphics();

//以下填充背景顏色

g.setColor(Color.GREEN);

g.fillRect(0, 0, width, height);

//設(shè)置字體顏色

g.setColor(Color.RED);

Font font=new Font("Arial",Font.PLAIN,20);

g.setFont(font);

//g.drawString(random,5,14);

g.drawString(random,5,20);

g.dispose();

ServletOutputStream outStream = response.getOutputStream();

JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);

encoder.encode(image);

outStream.close();

%>

4、net.js,封裝好的xmlhttp對(duì)象，可以很方便的調(diào)用

																/* namespacing object */

var net=new Object();



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;

/*--- content loader object for cross-browser requests ---*/

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=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

//add try catch;

try {

this.req = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e1){

try {

this.req = new ActiveXObject("Microsoft.XMLHTTP");???? 

} catch (e2){

}

}

//

//this.req=new ActiveXObject("Microsoft.XMLHTTP");

}

if (this.req)

{

try

{

var loader=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(){

var req=this.req;

var ready=req.readyState;

if (ready==net.READY_STATE_COMPLETE){

var httpStatus=req.status;

if (httpStatus==200 || httpStatus==0){

this.on_load.call(this);

}else{

this.on_error.call(this);

}

}

}

net.ContentLoader.prototype.defaultError=function(){

alert("error fetching data!"

+"\n\nreadyState:"+this.req.readyState

+"\nstatus: "+this.req.status

+"\nheaders: "+this.req.getAllResponseHeaders());

}

（責(zé)任編輯火鳳凰 sunsj@51cto.com? TEL：（010）68476636-8007）

posted on 2006-12-11 14:55 SIMONE 閱讀(2257) 評(píng)論(2) 編輯收藏所屬分類: JAVA 、JSP 、AJAX

常用鏈接

留言簿(46)

隨筆分類(476)

隨筆檔案(495)

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: java keytool證書(shū)工具使用小結(jié) Java 和 HTTP 的那些事（二）使用代理使用embeded tomcat進(jìn)行嵌入式j(luò)avaee開(kāi)發(fā)－啟動(dòng)tomcat java修改static final常量值 Max MQTT connections HDFS配置Kerberos認(rèn)證 Benchmarking Apache Kafka: 2 Million Writes Per Second (On Three Cheap Machines) Kafka 高性能吞吐揭秘 JAVA實(shí)現(xiàn)gif圖片縮放與剪切功能基于Redis實(shí)現(xiàn)分布式鎖