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>