DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> AJAX+jsp無刷新驗證碼實例
AJAX+jsp無刷新驗證碼實例
編輯:AJAX基礎知識     
  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=do

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved