浅谈用jQuery兑现无刷新验证码

浅谈用jQuery实现无刷新验证码

1.思路:

页面上的验证码图片是servlet,采用jquery实现异步校验信息

?

2.所用到的文件

VerifyCodeServlet.java?? --用于生成图片的servlet

ResultServlet.java????????? --用于校验验证码正确性的servlet

verifyCode.js????????????????? --校验的js文件

jquery.js???????????????????????? --jquery包里的源文件

verifyCode.jsp??????????????? --页面

?

3.代码

1. VerifyCodeServlet.java? ??
2. Java代码? ?import?java.awt.Color;??????? ?
3. import?java.awt.Font;??????? ?import?java.awt.Graphics2D;??????? ?
4. import?java.awt.image.BufferedImage;??????? ?import?java.util.Random;??????? ?
5. ?????? ?import?javax.imageio.ImageIO;??????? ?
6. import?javax.servlet.ServletException;??????? ?import?javax.servlet.ServletOutputStream;??????? ?
7. import?javax.servlet.http.HttpServlet;??????? ?import?javax.servlet.http.HttpServletRequest;??????? ?
8. import?javax.servlet.http.HttpServletResponse;??????? ?import?javax.servlet.http.HttpSession;??????? ?
9. ?????? ?public?class?VerifyCodeServlet?extends?HttpServlet?{??????? ?
10. ?????? ?????//?验证码图片的宽度。??????? ?
11. ????private?int?width?=?60;??????? ??????? ?
12. ????//?验证码图片的高度。??????? ?????private?int?height?=?20;??????? ?
13. ?????? ?????//?验证码字符个数??????? ?
14. ????private?int?codeCount?=?4;??????? ??????? ?
15. ????private?int?x?=?0;??????? ??????? ?
16. ????//?字体高度??????? ?????private?int?fontHeight;??????? ?
17. ?????? ?????private?int?codeY;??????? ?
18. ?????? ?????char[]?codeSequence?=?{?'A',?'B',?'C',?'D',?'E',?'F',?'G',?'H',?'I',?'J',??????? ?
19. ????????????'K',?'L',?'M',?'N',?'O',?'P',?'Q',?'R',?'S',?'T',?'U',?'V',?'W',??????? ?????????????'X',?'Y',?'Z',?'0',?'1',?'2',?'3',?'4',?'5',?'6',?'7',?'8',?'9'?};??????? ?
20. ?????? ?????/**????? ?
21. ?????*?初始化验证图片属性????? ??????*/?????? ?
22. ????public?void?init()?throws?ServletException?{??????? ?????????//?从web.xml中获取初始信息??????? ?
23. ????????//?宽度??????? ?????????String?strWidth?=?this.getInitParameter("width");??????? ?
24. ????????//?高度??????? ?????????String?strHeight?=?this.getInitParameter("height");??????? ?
25. ????????//?字符个数??????? ?????????String?strCodeCount?=?this.getInitParameter("codeCount");??????? ?
26. ?????? ?????????//?将配置的信息转换成数值??????? ?
27. ????????try?{??????? ?????????????if?(strWidth?!=?null?&&?strWidth.length()?!=?0)?{??????? ?
28. ????????????????width?=?Integer.parseInt(strWidth);??????? ?????????????}??????? ?
29. ????????????if?(strHeight?!=?null?&&?strHeight.length()?!=?0)?{??????? ?????????????????height?=?Integer.parseInt(strHeight);??????? ?
30. ????????????}??????? ?????????????if?(strCodeCount?!=?null?&&?strCodeCount.length()?!=?0)?{??????? ?
31. ????????????????codeCount?=?Integer.parseInt(strCodeCount);??????? ?????????????}??????? ?
32. ????????}?catch?(NumberFormatException?e)?{??????? ?????????}??????? ?
33. ?????? ?????????x?=?width?/?(codeCount?+?1);??????? ?
34. ????????fontHeight?=?height?-?2;??????? ?????????codeY?=?height?-?4;??????? ?
35. ?????? ?????}??????? ?
36. ?????? ?????protected?void?service(HttpServletRequest?req,?HttpServletResponse?resp)??????? ?
37. ????????????throws?ServletException,?java.io.IOException?{??????? ??????? ?
38. ????????//?定义图像buffer??????? ?????????BufferedImage?buffImg?=?new?BufferedImage(width,?height,??????? ?
39. ????????????????BufferedImage.TYPE_INT_RGB);??????? ?????????Graphics2D?g?=?buffImg.createGraphics();??????? ?
40. ?????? ?????????//?创建一个随机数生成器类??????? ?
41. ????????Random?random?=?new?Random();??????? ??????? ?
42. ????????//?将图像填充为白色??????? ?????????g.setColor(Color.WHITE);??????? ?
43. ????????g.fillRect(0,?0,?width,?height);??????? ??????? ?
44. ????????//?创建字体，字体的大小应该根据图片的高度来定。??????? ?????????Font?font?=?new?Font("Fixedsys",?Font.PLAIN,?fontHeight);??????? ?
45. ????????//?设置字体。??????? ?????????g.setFont(font);??????? ?
46. ?????? ?????????//?画边框。??????? ?
47. ????????g.setColor(Color.BLACK);??????? ?????????g.drawRect(0,?0,?width?-?1,?height?-?1);??????? ?
48. ?????? ?????????//?随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。??????? ?
49. ????????g.setColor(Color.BLACK);??????? ?????????for?(int?i?=?0;?i?<?160;?i++)?{??????? ?
50. ????????????int?x?=?random.nextInt(width);??????? ?????????????int?y?=?random.nextInt(height);??????? ?
51. ????????????int?xl?=?random.nextInt(12);??????? ?????????????int?yl?=?random.nextInt(12);??????? ?
52. ????????????g.drawLine(x,?y,?x?+?xl,?y?+?yl);??????? ?????????}??????? ?
53. ?????? ?????????//?randomCode用于保存随机产生的验证码，以便用户登录后进行验证。??????? ?
54. ????????StringBuffer?randomCode?=?new?StringBuffer();??????? ?????????int?red?=?0,?green?=?0,?blue?=?0;??????? ?
55. ?????? ?????????//?随机产生codeCount数字的验证码。??????? ?
56. ????????for?(int?i?=?0;?i?<?codeCount;?i++)?{??????? ?????????????//?得到随机产生的验证码数字。??????? ?
57. ????????????String?strRand?=?String.valueOf(codeSequence[random.nextInt(36)]);??????? ?????????????//?产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。??????? ?
58. ????????????red?=?random.nextInt(255);??????? ?????????????green?=?random.nextInt(255);??????? ?
59. ????????????blue?=?random.nextInt(255);??????? ??????? ?
60. ????????????//?用随机产生的颜色将验证码绘制到图像中。??????? ?????????????g.setColor(new?Color(red,?green,?blue));??????? ?
61. ????????????g.drawString(strRand,?(i?+?1)?*?x,?codeY);??????? ??????? ?
62. ????????????//?将产生的四个随机数组合在一起。??????? ?????????????randomCode.append(strRand);??????? ?
63. ????????}??????? ?????????//?将四位数字的验证码保存到Session中。??????? ?
64. ????????HttpSession?session?=?req.getSession();??????? ?????????session.setAttribute("validateCode",?randomCode.toString());??????? ?
65. ?????? ?????????//?禁止图像缓存。??????? ?
66. ????????resp.setHeader("Pragma",?"no-cache");??????? ?????????resp.setHeader("Cache-Control",?"no-cache");??????? ?
67. ????????resp.setDateHeader("Expires",?0);??????? ??????? ?
68. ????????resp.setContentType("image/jpeg");??????? ??????? ?
69. ????????//?将图像输出到Servlet输出流中。??????? ?????????ServletOutputStream?sos?=?resp.getOutputStream();??????? ?
70. ????????ImageIO.write(buffImg,?"jpeg",?sos);??????? ?????????sos.close();??????? ?
71. ????}??????? ??????? ?
72. }???? ?import?java.awt.Color;???? ?
73. import?java.awt.Font;???? ?import?java.awt.Graphics2D;???? ?
74. import?java.awt.image.BufferedImage;???? ?import?java.util.Random;???? ?
75. ??? ?import?javax.imageio.ImageIO;???? ?
76. import?javax.servlet.ServletException;???? ?import?javax.servlet.ServletOutputStream;???? ?
77. import?javax.servlet.http.HttpServlet;???? ?import?javax.servlet.http.HttpServletRequest;???? ?
78. import?javax.servlet.http.HttpServletResponse;???? ?import?javax.servlet.http.HttpSession;???? ?
79. ??? ?public?class?VerifyCodeServlet?extends?HttpServlet?{???? ?
80. ??? ?????//?验证码图片的宽度。???? ?
81. ????private?int?width?=?60;???? ???? ?
82. ????//?验证码图片的高度。???? ?????private?int?height?=?20;???? ?
83. ??? ?????//?验证码字符个数???? ?
84. ????private?int?codeCount?=?4;???? ???? ?
85. ????private?int?x?=?0;???? ???? ?
86. ????//?字体高度???? ?????private?int?fontHeight;???? ?
87. ??? ?????private?int?codeY;???? ?
88. ??? ?????char[]?codeSequence?=?{?'A',?'B',?'C',?'D',?'E',?'F',?'G',?'H',?'I',?'J',???? ?
89. ????????????'K',?'L',?'M',?'N',?'O',?'P',?'Q',?'R',?'S',?'T',?'U',?'V',?'W',???? ?????????????'X',?'Y',?'Z',?'0',?'1',?'2',?'3',?'4',?'5',?'6',?'7',?'8',?'9'?};???? ?
90. ??? ?????/**??? ?
91. ?????*?初始化验证图片属性??? ??????*/??? ?
92. ????public?void?init()?throws?ServletException?{???? ?????????//?从web.xml中获取初始信息???? ?
93. ????????//?宽度???? ?????????String?strWidth?=?this.getInitParameter("width");???? ?
94. ????????//?高度???? ?????????String?strHeight?=?this.getInitParameter("height");???? ?
95. ????????//?字符个数???? ?????????String?strCodeCount?=?this.getInitParameter("codeCount");???? ?
96. ??? ?????????//?将配置的信息转换成数值???? ?
97. ????????try?{???? ?????????????if?(strWidth?!=?null?&&?strWidth.length()?!=?0)?{???? ?
98. ????????????????width?=?Integer.parseInt(strWidth);???? ?????????????}???? ?
99. ????????????if?(strHeight?!=?null?&&?strHeight.length()?!=?0)?{???? ?????????????????height?=?Integer.parseInt(strHeight);???? ?
100. ????????????}???? ?????????????if?(strCodeCount?!=?null?&&?strCodeCount.length()?!=?0)?{???? ?
101. ????????????????codeCount?=?Integer.parseInt(strCodeCount);???? ?????????????}???? ?
102. ????????}?catch?(NumberFormatException?e)?{???? ?????????}???? ?
103. ??? ?????????x?=?width?/?(codeCount?+?1);???? ?
104. ????????fontHeight?=?height?-?2;???? ?????????codeY?=?height?-?4;???? ?
105. ??? ?????}???? ?
106. ??? ?????protected?void?service(HttpServletRequest?req,?HttpServletResponse?resp)???? ?
107. ????????????throws?ServletException,?java.io.IOException?{???? ???? ?
108. ????????//?定义图像buffer???? ?????????BufferedImage?buffImg?=?new?BufferedImage(width,?height,???? ?
109. ????????????????BufferedImage.TYPE_INT_RGB);???? ?????????Graphics2D?g?=?buffImg.createGraphics();???? ?
110. ??? ?????????//?创建一个随机数生成器类???? ?
111. ????????Random?random?=?new?Random();???? ???? ?
112. ????????//?将图像填充为白色???? ?????????g.setColor(Color.WHITE);???? ?
113. ????????g.fillRect(0,?0,?width,?height);???? ???? ?
114. ????????//?创建字体，字体的大小应该根据图片的高度来定。???? ?????????Font?font?=?new?Font("Fixedsys",?Font.PLAIN,?fontHeight);???? ?
115. ????????//?设置字体。???? ?????????g.setFont(font);???? ?
116. ??? ?????????//?画边框。???? ?
117. ????????g.setColor(Color.BLACK);???? ?????????g.drawRect(0,?0,?width?-?1,?height?-?1);???? ?
118. ??? ?????????//?随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。???? ?
119. ????????g.setColor(Color.BLACK);???? ?????????for?(int?i?=?0;?i?<?160;?i++)?{???? ?
120. ????????????int?x?=?random.nextInt(width);???? ?????????????int?y?=?random.nextInt(height);???? ?
121. ????????????int?xl?=?random.nextInt(12);???? ?????????????int?yl?=?random.nextInt(12);???? ?
122. ????????????g.drawLine(x,?y,?x?+?xl,?y?+?yl);???? ?????????}???? ?
123. ??? ?????????//?randomCode用于保存随机产生的验证码，以便用户登录后进行验证。???? ?
124. ????????StringBuffer?randomCode?=?new?StringBuffer();???? ?????????int?red?=?0,?green?=?0,?blue?=?0;???? ?
125. ??? ?????????//?随机产生codeCount数字的验证码。???? ?
126. ????????for?(int?i?=?0;?i?<?codeCount;?i++)?{???? ?????????????//?得到随机产生的验证码数字。???? ?
127. ????????????String?strRand?=?String.valueOf(codeSequence[random.nextInt(36)]);???? ?????????????//?产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。???? ?
128. ????????????red?=?random.nextInt(255);???? ?????????????green?=?random.nextInt(255);???? ?
129. ????????????blue?=?random.nextInt(255);???? ???? ?
130. ????????????//?用随机产生的颜色将验证码绘制到图像中。???? ?????????????g.setColor(new?Color(red,?green,?blue));???? ?
131. ????????????g.drawString(strRand,?(i?+?1)?*?x,?codeY);???? ???? ?
132. ????????????//?将产生的四个随机数组合在一起。???? ?????????????randomCode.append(strRand);???? ?
133. ????????}???? ?????????//?将四位数字的验证码保存到Session中。???? ?
134. ????????HttpSession?session?=?req.getSession();???? ?????????session.setAttribute("validateCode",?randomCode.toString());???? ?
135. ??? ?????????//?禁止图像缓存。???? ?
136. ????????resp.setHeader("Pragma",?"no-cache");???? ?????????resp.setHeader("Cache-Control",?"no-cache");???? ?
137. ????????resp.setDateHeader("Expires",?0);???? ???? ?
138. ????????resp.setContentType("image/jpeg");???? ???? ?
139. ????????//?将图像输出到Servlet输出流中。???? ?????????ServletOutputStream?sos?=?resp.getOutputStream();???? ?
140. ????????ImageIO.write(buffImg,?"jpeg",?sos);???? ?????????sos.close();???? ?
141. ????}???? ???? ?
142. }?? ??
143. ??
144. ??
145. ResultServlet.java? ??
146. ?Java代码? ?
147. import?java.io.IOException;??????? ?import?java.io.PrintWriter;??????? ?
148. ?????? ?import?javax.servlet.ServletException;??????? ?
149. import?javax.servlet.http.HttpServlet;??????? ?import?javax.servlet.http.HttpServletRequest;??????? ?
150. import?javax.servlet.http.HttpServletResponse;??????? ??????? ?
151. public?class?ResultServlet?extends?HttpServlet?{??????? ??????? ?
152. ????/**????? ??????*?The?doGet?method?of?the?servlet.?<br>????? ?
153. ?????*????? ??????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?get.????? ?
154. ?????*?????? ??????*?@param?request?the?request?send?by?the?client?to?the?server????? ?
155. ?????*?@param?response?the?response?send?by?the?server?to?the?client????? ??????*?@throws?ServletException?if?an?error?occurred????? ?
156. ?????*?@throws?IOException?if?an?error?occurred????? ??????*/?????? ?
157. ????public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)??????? ?????????????throws?ServletException,?IOException?{??????? ?
158. ?????? ?????????doPost(request,?response);??????? ?
159. ????}??????? ??????? ?
160. ????/**????? ??????*?The?doPost?method?of?the?servlet.?<br>????? ?
161. ?????*????? ??????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?post.????? ?
162. ?????*?????? ??????*?@param?request?the?request?send?by?the?client?to?the?server????? ?
163. ?????*?@param?response?the?response?send?by?the?server?to?the?client????? ??????*?@throws?ServletException?if?an?error?occurred????? ?
164. ?????*?@throws?IOException?if?an?error?occurred????? ??????*/?????? ?
165. ????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)??????? ?????????????throws?ServletException,?IOException?{??????? ?
166. ?????? ?????????response.setContentType("text/html;charset=utf-8");??????? ?
167. ????????String?validateC?=?(String)?request.getSession().getAttribute("validateCode");??????? ?????????String?veryCode?=?request.getParameter("c");??????? ?
168. ????????PrintWriter?out?=?response.getWriter();??????? ?????????if(veryCode==null||"".equals(veryCode)){??????? ?
169. ????????????out.println("验证码为空");??????? ?????????}else{??????? ?
170. ????????????if(validateC.equals(veryCode)){??????? ?????????????????out.println("验证码正确");??????? ?
171. ????????????}else{??????? ?????????????????out.println("验证码错误");??????? ?
172. ????????????}??????? ?????????}??????? ?
173. ????????out.flush();??????? ?????????out.close();??????? ?
174. ????}??????? ??????? ?
175. }???? ?import?java.io.IOException;???? ?
176. import?java.io.PrintWriter;???? ???? ?
177. import?javax.servlet.ServletException;???? ?import?javax.servlet.http.HttpServlet;???? ?
178. import?javax.servlet.http.HttpServletRequest;???? ?import?javax.servlet.http.HttpServletResponse;???? ?
179. ??? ?public?class?ResultServlet?extends?HttpServlet?{???? ?
180. ??? ?????/**??? ?
181. ?????*?The?doGet?method?of?the?servlet.?<br>??? ??????*??? ?
182. ?????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?get.??? ??????*???? ?
183. ?????*?@param?request?the?request?send?by?the?client?to?the?server??? ??????*?@param?response?the?response?send?by?the?server?to?the?client??? ?
184. ?????*?@throws?ServletException?if?an?error?occurred??? ??????*?@throws?IOException?if?an?error?occurred??? ?
185. ?????*/??? ?????public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)???? ?
186. ????????????throws?ServletException,?IOException?{???? ???? ?
187. ????????doPost(request,?response);???? ?????}???? ?
188. ??? ?????/**??? ?
189. ?????*?The?doPost?method?of?the?servlet.?<br>??? ??????*??? ?
190. ?????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?post.??? ??????*???? ?
191. ?????*?@param?request?the?request?send?by?the?client?to?the?server??? ??????*?@param?response?the?response?send?by?the?server?to?the?client??? ?
192. ?????*?@throws?ServletException?if?an?error?occurred??? ??????*?@throws?IOException?if?an?error?occurred??? ?
193. ?????*/??? ?????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)???? ?
194. ????????????throws?ServletException,?IOException?{???? ???? ?
195. ????????response.setContentType("text/html;charset=utf-8");???? ?????????String?validateC?=?(String)?request.getSession().getAttribute("validateCode");???? ?
196. ????????String?veryCode?=?request.getParameter("c");???? ?????????PrintWriter?out?=?response.getWriter();???? ?
197. ????????if(veryCode==null||"".equals(veryCode)){???? ?????????????out.println("验证码为空");???? ?
198. ????????}else{???? ?????????????if(validateC.equals(veryCode)){???? ?
199. ????????????????out.println("验证码正确");???? ?????????????}else{???? ?
200. ????????????????out.println("验证码错误");???? ?????????????}???? ?
201. ????????}???? ?????????out.flush();???? ?
202. ????????out.close();???? ?????}???? ?
203. ??? ?}?? ?
204. ??
205. ??
206. ?verifyCode.js? ?
207. ?Java代码? ?
208. function?changeImg(){??? ?????var?imgSrc?=?$("#imgObj");??? ?
209. ????var?src?=?imgSrc.attr("src");??? ?????imgSrc.attr("src",chgUrl(src));??? ?
210. }??? ?//时间戳??? ?
211. //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳??? ?function?chgUrl(url){??? ?
212. ????var?timestamp?=?(new?Date()).valueOf();??? ?????urlurl?=?url.substring(0,17);??? ?
213. ????if((url.indexOf("&")>=0)){??? ?????????urlurl?=?url?+?"×tamp="?+?timestamp;??? ?
214. ????}else{??? ?????????urlurl?=?url?+?"?timestamp="?+?timestamp;??? ?
215. ????}??? ?????return?url;??? ?
216. }??? ??? ?
217. function?isRightCode(){??? ?????var?code?=?$("#veryCode").attr("value");??? ?
218. ????code?=?"c="?+?code;??? ?????$.ajax({??? ?
219. ????????type:"POST",??? ?????????url:"resultServlet",??? ?
220. ????????data:code,??? ?????????success:callback??? ?
221. ????});??? ?}??? ?
222. ?? ?function?callback(data){??? ?
223. ????$("#info").html(data);??? ?}?? ?
224. function?changeImg(){ ??var?imgSrc?=?$("#imgObj"); ?
225. ?var?src?=?imgSrc.attr("src"); ??imgSrc.attr("src",chgUrl(src)); ?
226. } ?//时间戳 ?
227. //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳 ?function?chgUrl(url){ ?
228. ?var?timestamp?=?(new?Date()).valueOf(); ??urlurl?=?url.substring(0,17); ?
229. ?if((url.indexOf("&")>=0)){ ???urlurl?=?url?+?"×tamp="?+?timestamp; ?
230. ?}else{ ???urlurl?=?url?+?"?timestamp="?+?timestamp; ?
231. ?} ??return?url; ?
232. } ??
233. function?isRightCode(){ ??var?code?=?$("#veryCode").attr("value"); ?
234. ?code?=?"c="?+?code; ??$.ajax({ ?
235. ??type:"POST", ???url:"resultServlet", ?
236. ??data:code, ???success:callback ?
237. ?}); ?} ?
238. ?function?callback(data){ ?
239. ?$("#info").html(data); ?} ?
240. ??
241. ?verifyCode.jsp? ?
242. ?Java代码? ?
243. <%@?page?language="java"?contentType="text/html;?charset=UTF-8"????? ?????pageEncoding="UTF-8"%>????? ?
244. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">????? ?<html>????? ?
245. ????<head>????? ?????????<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">????? ?
246. ????????<script?type="text/javascript"?src="js/verifyCode.js"></script>????? ?????????<script?type="text/javascript"?src="js/jquery.js"></script>????? ?
247. ????????<title>test?verify?code</title>????? ?????</head>????? ?
248. ????<body>????? ?????????<input?id="veryCode"?name="veryCode"?type="text"/>????? ?
249. ????????<img?id="imgObj"?alt=""?src="verifyCodeServlet"/>????? ?????????<a?href="#"?onclick="changeImg()">换一张</a>????? ?
250. ????????<input?type="button"?value="验证"?onclick="isRightCode()"/>????? ?????????<div?id="info"></div>????? ?
251. ????</body>????? ?</html>???? ?
252. [url]http://www.javaeye.com/post/608953#[/url]????