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. iOS 数组里面取字典的值

    NSArray *arrData = @[@"1",@"2",@"3",@"4"]; NSArray *arrKey = ...

  2. openNebula images

  3. storage theory

    preface/prehight:topic: Storage(share fileSystem(可共享文件系统,Access I/O existence bottleNeck,access read ...

  4. 面向对象程序设计-C++_课时16子类父类关系

    初始化列表 类名::类名(形参1,形参2,...形参n):数据成员1(形参1),数据成员2(形参2),...,数据成员n(形参n) { ... } 规则1,初始化列表进行数据成员的初始化 规则2,初始 ...

  5. Oracle 11g新特性虚拟列分区

    如今有个需求:一个单据表要依照月份来分区.假设是在Oracle 10g上,仅仅能再加一个字段. 在Oracle 11g以后就不一样了.能够用虚拟列处理. SQL> select * from v ...

  6. Selector、shape详解，注意这两种图像资源都以XML方式存放在drawable不带分辨率的文件夹中

    Selector.shape详解(一) Selector的结构描述: <?xml version="1.0" encoding="utf-8"?> ...

  7. Git上手指南

    (写在最前:这篇随笔是我在学习git时参考资料+实践出来的,其中一些问题是在实践中遇到的,希望对大家有帮助,还有很多不完整的地方.如果有什么错误的地方欢迎随时向我提出来) 在Git教程之前,我们先来了 ...

  8. JDK1.7 安装加(一劳永逸的环境配置)

    1.去oracl官网下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html. ...

  9. 2014.8.30.ref,out,params,enum,递归

    (一)ref 函数形参变量的输入有两种方式:传值,传址.而ref则为传址.eg: static int Add(ref int n) { Console.WriteLine("Add---- ...

  10. ubuntu, Debian, CentOS

    ubuntu源自debian,内核很多文档都还是debian的字样,稳定性逐渐增强,基本满足日常开发. debian的核心稳定,性能强劲. centos的内核版本低,安全性高. 选择Debian是因为 ...