1、验证码文件
<%@ 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-255 int 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); 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.setAttribute("CHECKNUM",checkNum);//2525 ImageIO.write(image,"jpeg",response.getOutputStream()); out.clear(); out = pageContext.pushBody(); %>
2、验证HTML文件
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>验证码检查</title> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <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"/> <td id="res"></td> </tr> </table> </form> <script type="text/javascript"> //去掉二边的空格 function trim(str){" zhaojun " str = str.replace(/^s*/,"");//"zhaojun " str = str.replace(/s*$/,"");//"zhaojun" return str; } </script> <script type="text/javascript"> document.getElementById("checkcodeID").onkeyup = function(){ var checkcode = this.value; checkcode = trim(checkcode);//2525 if(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> </body> </html>
3、java文件
package cn.itcast.javaee.js.checkcode; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; /** * 验证码检查 * @author AdminTC */ public class CheckcodeAction extends ActionSupport{ //客户端验证码 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; } }
4、struts文件
<action name="checkRequest" class="cn.itcast.javaee.js.checkcode.CheckcodeAction" method="check"> </action>