首页 > 代码库 > ajax验证码检测

ajax验证码检测

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验证码检测