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. 二道shell面试题

    1.按照给出的运行结果,编写一个名为xunhuan 的shell过程(用循环语句). 0 10 210 3210 43210 543210 6543210 76543210 876543210 2.编 ...

  2. python教程，文章list

    http://www.2cto.com/kf/web/Python/ http://www.v2ex.com/go/python http://www.sharejs.com/codes/python ...

  3. CC++初学者编程教程(1) Visual Stduio2010开发环境搭建

    Visual Studio是微软公司推出的开发环境.是目前最流行的Windows平台应用程序开发环境. Visual Studio 2010版本于2010年4月12日上市,其集成开发环境(IDE)的界 ...

  4. collection系列用法-defaultdict()

    defaultdict() 定义以及作用 返回一个和dictionary类似的对象,和dict不同主要体现在2个方面: 可以指定key对应的value的类型. 不必为默认值担心,换句话说就是不必担心有 ...

  5. iOS 处理方法中的可变參数

    ## iOS 处理方法中的可变參数 近期写了一个自己定义的对话框的demo,想模仿系统的UIAlertView的实现方式.对处理可变參数的时候,遇到了小问题,于是谷歌了一下.写下了处理问题的方法.记录 ...

  6. Deep Learning（深度学习）学习笔记整理系列之（八）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  7. Archlinux 安装配置指导 2015-05-24

    因为用的Linode VPS的系统是Archlinux的,想在本地弄个系统做测试用,这样比较方便.然后发现自己在6年前做的一个Archlinux 安装配置Flash,好怀念的赶脚. 时过进迁,没想到A ...

  8. Replace不区分大小写

    private string ReplaceNoCase(string text, string oldValue, string newValue) { return System.Text.Reg ...

  9. Hibernate工作流程

    Hibernate创建步骤 (五大核心接口:Configuration/SessionFactory/Session/Transaction/Query) 1.新建工程,导入需要的jar包. 2.利用 ...

  10. spring 入门篇

    spring 入门篇         相对于Hibernate(冬眠),Spring(春天),具有更多的诗意与希望的感觉,是为了解决传统J2EE开发效率过低.开发商之间不统一.没有真正实现“写一次到处 ...