前言

对于验证码检查我们并不会陌生，我们在学习Session的时候已经使用过了验证码检查了。详细可参考：http://blog.csdn.net/hon_3y/article/details/54799494#t11

我们当时是同步检查验证码是否正确的，其实没有必要。因为就验证一个输入框的数据，没必要使用同步的方式验证【使用异步对用户体验更加友好】

分析

当用户输入完4位数字的时候，就去服务器端验证是否需要相同，如果相同，那么返回一个打钩的图片。如果不同，那么就返回一个打叉的图片

前台分析

  • 绑定键盘输入事件
  • 当输入数达到4的时候，就与服务器交互
  • 得到服务器带过来的图片，使用DOM添加到对应的位置

后台分析

  • 得到前台带过来的值
  • 判断该值与Session保存的是否相同
  • 根据判断值返回对应的图片

编写JSP

值得注意的是：要获取td定义的id，外边一定要套上table标签。。。我在刚开始写的时候，是没有table标签的。然后死活得不到td的标签….很烦…


  2. <%--
  3.   Created by IntelliJ IDEA.
  4.   User: ozc
  5.   Date: 2017/5/17
  6.   Time: 20:52
  7.   To change this template use File | Settings | File Templates.
  8. --%>
  9. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  10. <html>
  11. <head>
  12.     <title>验证码校验</title>
  13.     <script type="text/javascript" src="js/ajax.js"></script>
  14. </head>
  15. <body>
  17. <%--###################展示页面#############################--%>
  19. <table>
  20.     <tr>
  21.         <td>验证码：</td>
  22.         <td><input type="text" id="checkCode" name="checkCode"></td>
  23.         <td><img src="01_image.jsp"/></td>
  24.         <td id="result"></td>
  25.     </tr>
  26. </table>
  28. <%--###################去除空格方法#############################--%>
  29. <script type="text/javascript">
  31.     function trim(str) {
  33.         //去除左边的空格
  34.         str.replace("/^\s*/", "");
  36.         //去除右边的空格
  37.         str.replace("/\s*$/", "");
  38.         return str;
  40.     }
  41. </script>
  43. <%--###################绑定键盘事件#############################--%>
  45. <script type="text/javascript">
  47.     document.getElementById("checkCode").onkeyup = function () {
  49.         //得到输入框的内容，把的前后空格都去除
  50.         var keyValue = this.value;
  51.         keyValue = trim(keyValue);
  53.         /*******************ajax代码*******************************/
  54.         if (keyValue.length == 4) {
  56.             var ajax = createAJAX();
  57.             var method = "post";
  58.             var url = "${pageContext.request.contextPath}/CheckCodeServlet?time=" + new Date().getTime();
  59.             ajax.open(method, url);
  60.             ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  61.             ajax.send("keyValue=" + keyValue);
  63.             /*******************ajax回调函数*******************************/
  64.             ajax.onreadystatechange = function () {
  65.                 if (ajax.readyState == 4) {
  66.                     if (ajax.status == 200) {
  68.                         //得到服务器带过来的数据
  69.                         var tip = ajax.responseText;
  71.                         /*******************使用DOM把数据添加到页面上*******************************/
  72.                         var img = document.createElement("img");
  73.                         img.src = tip;
  74.                         img.style.width = "14px";
  75.                         img.style.height = "14px";
  76.                         var td = document.getElementById("result");
  77.                         td.innerHTML = "";
  78.                         td.appendChild(img);
  79.                     }
  80.                 }
  81.             };
  83.         }else {
  84.             //清空图片
  85.             var td = document.getElementById("result");
  86.             td.innerHTML = "";
  87.         }
  89.     };
  91. </script>
  93. </body>
  94. </html>
  • 处理请求的Servlet

  2. import javax.servlet.ServletException;
  3. import javax.servlet.annotation.WebServlet;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.io.PrintWriter;
  10. /**
  11.  * Created by ozc on 2017/5/17.
  12.  */
  13. @WebServlet(name = "CheckCodeServlet",urlPatterns = "/CheckCodeServlet")
  14. public class CheckCodeServlet extends HttpServlet {
  15.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         //得到带过来的数据
  18.         String keyValue = request.getParameter("keyValue");
  19.         //得到Session中的数据
  20.         String checkCodeInSession = (String) request.getSession().getAttribute("CHECKNUM");
  21.         response.setContentType("text/html;charset=UTF-8");
  23.         String src = "images/MsgError.gif";
  25.         //判断俩数据是否相同
  26.         if (keyValue.equals(checkCodeInSession)) {
  27.             src = "images/MsgSent.gif";
  28.         }
  29.         PrintWriter writer = response.getWriter();
  30.         writer.write(src);
  32.         writer.flush();
  33.         writer.close();
  35.     }
  37.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  39.         this.doPost(request, response);
  41.     }
  42. }

