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. c++ new长度为0的数组

    在程序中发现一下代码: int CHmcVideoMgt ::OnGetDiskRunningInfo( SOCKETPARAM *pSocketInfo ,Json:: Value Param ) ...

  2. 用showModalDialog写的简单弹出框传参与反参

    vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) sURL -- 必选参数,类型:字符串.用来指定对话框要 ...

  3. mysql 语句练习

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  4. 在mac上访问自带服务器权限问题

    在开发中,有时候我们需要自己的在电脑上做一些网络相关的测试功能,因此,我们必须在本地上模拟网络环境. 在模拟网络环境中,经常会遇到访问权限的问题.现在我就把自己的解决办法写出来.我用的模拟服务器站点是 ...

  5. The Hardest Problem Ever（字符串）

    The Hardest Problem Ever Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24039   Accept ...

  6. Android Resource介绍和使用

    1. 相关文件夹介绍 文件 取值方式 string.xml getResource().getString(resourceId)或者getResource().getText(resourceId) ...

  7. Android 开发佳站3

    eclipse 某些java文件乱码 摘要: [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/archive/2013/04/24/3040219.h ...

  8. Android入门第十六篇之Style与Theme [转]

    本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 越来越多互联网企业都在Android平台上部署其客户端,为了提升用户体验,这些客户端都做得布局合理而且美观.. ...

  9. 分布式ElasticSearch简单介绍

    这里我们解释一些通用的术语,比如集群(cluster).节点(node)和分片(shard).Elasticsearch的扩展机制,以及它怎样处理硬件故障.在此将探索怎样创建你的集群(cluster) ...

  10. hive 行转列 并添加虚列

    select regexp_extract(a.col2,'(phonenum=\")(.*?)\"',2) user_device, regexp_extract(a.col13 ...