前言

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

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

分析

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

前台分析

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

后台分析

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

编写JSP

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



<%--

  Created by IntelliJ IDEA.

  User: ozc

  Date: 2017/5/17

  Time: 20:52

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>验证码校验</title>

    <script type="text/javascript" src="js/ajax.js"></script>

</head>

<body>

<%--###################展示页面#############################--%>

<table>

    <tr>

        <td>验证码：</td>

        <td><input type="text" id="checkCode" name="checkCode"></td>

        <td><img src="01_image.jsp"/></td>

        <td id="result"></td>

    </tr>

</table>

<%--###################去除空格方法#############################--%>

<script type="text/javascript">

    function trim(str) {

        //去除左边的空格

        str.replace("/^\s*/", "");

        //去除右边的空格

        str.replace("/\s*$/", "");

        return str;

    }

</script>

<%--###################绑定键盘事件#############################--%>

<script type="text/javascript">

    document.getElementById("checkCode").onkeyup = function () {

        //得到输入框的内容，把的前后空格都去除

        var keyValue = this.value;

        keyValue = trim(keyValue);

        /*******************ajax代码*******************************/

        if (keyValue.length == 4) {

            var ajax = createAJAX();

            var method = "post";

            var url = "${pageContext.request.contextPath}/CheckCodeServlet?time=" + new Date().getTime();

            ajax.open(method, url);

            ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

            ajax.send("keyValue=" + keyValue);

            /*******************ajax回调函数*******************************/

            ajax.onreadystatechange = function () {

                if (ajax.readyState == 4) {

                    if (ajax.status == 200) {

                        //得到服务器带过来的数据

                        var tip = ajax.responseText;

                        /*******************使用DOM把数据添加到页面上*******************************/

                        var img = document.createElement("img");

                        img.src = tip;

                        img.style.width = "14px";

                        img.style.height = "14px";

                        var td = document.getElementById("result");

                        td.innerHTML = "";

                        td.appendChild(img);

                    }

                }

            };

        }else {

            //清空图片

            var td = document.getElementById("result");

            td.innerHTML = "";

        }

    };

</script>

</body>

</html>
  • 处理请求的Servlet


import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

/**

 * Created by ozc on 2017/5/17.

 */

@WebServlet(name = "CheckCodeServlet",urlPatterns = "/CheckCodeServlet")

public class CheckCodeServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //得到带过来的数据

        String keyValue = request.getParameter("keyValue");

        //得到Session中的数据

        String checkCodeInSession = (String) request.getSession().getAttribute("CHECKNUM");

        response.setContentType("text/html;charset=UTF-8");

        String src = "images/MsgError.gif";

        //判断俩数据是否相同

        if (keyValue.equals(checkCodeInSession)) {

            src = "images/MsgSent.gif";

        }

        PrintWriter writer = response.getWriter();

        writer.write(src);

        writer.flush();

        writer.close();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }

}

测试

  • 效果：测试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. 关于MVC项目中的主管放行

    一线程序员和 sa 总是相恨相杀,这话确实不假,吐槽这里就不多讲,项目快开发完的时候,让之前各个模块的增删改的操作全部都先放入对应的临时表(增加一状态栏位Status,来表示增.删.改)中,然后在主管 ...

  2. java程序给short变量赋0xff报异常

    在java程序中以二进制或十六进制表示的数比如0x01默认类型为int.所以付给short类型时要强制类型转换. short q = (short) 0b1111111111111111; Syste ...

  3. 复杂DIV交错布局

    问题: 请写一段html和CSS实现图中布局: 解析: 考察实现此种效果布局的几种方式. --- 答案:TBD

  4. 【Ubuntu 16】 wifi连接 并解决无桌面图标问题

    笔记本上装了win10和ubuntu16双系统,ubuntu16有半年多没使用了,今天一登录成功后,没有桌面啦,一个干净的壁纸映入眼帘,真操蛋. 上网搜索后总结:应该是应用软件中心出了问题,可是,没法 ...

  5. Python量化投资知识总结贴

    Ricequant 量化社区的初衷让各位爱好量化的人士可以碰撞思维,在分享和争辩中学习到有用且实战的量化知识.有赖于各位在社区中贡献满满的干货以及有质量的讨论,从编程入门教学到技术指标再到多因子选股. ...

  6. 堆排序—Java

    堆排序: 一棵完全二叉树,如果父节点的值大于等于左右节点的值,则称此完全二叉树为小根堆(小顶堆):如果父节点的值小于等于左右节点的值,则次完全二叉树为大根堆(大顶堆). 堆排序是建立在大顶堆或小顶堆的 ...

  7. 基于.netstandard的权限控制组件

    基于.netstandard的权限控制组件 Intro 由于项目需要,需要在 基于 Asp.net mvc 的 Web 项目框架中做权限的控制,于是才有了这个权限控制组件. 项目基于 .NETStan ...

  8. 再起航，我的学习笔记之JavaScript设计模式17(模板方法模式)

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  9. MySQL存储引擎中的MyISAM和InnoDB区别

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...

  10. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...