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. 一个SysLog实现

    http://www.ice.com/java/syslog/index.shtml http://alvinalexander.com/servlets

  2. ARM Cortex-M3内核的巨大优势

    ARM Cortex-M3相比于ARM其他系列微控制器,具有以下优势或特点: 1. 三级流水线+分支预测 ARM Cortex-M3与ARM7内核一样,采用适合于微控制器应用的三级流水线,但增加了分支 ...

  3. 简易对象垃圾回收框架 for Delphi

    (一).缘起 1.1 我的一个出错程序 程序名称:呼叫处理模块的压力测试工具,分为客户端和服务端. 开发工具:Delhpi 5 相关技术:客户端通过与服务端建立Socket连接来模拟一组电话机的拨入. ...

  4. Windows Azure 社区新闻综述（#70 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 ·   如何选择 No ...

  5. hdu 1210_（逻辑训练）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 #include<stdio.h> int main() { int n,t,sum ...

  6. html---textarea初始化时就有个table空格以及tab键操作无效

    1 初始化时就有一个tab空格 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnJlZUFwZQ==/font/5a6L5L2T/fontsize/400 ...

  7. 一个可无限伸缩且无ABA问题的无锁队列

    关于无锁队列,详细的介绍请参考陈硕先生的<无锁队列的实现>一文.然进一步,如何实现一个不限node数目即能够无限伸缩的无锁队列,即是本文的要旨. 无锁队列有两种实现形式,分别是数组与链表. ...

  8. ViEmu for VS2013-3.2.1 破解(转)

    ViEmuVS2013-3.2.1 破解   VS升级到2013后,作为一个Vimer,自然需要更新最新的ViEmu插件,因为现在离了Vim,写代码已经寸步难行了. ViEmu 3.2.1的破解其实和 ...

  9. Chain of Responsibility模式

    熟悉VC/MFC的都知道,VC是“基于消息,事件驱动”,消息在VC开发中起着举足轻重的作用.MFC提供了消息的处理的链式处理策略,处理消息的请求将沿着预定好的路径依次进行处理.消息的发送者并不知道该消 ...

  10. leetcode two sum python

    class Solution: # @param {integer[]} nums # @param {integer} target # @return {integer[]} def twoSum ...