1、验证码文件

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>

<%!

    public Color getColor(){

        Random random = new Random();

        int r = random.nextInt(256);//0-255

        int g = random.nextInt(256);

        int b = random.nextInt(256);

        return new Color(r,g,b);

    }

    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 xl = random.nextInt(x+10);

        int yl = random.nextInt(y+10);

        g.setColor(getColor());

        g.drawLine(x, y, x + xl, y + yl);

    }

    g.setFont(new Font("serif", Font.BOLD,16));

    g.setColor(Color.BLACK);

    String checkNum = getNum();//"2525"

    StringBuffer sb = new StringBuffer();

    for(int i=0;i<checkNum.length();i++){

        sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"

    }

    g.drawString(sb.toString(),15,20);

    session.setAttribute("CHECKNUM",checkNum);//2525

    ImageIO.write(image,"jpeg",response.getOutputStream());

    out.clear();

    out = pageContext.pushBody();

%>

2、验证HTML文件

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>验证码检查</title>

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

  </head>

  <body>

    <form>

        <table border="0" align="center">

            <tr>

                <th>验证码：</th>

                <td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>

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

                <td id="res"></td>

            </tr>

        </table>

    </form>

    <script type="text/javascript">

        //去掉二边的空格

        function trim(str){"  zhaojun  "

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

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

            return str;

        }

    </script>

    <script type="text/javascript">

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

            var checkcode = this.value;

            checkcode = trim(checkcode);//2525

            if(checkcode.length == 4){

                //NO1)

                var ajax = createAJAX();

                //NO2)

                var method = "POST";

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

                ajax.open(method,url);

                //NO3)

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

                //NO4)

                var content = "checkcode=" + checkcode;

                ajax.send(content);

                //--------------------------------------------------------等待

                //NO5)

                ajax.onreadystatechange = function(){

                    if(ajax.readyState == 4){

                        if(ajax.status == 200){

                            //NO6)

                            var tip = ajax.responseText;

                            //NO7)

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

                            img.src = tip;

                            img.style.width = "14px";

                            img.style.height = "14px";

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

                            td.innerHTML = "";

                            td.appendChild(img);

                        }

                    }

                }

            }else{

                //清空图片

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

                td.innerHTML = "";

            }

        }

    </script>    

  </body>

</html>

3、java文件

package cn.itcast.javaee.js.checkcode;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;

import com.opensymphony.xwork2.ActionSupport;

/**

 * 验证码检查

 * @author AdminTC

 */

public class CheckcodeAction extends ActionSupport{

    //客户端验证码

    private String checkcode;//2525

    //注入客户端验证码

    public void setCheckcode(String checkcode) {

        this.checkcode = checkcode;

    }

    /**

     * 验证

     */

    public String check() throws Exception {

        //图片路径

        String tip = "images/MsgError.gif";

        //从服务器获取session中的验证码

        String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");

        //将客户端的验证码与服务端的验证码进行比较

        if(checkcode.equals(checkcodeServer)){

            tip = "images/MsgSent.gif";

        }

        //以IO流的方式将tip变量的值输出到AJAX异步对象中

        HttpServletResponse response = ServletActionContext.getResponse();

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

        PrintWriter pw = response.getWriter();

        pw.write(tip);

        pw.flush();

        pw.close();

        //以下方式不是最好的，但可以完成AJAX异步交互

        return null;

    }

}

4、struts文件

        <action

            name="checkRequest"

            class="cn.itcast.javaee.js.checkcode.CheckcodeAction"

            method="check">

        </action>

ajax验证码检测的更多相关文章

  1. Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  2. Struts2+Ajax实现检测用户名是否唯一

    搞了慢慢两天,终于弄明白了怎么在Struts2框架中使用Ajax检测用户名的存在了.虽然,比起那些大牛们来,这速度确实够慢的,不过,最终弄出来还是满满的成就感啊. 闲话休提,言归正传.直接上代码: A ...

  3. 【05】AJAX实例-检测用户名是否存在（实例）

    AJAX实例-检测用户名是否存在   用户注册时,需要填写个人信息,其中包括用户名.当用户输入完成时,JavaScript 需要及时检测用户名是否存在,如果存在给出提示,请用户更换用户名. 当然,这个 ...

  4. AJAX验证码检查

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

  5. 利用jQuery和Ajax实现检测用户名是否已经被注册

    这是一个jQuery和Ajax的很基础的应用,是我出去面试时的一个面试题.当时脑子有点懵想了好久才知道该怎么去实现,现在回来再看了下书好好总结一下这个东西. 首先新建一个html文件,只有简单的几行代 ...

  6. Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  7. Ajax【介绍、入门、解决Ajax中文、跨域、缓存】

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

  8. AJAX入门第一篇就够了

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

  9. ThinkPHP框架之验证码

    Think\Verify类可以支持验证码的生成和验证功能. 下面是最简单的方式生成验证码: $Verify = new \Think\Verify(); $Verify->entry(); 上面 ...

随机推荐

  1. docker 私有仓库镜像的存储位置

    docker 私有仓库的镜像 是存储在5739360d1030 registry "docker-registry" 3 days ago Up 28 hours 0.0.0.0: ...

  2. 清风注解-Swift程序设计语言:Point1～5

    目录索引 清风注解-Swift程序设计语言 Point 1. Swift 风格的"Hello, world" 代码事例: println("Hello, world&qu ...

  3. VC++2008 用空工程创建 DLL

    VC++2008 用空工程创建 DLL 一.创建 DLL 工程项目: 1)点击菜单[File] -> [New] -> [Project...] 弹出 “New Project” 对话框: ...

  4. html学习笔记一

    学习了一天,总结巩固下自己收获. html是超文本标记语言,而不是编程语言. 1:html结构 包含html标签,head标签,title标签,body标签. <html> <hea ...

  5. Largest Submatrix（动态规划）

    Largest Submatrix Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  6. MySQL数据处理函数

    数据处理函数 有时从数据库表中获取到的数据须要进行一些处理. 如将小写字母替换为对应的大写字母.这个处理过程能够在客户机上进行.也能够在数据库上进行. 数据库上进行会更高效.数据库中有对应的数据处理函 ...

  7. AngularJs (二) 搭建Deployd 服务爬坑

    Deployd 爬坑 按照书上的教程,介绍Deployd 这个东东,首先进入其deployd.com/网页,发现这个东东着实厉害. THE SIMPLEST WAY TO BUILD AN API 按 ...

  8. JavaScript之childNodes属性、nodeType属性学习

    1.childNodes属性:在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有元素,它是一个包含这个元素所有子元素的数组. <body> <script typ ...

  9. jquery validate.addMethod 正则表达式 (自定义验证方法)

    项目中使用的jQuery添加的校验的方法 $(document).ready(function(){         5           6/* 设置默认属性 */         7$.vali ...

  10. ZOJ 1563 Pearls(动态规划)

    /* 分析: 因为他给的数据是递增的 而求得是这些数据总的 最优解 所以我们可以考虑,它的子问题求解不影响总的求解 也就是我们可以先求出 第一个的最优解 第二个....以此类推到总的最优解 那么我们想 ...