生成简单的 验证码

首先是生成的验证码程序

[java]  view plain copy

1. package com.cfcc.cms.verification;  
2.   
3. import java.io.IOException;  
4.   
5. import javax.servlet.ServletException;  
6. import javax.servlet.http.HttpServlet;  
7. import javax.servlet.http.HttpServletRequest;  
8. import javax.servlet.http.HttpServletResponse;  
9.   
10. public class ImageServlet extends HttpServlet{  
11.   
12.   
13.     private static final long serialVersionUID = 1L;  
14.        public void doGet(HttpServletRequest request, HttpServletResponse response)  
15.        throws ServletException, IOException {  
16.   
17.    response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片  
18.    response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容  
19.    response.setHeader("Cache-Control", "no-cache");  
20.    response.setDateHeader("Expire", 0);  
21.    RandomValidateCode randomValidateCode = new RandomValidateCode();  
22.    try {  
23.        randomValidateCode.getRandcode(request, response);//输出图片方法  
24.    } catch (Exception e) {  
25.        e.printStackTrace();  
26.    }  
27. }  
28.   
29. public void doPost(HttpServletRequest request, HttpServletResponse response)  
30.        throws ServletException, IOException {  
31.    doGet(request, response);  
32. }  
33.   
34.   
35. }  

[java]  view plain copy

1. package com.cfcc.cms.verification;  
2.   
3. import java.awt.Color;  
4. import java.awt.Font;  
5. import java.awt.Graphics;  
6. import java.awt.image.BufferedImage;  
7. import java.util.Random;  
8.   
9. import javax.imageio.ImageIO;  
10. import javax.servlet.http.HttpServletRequest;  
11. import javax.servlet.http.HttpServletResponse;  
12. import javax.servlet.http.HttpSession;  
13.   
14. public class RandomValidateCode {  
15.       public static final String RANDOMCODEKEY = "RANDOMVALIDATECODEKEY";//放到session中的key  
16.         private Random random = new Random();  
17.         private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生的字符串  
18.           
19.         private int width = 80;//图片宽  
20.         private int height = 26;//图片高  
21.         private int lineSize = 40;//干扰线数量  
22.         private int stringNum = 4;//随机产生字符数量  
23.         /* 
24.          * 获得字体 
25.          */  
26.         private Font getFont(){  
27.             return new Font("Fixedsys",Font.CENTER_BASELINE,18);  
28.         }  
29.         /* 
30.          * 获得颜色 
31.          */  
32.         private Color getRandColor(int fc,int bc){  
33.             if(fc > 255)  
34.                 fc = 255;  
35.             if(bc > 255)  
36.                 bc = 255;  
37.             int r = fc + random.nextInt(bc-fc-16);  
38.             int g = fc + random.nextInt(bc-fc-14);  
39.             int b = fc + random.nextInt(bc-fc-18);  
40.             return new Color(r,g,b);  
41.         }  
42.         /** 
43.          * 生成随机图片 
44.          */  
45.         public void getRandcode(HttpServletRequest request,  
46.                 HttpServletResponse response) {  
47.             HttpSession session = request.getSession();  
48.             //BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类  
49.             BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);  
50.             Graphics g = image.getGraphics();//产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作  
51.             g.fillRect(0, 0, width, height);  
52.             g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));  
53.             g.setColor(getRandColor(110, 133));  
54.             //绘制干扰线  
55.             for(int i=0;i<=lineSize;i++){  
56.                 drowLine(g);  
57.             }  
58.             //绘制随机字符  
59.             String randomString = "";  
60.             for(int i=1;i<=stringNum;i++){  
61.                 randomString=drowString(g,randomString,i);  
62.             }  
63.             session.removeAttribute(RANDOMCODEKEY);  
64.             session.setAttribute(RANDOMCODEKEY, randomString);  
65.             System.out.println("图片"+randomString);  
66.             g.dispose();  
67.             try {  
68.                 ImageIO.write(image, "JPEG", response.getOutputStream());//将内存中的图片通过流动形式输出到客户端  
69.             } catch (Exception e) {  
70.                 e.printStackTrace();  
71.             }  
72.         }  
73.         /* 
74.          * 绘制字符串 
75.          */  
76.         private String drowString(Graphics g,String randomString,int i){  
77.             g.setFont(getFont());  
78.             g.setColor(new Color(random.nextInt(101),random.nextInt(111),random.nextInt(121)));  
79.             String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));  
80.             randomString +=rand;  
81.             g.translate(random.nextInt(3), random.nextInt(3));  
82.             g.drawString(rand, 13*i, 16);  
83.             return randomString;  
84.         }  
85.         /* 
86.          * 绘制干扰线 
87.          */  
88.         private void drowLine(Graphics g){  
89.             int x = random.nextInt(width);  
90.             int y = random.nextInt(height);  
91.             int xl = random.nextInt(13);  
92.             int yl = random.nextInt(15);  
93.             g.drawLine(x, y, x+xl, y+yl);  
94.         }  
95.         /* 
96.          * 获取随机的字符 
97.          */  
98.         public String getRandomString(int num){  
99.             return String.valueOf(randString.charAt(num));  
100.         }  
101.   
102. }  