测试

  • 效果：测试AJAX最好不要在Chrome下测试，经常拿到缓冲。很烦！

总结

  • 使用AJAX验证校验码主要是监听键盘的响应事件

    • 要获取td标签的数据，外边一定要套有table标签！【别偷懒不写table标签】
    • 当输入框的数值数为4的时候就与服务器进行交互
    • 可以用自定义的trim()把数据的前后空格去掉
    • 当输入框的数值数不为4的时候就把图片的内容清空

AJAX验证码检查的更多相关文章

  1. ajax验证码检测

    1.验证码文件 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page conten ...

  2. AJAX异步检查，检查用户名是否存在

    AJAX异步检查,检查用户名是否存在 写法一: var xmlHttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, ...

  3. 案例（用封装的ajax函数检查用户名）

    本程序主要功能是检查用户输入的用户名是否在检查的范围之内 CheckUserName.htm代码: <head> <title></title> <scrip ...

  4. Ajax+Struts2实现验证码验证功能

    ---------------------------------------------------------------------------------------------------- ...

  5. AJAX(二)-实现验证码异步验证功能

    案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...

  6. java生成随机六位数的验证码&随机生成十位数ValidCode码，用于邮件的验证&检查是不是符合为合法的中国的手机号码

    package com.demo.test1; import java.security.NoSuchAlgorithmException; import java.security.SecureRa ...

  7. 34、JS/AJAX

      1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用   声明:服务端使用Servlet技术 一 ...

  8. thinkphp3.2 代码生成并点击验证码

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识.小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  9. AJAX应用【股票案例、验证码校验】

    一.股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 1.1服务器端分析 首先,从效果图我们可以看见很多 ...

随机推荐

  1. PACS发展历史

    最先推动 PACS发展的动力来自于传统的相机厂家.这是因为当数字化浪潮到来的时候,他们首先就意识到这对他们的产品是一个不可逆转的巨大的冲击.他们当然有着自己的优势:对各个厂家的设备连接能力有着最为清楚 ...

  2. scope引起的问题

    背景 执行mvn clean test命令提示部分包不存在,但通过eclipse的clean操作后可以执行mvn test命令 解决方法 mvn clean操作为清空编译的class文件,test的话 ...

  3. selenium+BeautifulSoup实现强大的爬虫功能

    sublime下运行 1 下载并安装必要的插件 BeautifulSoup selenium phantomjs 采用方式可以下载后安装,本文采用pip pip install BeautifulSo ...

  4. Ta-lib函数功能列表

    import tkinter as tk from tkinter import ttk import matplotlib.pyplot as plt import numpy as np impo ...

  5. python-opencv在有噪音的情况下提取图像的轮廓

    对于一般的图像提取轮廓,这篇博文介绍了一个很好的方法,但是对于有噪声的图像,并不能很好地捕获到目标物体. 比如对于我的鼠标,提取的轮廓效果并不好,因为噪声很多: 所以本文增加了去掉噪声的部分. 首先加 ...

  6. Ubuntu 环境 samba的安装&配置

    一.samba的安装: sudo apt-get install samba sudo apt-get install smbfs sudo apt-get install cifs-utils (新 ...

  7. Myeclipse去掉恶心的弹框

    错误提示: 解决方法: 把JavaScript Validator去掉.去掉的方法是:选择一个项目—-右键Properties—-Builders(排第二)—-点一下右侧会有四项—-取消第一项“Jav ...

  8. ABP 框架学习-01篇

    从来没有自己写过太多的技术性文章,博客里面的文章都是拷贝别人的东西,做一个笔记功能给自己用的.最近觉得应该写点自己的学习博客 https://aspnetboilerplate.com/ ABP框架, ...

  9. JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件

    效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...

  10. HDU 6200 2017沈阳网络赛 树上区间更新，求和

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6200 题意:给个图,有2种操作,一种是加一条无向边,二是查询u,v之间必须有的边的条数,所谓必须有的边 ...