web动态验证码的实现

运行结果：

如果输入错误，鼠标在输入框之外点击则

输入正确则不会显示出

点击提交跳转到成功的页面，注意此时搜索栏已经变化

算法实现
动态验证码实现首先得有一个算法。

定义一个数组用来存放生成的验证码

String ver[] = new String[62];

第一种，定义一个字符串数组，由0-9，a-z,A-Z组成，共62

public void init(){
        for(int i = 0;i < 10;i ++){
            ver[i] = new Integer(i).toString();
        }
        //97-122是a
        for(int i = 0;i < 26;i ++){
            ver[i + 10] = new Character((char)(97 + i)).toString();
        }
        //65-90是A-Z
        for(int i = 0;i < 26;i ++){
            ver[i + 36] = new Character((char)(65 + i)).toString();
        }
    }

第二种方法，生成随机的数字和字母

private String getValidateCode(){
            StringBuffer vali = new StringBuffer();
            for(int i = 0;i < 4;i ++){
                vali.append(ver[(int)(Math.random() * 36)]);        
            }
            return vali.toString();
        }

生成验证码servlet

这里用第一种方法生成验证码

生成验证码代码：

public class yzmServlet extends HttpServlet{    
    String ver[] = new String[62]   
    public void init(){
        for(int i = 0;i < 10;i ++){
            ver[i] = new Integer(i).toString();
        }
        //97-122是a
        for(int i = 0;i < 26;i ++){
            ver[i + 10] = new Character((char)(97 + i)).toString();
        }
        //65-90是A-Z
        for(int i = 0;i < 26;i ++){
            ver[i + 36] = new Character((char)(65 + i)).toString();
        }
    }

    //第二部获取绘图能力
    public void doGet(HttpServletRequest request,HttpServletResponse response){
        try {
            //设置图像输出 
            response.setContentType("image/jpeg");
            //获取输出流
            OutputStream os = response.getOutputStream();
            //在内存中准备一个image
            BufferedImage image = new BufferedImage(60,30,BufferedImage.TYPE_INT_RGB);
            Graphics g = image.getGraphics();       
            //绘图
            g.setColor(new Color(200,200,200));
            g.fillRect(0, 0, 80, 50);       
            //生成并绘制随机字符串
            String vali = "";
            for(int i = 0;i < 4;i ++){
                String v = (ver[(int)(Math.random()*36)]);
                vali += v;
                g.setColor(new Color((int)(Math.random()*150),(int)(Math.random()*150),(int)(Math.random()*150)));
                g.drawString(v, 8 * i + 10, 15);
            }
            g.dispose();            

            //创建session，设置属性
            HttpSession  session = request.getSession();
            session.setAttribute("vali", vali);

        } catch (Exception e) {
            // TODO: handle exception
        }
    }}

这个session主要是要发送验证码到进行验证的servlet比对

HttpSession  session = request.getSession();
            session.setAttribute("vali", vali);

验证的servlet

public class A extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");      
        String yzm = request.getParameter("yzm");
        String a = (String)request.getSession().getAttribute("vali");
        System.out.println(a+"==="+yzm);
        if(!(yzm.equals((String)request.getSession().getAttribute("vali")))){
            response.getWriter().write("wrong");
        }}
}

这里用到Ajax的内容

jsp页面

    <script type="text/javascript">

 function chenyang() {
        //1.获取yzm标签，并为其添加onclick响应函数
        var  yzm = document.getElementById("yzm").value
                //3.创建一个XMLHttpRequest对象
                var res = new XMLHttpRequest();
                //4.准备发送请求的数据：method 和 url
                var method = "get";
                var url = "A?yzm="+yzm
                //5.调用xmlhttprequest对象的open方法
                res.open(method, url);
                //6.调用xmlhttprequest对象的send方法
                res.send(null);
                //7.为xmlhttprequest对象添加onreadystatechange响应函数
                res.onreadystatechange = function() {
                    //8.决断响应是否完成：xmlhttprequest对象的readystate属性值为4
                    if (res.readyState == 4) {
                        //9.再决断响应是否可用：xmlhttprequest对象status属性值为200
                        if (res.status == 200) {
                            //10.打印响应结果：responseText                            
                            document.getElementById("message").innerHTML = res.responseText;
                        }
                }}
    } 
</script> 

  </head>

  <body>
     <form action="Success.jsp"  method="get">  
       验证码：<input type="text" name="yzm" id="yzm" onblur="chenyang()"> 
     <img alt="" id="Img" src="yzmServlet" onclick="this.src=this.src+'?'+Math.random();" >
    <div id="message">
    <!-- 这里接受servlet响应的结果 -->
    </div>
    <input type="submit">

    </form>
  </body>
</html>