ajax+jsp實現(xiàn)無刷新驗證碼實例

goman · 發(fā)表于 2013-8-28 16:29

3我們在做驗證碼的時候往往由于要反作弊，驗證有時故意加入多的干擾因素，這時驗證碼顯示不很清楚，用戶經(jīng)常輸入錯誤。這樣不但要重新刷新頁面，導(dǎo)致用戶沒有看清楚驗證碼而重填而不是修改，而且如果沒有用session保存下用戶輸入的其它數(shù)據(jù)的話(如姓名)，用戶剛剛輸入的內(nèi)容也不存在了，這樣給用戶造成不好的體驗。本例在原有驗證方式基礎(chǔ)之上增加一段js，通過xmlhttp來獲取返回值，以此來驗證是否有效，這樣即使用戶瀏覽器不支持js，也不會影響他的正常使用了。為了防止作弊，當(dāng)用戶連接3次輸入錯誤時則重載一下圖片，這樣也利于用戶因為圖片上的驗證碼辨認不清而使終無法輸入正確。本例還特別適合檢驗用戶名是否有效，只要從后臺做個sql查詢，返回一個值或是xml即可。(這種例子太多，就在此不贅述了)。本例的優(yōu)點在于非常方便用戶輸入，而且減少對服務(wù)器端的請求，可以說既改善用戶體驗而且略會節(jié)省帶寬成本，但相應(yīng)地要在頁面上增加一段
<%@ 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);
  }
}
%>
<%@ 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=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();
%>

/* 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!"
+"

readyState:"+this.req.readyState
+"
status: "+this.req.status
+"
headers: "+this.req.getAllResponseHeaders());
} </p

› 智能家居 / NAS / 路由 / 開發(fā) / 音響 › TV應(yīng)用開發(fā)交流

ajax+jsp實現(xiàn)無刷新驗證碼實例

ajax+jsp實現(xiàn)無刷新驗證碼實例