澳门新葡亰平台官网下载-平台游戏app > 前端 >
据书上说ajax完成验证码功用

正文实例呈报了jsp+ajax达成的局部刷新较验验证码(onblur事件触发较验卡塔尔国。共享给大家供大家参照他事他说加以侦察,具体如下:

正文实例为我们大饱眼福了ajax落成验证码功效的切切实实代码,供我们参谋,具体内容如下

前台显示页面:

先是创制八个验证码:

welcome.jsp

<%@ page contentType="image/jpeg; charset=utf-8" 
  language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" 
  pageEncoding="UTF-8"%> 
<!-- 以上导入awt和awt.image包 --> 
<%! 
  //获取随机颜色 
  public Color getColor(){ 
   Random random = new Random(); 
   //使用rgb()随机产生颜色 
   int r = random.nextInt(256); 
   int g = random.nextInt(256); 
   int b = random.nextInt(256); 

   return new Color(r,g,b); 
  } 

  //获取随机数字 产生一个4位数 
  public String getNum(){ 
   String str = ""; 
   Random random = new Random(); 
   for(int i = 0;i < 4;i++){ 
    str += random.nextInt(10); //0-9 
   } 
   return str; 
  } 
%> 

<% 
  /* 清除缓存 */ 
  response.setHeader("pragma", "mo-cache"); 
  response.setHeader("cache-control", "no-cache"); 
  response.setDateHeader("expires", 0); 
  //产生矩形框 
  BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB); 
  //获取画笔工具 
  Graphics g = image.getGraphics(); 
  //设置矩形框的颜色 
  g.setColor(new Color(200,200,200)); 
  //设置坐标和宽高 
  g.fillRect(0, 0, 80, 30); 

  //随机产生干扰线 
  for(int i = 0;i < 30;i++){ 
   Random random = new Random(); 
   int x = random.nextInt(80); 
   int y = random.nextInt(30); 
   int x1 = random.nextInt(x + 10); 
   int y1 = random.nextInt(y + 10); 
   //设置随机颜色 
   g.setColor(getColor()); 
   //画出来 
   g.drawLine(x, y, x1, y1); 
  } 

  //字的颜色和数字 
  g.setFont(new Font("Microsoft YaHei",Font.BOLD,16)); 
  g.setColor(Color.BLACK); 
  //获取随机数字 
  String checkNum = getNum(); 

  //给字拼接空格 
  StringBuffer sb = new StringBuffer(); 
  for(int i = 0;i < checkNum.length();i++){ 
   sb.append(checkNum.charAt(i) + " "); 
  } 
  //画出数字 
  g.drawString(sb.toString(), 15, 20); 
  //存入session域中 
  session.setAttribute("CHECKNUM", checkNum); //例如1010 
  //将图像以jpeg的形式通过字节流输出 
  ImageIO.write(image, "jpeg", response.getOutputStream()); 
  //清除缓存 
  out.clear(); 
  //放入body中 
  out = pageContext.pushBody(); 
%> 
修改个人信息

