java web的验证码编写和运用

首先明白验证码其实就是一张图片，只需运用相关java的awt包一些方法画出来，然后以imag流形式输出即可。当然图片中的字符串是保存在Session中的，同时一般情况下验证的提交方式都是无刷新（即Ajax）。

现在先在jsp中画一张图片，把图片中的文字保存到Session中同时整体以jpeg图片形式输出。具体代码实现如下（命名image.jsp）：

<%@ 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-255int 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);//画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中session.setAttribute("CHECKNUM",checkNum);//2525//显示图片ImageIO.write(image,"jpeg",response.getOutputStream());/*由于jsp container在处理完成请求后会调用releasePageContet方法释放         所用的PageContext object,并且同时调用getWriter方法,由于getWriter方法         与在jsp页面中使用流相关的getOutputStream方法冲突,所以会造成这种异常,         解决办法是:只需要在jsp页面的最后加上两条语句: */out.clear();out = pageContext.pushBody();%><strong></strong>

以上jsp页面运行效果如图：

然后另开一个jsp用来提交表单，表单效果图：

实现代码：

<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" onclick="this.src='01_image.jsp?refresh='+Math.random()"/></td><td id="res"></td></tr></table></form>

这里设计成当填写完4个字符（验证码4个字符）时就自动进行验证，利用Ajax。这里是结合Struts2，JQuery（也有不用Jquery版）进行编写：

js版本一（不用Jquery时候）代码：

<script type="text/javascript">//去掉二边的空格function trim(str){               //"  zhaojun  "str = str.replace(/^\s*/,"");//"zhaojun  " str = str.replace(/\s*$/,"");//"zhaojun"return str; }//创建AJAX异步对象，即XMLHttpRequestfunction createAJAX(){var ajax = null;try{ajax = new ActiveXObject("microsoft.xmlhttp");}catch(e1){try{ajax = new XMLHttpRequest();}catch(e2){alert("你的浏览器不支持ajax，请更换浏览器");}}return ajax;}document.getElementById("checkcodeID").onkeyup = function(){var checkcode = this.value;checkcode = trim(checkcode);//2525if(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>

js版本二（用Jquery的时候）代码：

<script type="text/javascript">//去掉二边的空格function trim(str) { //"  zhaojun  "str = str.replace(/^\s*/, "");//"zhaojun  " str = str.replace(/\s*$/, "");//"zhaojun"return str;}$(document).ready(function() {$("#checkcodeID").keyup(function() {var $checkcode = $(this).val();$checkcode = trim($checkcode);//2525if($checkcode.length==4){ $.ajax( {type    : "POST",url     : "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime(),data    : {"checkcode":$checkcode},dataType :"text",success : function(backDate,textStatus,ajax){//alert(backDate!=null?"收到":"为收到");//alert(backDate);//alert(ajax.responseText);//$("td").filter("#res").append(img);$("#res").html(" "); $("#res").append("<img src='"+backDate+"'  style='width:15px;height:15px;'/>");  } } );}else{  $("#res").html(" ");}});})</script>

Struts.xml文件配置（留意result那里是没有的）：

<package name="myPackage" extends="json-default" namespace="/"><action name="checkRequest" class="com.lmk.checkCodeP.CheckcodeAction" method="check"></action></package>

Action的代码：

//客户端验证码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;}

运行效果：