这里是验证码显示图片的地方

[html]  view plain copy

1. <input type="text" id="randomCode" name="randomCode"/><img title="点击更换" onclick="javascript:refresh(this);" id = "img" src="../../imageServlet"/><br/>  

这里是点击刷新图片

[html]  view plain copy

1. function refresh(obj) {  
2.                 obj.src = "../../imageServlet?"+Math.random();  
3.             }  

[html]  view plain copy

1. 这里是servlet中的配置，这样加载页面的时候直接就会加载验证码程序了，要注意上面的src要写相对路径到WEB_INF同级  

[html]  view plain copy

1. <servlet>  
2.     <servlet-name>ImageServlet</servlet-name>  
3.     <servlet-class>com.cfcc.cms.verification.ImageServlet</servlet-class>  
4.  </servlet>  
5.   
6.  <servlet-mapping>  
7.    <servlet-name>ImageServlet</servlet-name>  
8.    <url-pattern>/imageServlet</url-pattern>  
9.  </servlet-mapping>     

然后是前台jsp页面的ajax请求部分。

[javascript]  view plain copy

1. <span style="white-space:pre">          </span>function isRightCode(){  
2.                 //获取请求  
3.                 var xmlHttp = null;  
4.                 xmlHttp=GetXmlHttpObject();  
5.                       
6.                 if (xmlHttp==null){  
7.                     alert ("您的浏览器不支持AJAX！请使用IE浏览器");  
8.                     return;  
9.                 }  

[javascript]  view plain copy

1. <span style="white-space:pre">          </span>//我们需要将这部分改变下，这个就是你的输入框的id，通过jquery获取之后，将它设置为name = c 的形式，以供后台getParameter获取  
2.                 var code = $("#randomCode").attr("value");   
3.                 //alert(code);  
4.                 //发出post请求  
5.                 xmlHttp.open("POST","../../checkServlet",true);//此处的url需要找到和WEB_INF同级，否则找不到映射的  
6.                 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
7.                 code = "c="+code;  
8.                 code = encodeURI(encodeURI(code));    
9.                 //请求获取到的结果  
10.                 var result;  
11.                 xmlHttp.onreadystatechange=function(){  
12.                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200){//发送和接受都成功  
13.                         result = xmlHttp.responseText;  
14.                         result = result.replace(/(^\s*)|(\s*$)/g,'');//去掉因为网络传输出现的空格  
15.                           
16.                 //这里是业务逻辑的处理，即调用ajax之后返回的结果  
17.                         if(result == 1){  
18.                             alert("验证码为空");                       
19.                             return false;  
20.                         }else if(result == 3){  
21.                             alert("验证码不正确");  
22.                             refresh(document.getElementById("img"));  
23.                             document.getElementById("randomCode").value = "";  
24.                             return false;  
25.                         }else {  
26.                             document.form.submit();  
27.                         }  
28.                           
29.                     }else if(xmlHttp.readyState != 4){//正在处理中  
30.                         //alert("正在处理中请稍后..........");  
31.                     }else if(xmlHttp.status == 404){//未找到页面  
32.                         alert("请求页面未找到，请联系维护人员！");  
33.                         return;  
34.                     } else {//未知错误  
35.                         alert("发生未知错误"+ xmlHttp.status +"，请联系管理员！");  
36.                         return;  
37.                     }  
38.                 };  
39.                 xmlHttp.send(code);   
40.             }  
41.           //获取ajax请求  
42.             function GetXmlHttpObject(){  
43.                 var xmlHttp=null;  
44.                 try{  
45.                     // Firefox, Opera 8.0+, Safari  
46.                     xmlHttp=new XMLHttpRequest();  
47.                 }catch (e){  
48.                     // Internet Explorer  
49.                     try{  
50.                         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
51.                     }catch (e){  
52.                         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
53.                     }  
54.                 }  
55.                 return xmlHttp;  
56.             }  