function createXMLHttpRequest() {
 //&#34920;&#31034;&#24403;&#21069;&#27983;&#35272;&#22120;&#19981;&#26159;ie,&#22914;ns,firefox
 if(window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
}
function validate(field) {
 var div=document.getElementById("divbid");
// var reg=/[^A-Za-z0-9_]{7,10}/g;
 if (field.value.length != 0) {
  //&#21019;&#24314;XMLHttpRequest
  createXMLHttpRequest();
  var url = "codevalidate.jsp?authcode=" + field.value + "&#215;tamp=" + new Date().getTime();//&#21152;&#26102;&#38388;&#25139;&#38450;&#27490;&#32531;&#23384;&#37325;&#22797;
  xmlHttp.open("GET", url, true);
  //&#26041;&#27861;&#22320;&#22336;&#65292;&#22788;&#29702;&#23436;&#25104;&#21518;&#33258;&#21160;&#35843;&#29992;&#65292;&#22238;&#35843;
  xmlHttp.onreadystatechange=function() { //&#21311;&#21517;&#20989;&#25968;
   if(xmlHttp.readyState == 4) { //Ajax&#24341;&#25806;&#21021;&#22987;&#21270;&#25104;&#21151;
    if (xmlHttp.status == 200) { //http&#21327;&#35758;&#25104;&#21151;
     document.getElementById("divbid").innerHTML =xmlHttp.responseText;
    }else {
     alert("&#35831;&#27714;&#22833;&#36133;&#65292;&#38169;&#35823;&#30721;=" + xmlHttp.status);
    }
   }
  };
  //&#23558;&#21442;&#25968;&#21457;&#36865;&#21040;Ajax&#24341;&#25806;
  xmlHttp.send(null);
 }else {
   div.innerHTML="&#39564;&#35777;&#30721;&#19981;&#33021;&#20026;&#31354;&lt;&gt;"
 }
}
function reloadImage(imgurl){
 var getimagecode=document.getElementById("codeimg");
 getimagecode.src= imgurl + "?id=" + Math.random();
  var code=&lt;%=session.getAttribute("code")%&gt;;
  alert(code)
}

将验证码压缩成图片,在checkcode.jsp中援引,并在该页面中采纳ajax向服务器发送数据

输入验证码: 澳门新葡亰平台官网下载 1 看不清)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>" rel="external nofollow" > 

 <title>验证码</title> 

 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0">  
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <style type="text/css"> 
  table{ 
   margin: 100px auto; 
  } 

 </style> 
 </head> 

 <body> 
  <table border="0" align="center"> 
   <tr> 
    <td>验证码</td> 
    <td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td> 
    <td><img alt="加载失败" src="image.jsp"></td> 
    <td id="show">√√√</td> 
   </tr> 
  </table> 
 </body> 
 <script type="text/javascript"> 
  //去除空格 
  function trim(str){ 
   //从左侧开始替换空格 
   str = str.replace(/^s*/,""); 
   //从左侧开始替换空格 
   str = str.replace(/s$/,""); 
   return str; 
  } 

 </script> 

 <script type="text/javascript"> 
  //创建ajax对象 
  function createAjax(){ 
   var ajax = null; 
   try{ 
    ajax = new ActiveXObject("microsoft.xmlhttp"); 
   }catch(e){ 
    try{ 
     ajax = new XMLHttpRequest(); 
    }catch(e1){ 
     alert("请更换浏览器"); 
    } 
   } 
   return ajax; 
  } 
 </script> 


 <script type="text/javascript"> 
  document.getElementById("checkcodeID").onkeyup = function(){ 
   var checkcode = this.value; 
   //去除空格 
   checkcode = trim(checkcode); 
   if(checkcode.length == 4){ 
    //获取ajax对象 
    var ajax = createAjax(); 
    //获取去空格的内容 

    var method = "POST"; 
    var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime(); 
    //准备发送异步请求 
    ajax.open(method, url); 
    //设置请求头POST提交方式才需要 
    ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); 
    //拼接实体内容 
    var content = "checkcode=" + checkcode;     
    //发送请求 
    ajax.send(content); 

    //监听服务器状态变化 
    ajax.onreadystatechange = function(){ 
     if(ajax.readyState == 4){ 
      if(ajax.status == 200){ 
       //获取服务器内容 
       var tip = ajax.responseText; 
       //获取图片路径 然后进行放入td中 
       var img = document.createElement("img"); 
       img.src = tip; 
       img.style.width = "14px"; 
       img.style.height = "14px"; 
       var td = document.getElementById("show"); 
       td.innerHTML = ""; 
       td.appendChild(img); 
      } 
     } 
    } 

   } 

  } 
 </script> 
</html> 

发出图片页面

接下来编写服务端,采取输入的音信,推断是还是不是与验证码相互同盟,将相应的图纸的门道以输出流的不二秘技出口

authcode.jsp

public class CheckcodeServlet extends HttpServlet { 
 @Override 
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
   throws ServletException, IOException { 
  req.setCharacterEncoding("utf-8"); 
  resp.setContentType("text/html;charset=utf-8"); 
  //图片路径 
  String tip = "images/MsgError.gif"; 

  String checkcode = req.getParameter("checkcode"); 
  //测试 
  System.out.println(checkcode); 
  //获取session域中的数字 
  String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM"); 
  //判断 
  if (checkcode.equals(checkcodeService)) { 
   tip = "images/MsgSent.gif"; 
  } 
  //输出路径 
  PrintWriter pw = resp.getWriter(); 
  pw.write(tip); 
  pw.flush(); 
  pw.close(); 
 } 
} 
 255)  
   fc = 255;  
  if (bc > 255)  
   bc = 255;  
  int r = fc + random.nextInt(bc - fc);  
  int g = fc + random.nextInt(bc - fc);  
  int b = fc + random.nextInt(bc - fc);  
  return new Color(r, g, b);  
 }%> 

当输入第3个数字的时候就能够现出提醒
运维结果:

ajax动态验证页面

澳门新葡亰平台官网下载 2

codevalidate.jsp

上述就是本文的全体内容,希望对大家的上学抱有助于,也希望我们多多点拨脚本之家。

");} 
 else{ 
 out.println("验证码不正确<>");} 
%>

您可能感兴趣的篇章:

  • asp.net ajax达成无刷新验证码
  • 听说Ajax顾客名验证、服务条约加载、验证码生成的达成格局
  • Ajax完成带有验证码的局地刷新登陆分界面
  • 澳门新葡亰平台官网下载 ,Ajax和PHP正则表明式验证表单及验证码
  • PHP+Ajax验证码验证客户登入
  • thinkphp验证码的得以达成(form、ajax完成认证卡塔尔(قطر‎
  • jsp+ajax达成的风流洒脱部分刷新较验验证码(onblur事件触发较验卡塔尔(قطر‎
  • PHP生成各类大面积验证码和Ajax验证进度
  • Ajax提交表单时验证码自动验证 php后端验证码检查测量试验
  • 平台游戏app ,PHP+Ajax完结验证码的实时验证

希望本文所述对大家JSP程序设计有所协助。