CheckCodeServlet :
package web; import java.awt.Color; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; public class CheckCodeServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("image/jpeg"); // 图片的内存映像 BufferedImage image = new BufferedImage(60, 20, BufferedImage.TYPE_INT_RGB); Random r = new Random(); // 获得画笔对象 Graphics g = image.getGraphics(); g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255))); g.fillRect(0, 0, 60, 20); g.setColor(new Color(0,0,0)); String number = String.valueOf(r.nextInt(99999)); //将验证码写入session HttpSession session = request.getSession(); session.setAttribute("checodeNum", number); g.drawString(number, 5, 15); // 压缩成jpeg格式 OutputStream os = response.getOutputStream(); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os); // 把BufferedImage对象中的图像信息编码后 // 向创建该对象(encoder)时指定的输出流输出 encoder.encode(image); } }
ActionServlet:
package web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String uri = request.getRequestURI(); String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); try { //Thread.sleep(10000); } catch (Exception e) { e.printStackTrace(); } if(path.equals("/valiusername")){ System.out.println("valiusername..."); if(1==2) throw new ServletException("some error"); String username = request.getParameter("username"); System.out.println("username:" + username); if(username.equals("zs")){ out.println("用户名已经被占用"); }else{ out.println("用户名可以使用"); } }else if(path.equals("/valicheckcode")){ String number1 = request.getParameter("number"); String number2 = (String) request.getSession() .getAttribute("checodeNum"); if(!number1.equals(number2)){ out.println("验证码出错"); }else{ out.println("验证码正确"); } }else if(path.equals("/regist")){ System.out.println("insert data to db!"); out.println("<h1>regist success!</h1>"); } } }ajax.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <title>Insert title here</title> <script type="text/javascript" src="js/prototype1.6.js"></script> <script type="text/javascript"> function getXmlHttpRequest(){ //获得xmlHttpRequest var xmlHttpRequest = null; if ((typeof XMLHttpRequest) != 'undefined') { // FF xmlHttpRequest = new XMLHttpRequest(); }else { xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp'); } return xmlHttpRequest; } //访问服务器,查看该用户名是否可用 function valiusername(){ //获得XmlHttpRequest对象 var xmlReq = getXmlHttpRequest(); //发送请求 xmlReq.open("get","valiusername.do?username=" + $F("username"),true); //注册一个回调函数 xmlReq.onreadystatechange=function(){ //处理服务器返回的数据,只有当服务器的数据全部返回以后,才需要处理。 if(xmlReq.readyState == 4){ if(xmlReq.status == 200){ var info = xmlReq.responseText; $('username_msg').innerHTML=info; }else{ $('username_msg').innerHTML='要访问的组件出错'; } }else{ $('username_msg').innerHTML='正在验证...'; } }; xmlReq.send(null); } function valiusername2(){ var xmlReq = getXmlHttpRequest(); xmlReq.open("post","valiusername.do",true); xmlReq.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange=function(){ if(xmlReq.readyState == 4){ if(xmlReq.status == 200){ var info = xmlReq.responseText; $('username_msg').innerHTML=info; }else{ $('username_msg').innerHTML='要访问的组件出错'; } }else{ $('username_msg').innerHTML='正在验证...'; } }; xmlReq.send("username=" + $F('username')); } function valicheckcode(){ var xmlReq = getXmlHttpRequest(); xmlReq.open('post','valicheckcode.do',true); xmlReq.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange=function(){ if(xmlReq.readyState == 4){ var info = xmlReq.responseText; $('checkcode_msg').innerHTML= info; } }; xmlReq.send("number=" + $F('number')); } </script> </head> <body style="font-size:30pt;"> <form action="regist.do" method="post"> <fieldset> <legend> regist </legend> username: <input type="text" name="username" id="username" οnblur="valiusername();" /> <span style="color:red;" id="username_msg"></span> <br /> password: <input type="password" name="pwd" /> <br /> checkcode:<img src="checkcode" id="img1"/> <a href="javascript:;" οnclick="document.getElementById('img1').src='checkcode?' + (new Date().getTime())">change</a> <input type="text" name="number" id="number" οnblur="valicheckcode();"/> <span style="color:red;" id="checkcode_msg"></span> <br/> <input type="submit" value="confirm" /> </fieldset> </form> </body> </html>