这个弄好页面的处理之后，写后台的处理

[html]  view plain copy

1. package com.cfcc.cms.verification;  
2.   
3. import java.io.IOException;      
4. import javax.servlet.ServletException;      
5. import javax.servlet.http.HttpServlet;      
6. import javax.servlet.http.HttpServletRequest;      
7. import javax.servlet.http.HttpServletResponse;      
8.       
9. public class CheckServlet extends HttpServlet {      
10.     private static final long serialVersionUID = 1L;    
11.     
12.     public void doGet(HttpServletRequest request, HttpServletResponse response)      
13.             throws ServletException, IOException {      
14.       
15.         doPost(request, response);      
16.     }      
17.     public void doPost(HttpServletRequest request, HttpServletResponse response)      
18.             throws ServletException, IOException {      
19.       
20.         //response.setContentType("text/html;charset=utf-8");      
21.         String validateC = (String) request.getSession().getAttribute("RANDOMVALIDATECODEKEY");      
22.         String veryCode = request.getParameter("c");      
23.         //PrintWriter out = response.getWriter();      

[html]  view plain copy

1. //下面的就是将输出输出到页面了，即页面里的result就是这里的输出  
2.         if(veryCode==null||"".equalsIgnoreCase(veryCode)){      
3.             response.getWriter().write("1");//验证码为空  
4.         }else{      
5.             if(validateC.equalsIgnoreCase(veryCode)){     
6.                 response.getWriter().write("2");  
7.             }else{      
8.                 response.getWriter().write("3"); //验证码不正确  
9.             }      
10.         }      
11.      
12.     }      
13.       
14. }    

这个类编写好之后，要将web.xml中写上mapping

[html]  view plain copy

1.  <servlet>  
2.    <servlet-name>checkServlet</servlet-name>  
3.    <servlet-class>com.cfcc.cms.verification.CheckServlet</servlet-class>  
4.  </servlet>  
5.   
6. <servlet-mapping>  
7.   <servlet-name>checkServlet</servlet-name>  
8.   <url-pattern>/checkServlet</url-pattern>  
9. </servlet-mapping>      

这样一来，在页面验证之后，如果验证成功，则直接调用document.form.submit();就可以了。

在写这个demo的时候碰到过一个问题，就是开头我是在java程序中处理了验证码正确与否，然后拼成字符串到页面去做处理了，这样会很麻烦，所以应该返回结果去页面处理就可以了。

不要以为验证码的httpservlet和你自己提交的要写一起，实际是分开的，ajax请求的时候是单独写的一个servlet，并且是单独配置的xml。所以在处理完ajax请求之后才去调用submit方法提交后台了。