首頁 > 開發者 > JSP

JSP+AJAX的驗證碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 

 

1、我們在做驗證碼的時候往往由於要反作弊，驗證有時故意加入多的幹擾因素，這時驗證碼顯示不很清楚，使用者經常輸入錯誤。這樣不但要重新重新整理頁面，導致使用者沒有看清楚驗證碼而重填而不是修改，而且如果沒有用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");

%>

<html>

<head>

<title>圖片驗證</title>

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

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

</head>
<body>

AJAX(無重新整理及時提示)驗證碼執行個體！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/">
恭喜您，驗證碼輸入成功，這裡是提交結果頁面，可以寫入資料庫了！</font> 
<a href=/"img.jsp/">返回再測試</a><br>");

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

out.println("<br>");

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

out.println("驗證碼是："+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>驗證碼通過</font>";

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

//當得到的值表示合法，則驗證碼通過。

}else{

times++;

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

info.innerHTML="接連3次輸入錯誤。更新驗證碼，請重新輸入";

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

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

times=0;

}else{

info.innerHTML="第"+times+"次驗證碼錯誤,請注意區分大小寫 ";

}

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+="請輸入您的姓名<br>";enter=false

}

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

msg+="請輸入驗證碼<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){

//重載驗證碼

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

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

/*

//逾時執行;

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> (為了更好地說明此例，特加姓名一項)<br>

驗 證 碼：<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'))">驗證碼看不清</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請求的頁面

<%@ 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('驗證碼錯誤！請重試。')</script>");

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

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

*/

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

}

else

{

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

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

}

}

%>

3、random.jsp,產生驗證碼圖片的頁面

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

//設定字型顏色

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對象，可以很方便的調用

/* 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());

}

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jsp book jsp 6161 jsp editor jsp quiz jsp language jsp tie ajax echo
相關文章
動態網頁製作技術JSP頁面顯示亂碼問題的解決
servlet、jsp跳轉(傳值)總結及URL傳參數__js
Spring Boot 最佳實務（二）整合Jsp與生產環境部署
JSP頁面列印
用JSP實現資料庫圖片的儲存與顯示執行個體
用jsp上傳圖片檔案，存貯到欄位類型為blob的流形式代碼

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More