实现同步加载验证码和用户名是否存在的判断通过Ajax

1.验证码工具类package com.syh.utils;import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.io.FileOutputStream;import java.io.IOException;import java.io.OutputStream;import java.io.PrintWriter;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class ValidateCodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {createCode(request);write(response.getOutputStream());}// 图片的宽度private int width = 160;// 图片的高度private int height = 28;// 要输入验证码的数量private int codeCount = 4;// 验证码上面的模糊线private int lineCount = 150;// 验证码，要和用户输入的对比private String code = null;private BufferedImage buffImg = null;private char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G',4000'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9' };public void createCode(HttpServletRequest request) {int x = 0, fontHeight = 0, codeY = 0;int red = 0, green = 0, blue = 0;x = width / (codeCount + 2);fontHeight = height - 2;codeY = height - 4;buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics2D g = buffImg.createGraphics();Random random = new Random();g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);Font font = new Font("Fixedsys", Font.BOLD, fontHeight);g.setFont(font);for (int i = 0; i < lineCount; i++) {int xs = random.nextInt(width);int ys = random.nextInt(height);int xe = xs + random.nextInt(width / 8);int ye = ys + random.nextInt(height / 8);red = random.nextInt(255);green = random.nextInt(255);blue = random.nextInt(255);g.setColor(new Color(red, green, blue));g.drawLine(xs, ys, xe, ye);}StringBuffer randomCode = new StringBuffer();for (int i = 0; i < codeCount; i++) {String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);red = random.nextInt(255);green = random.nextInt(255);blue = random.nextInt(255);g.setColor(new Color(red, green, blue));g.drawString(strRand, (i + 1) * x, codeY);randomCode.append(strRand);}code = randomCode.toString();HttpSession session = request.getSession();session.setAttribute("code", code);}public void write(String path) throws IOException {OutputStream sos = new FileOutputStream(path);this.write(sos);}public void write(OutputStream sos) throws IOException {ImageIO.write(buffImg, "png", sos);sos.close();}public BufferedImage getBuffImg() {return buffImg;}public String getCode() {return code;}}2.验证码使用jsp代码<form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet"><table><caption style="font-size:25px;">注册本系统用户</caption><tr><td><span>用户名</span></td><td><input type="text" name="username"/></td></tr><tr class="info"><td>提示信息</td><td><span></span></td></tr><tr><td><span>密   码</span></td><td><input type="password" name="password"/></td></tr><tr><td><span>重复密码</span></td><td><input type="password" name="repassword"/></td></tr><!-- 验证码 --><tr><td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td><td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="点击刷新验证码" onclick="getCode()" style="cursor: pointer;"/></td></tr><tr id="btn"><td align="center"><input type="submit" name="sub" value="注册"/></td></tr></table></form>js代码function getCode(){$("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="+ new Date().getTime());}3.遇到的问题    自己输入的验证码和系统通过session对象返回的验证码老是不一致，老是出现从session中取出的值是上次刷新页面的的验证码，老是不同步，在这里我是用的Ajax来实现了同步$.ajax({cache: true,type: "POST",url:ajaxCallUrl,async: false,error: function(request) {alert("Connection error");evt.preventDefault();},success: function(data) {//回调函数if("验证失败" == data){evt.preventDefault();}}});4.通过Ajax访问检查验证码是否正确的Servlet代码package com.syh.utils;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 CheckImageCodeServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String code = request.getParameter("code");String code1 = (String) request.getSession().getAttribute("code");PrintWriter writer = response.getWriter();if(code1.equals(code)){writer.write("验证成功");}else{writer.write("验证失败");}}}5.web.xml文件的配置的验证的验证码的servlet配置<servlet><servlet-name>CheckImageCodeServlet</servlet-name><servlet-class>com.syh.utils.CheckImageCodeServlet</servlet-class></servlet><servlet-mapping><servlet-name>CheckImageCodeServlet</servlet-name><url-pattern>/checkImageCodeServlet</url-pattern></servlet-mapping>========================================================================5.整个jsp页面的代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>注册用户</title><style type="text/css">html,body{padding:0px;margin:0px;height:100%;width:100%;}#main,table{width:40%;margin:0 auto;background:#DBDBDB;height:40%;}table{margin-top:20%;}table tr {height:50px;line-height:50px;}#btn button,#btn input{margin-top:50px;width:80px;height:30px;background:green;text-align:center;}.info{color:red;FILTER: alpha(opacity=0);opacity:0;height:20px;line-height:20px;}</style><script type="text/javascript" src="${pageContext.request.contextPath }/file/js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("input[name='username']").blur(function(){CheckUsername();} );})CheckUsername = function(){var username = $("input[name=username]").val();//alert(username);if($.trim(username) != ""){var username1 = $.trim(username);/*使用Ajax进行验证*/var ajaxCallUrl = '${pageContext.request.contextPath}/checkUsernameServlet?username=' + username1;$.ajax({cache: true,type: "POST",url:ajaxCallUrl,async: false,error: function(request) {alert("Connection error");},success: function(data) {//验证用户名是否已经存在//alert(data);if("no" == data){$(".info td span").html("用户名已经被占用");$(".info").css("color","red");}else{$(".info td span").html("用户名可以使用");$(".info").css("color","blue");}$(".info").css("opacity","1");}});}else{//提示用户名不能为空}}function getCode(){$("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="+ new Date().getTime());}//鼠标出输入框时验证CheckPassord = function(){var password = $("input[name=password]").val();var repassword = $("input[name=repassword]").val();if($.trim(password) != '' && $.trim(repassword) != '' && $.trim(password) == $.trim(repassword)){return 1;}else{return 0;}}function CheckForm(form,evt){var flag = 0;//验证用户是否为空if($.trim($("input[name=username]").val()) != ""){flag = 1;}//验证用户名var text = $(".info td span").html();alert(text);if(text == "用户名可以使用"){flag = 1;}else{flag = 0;}if(flag == 1){//验证密码是否相同flag = CheckPassord();if(flag ==1){//验证验证码是否正确var code = $("#code").val();var ajaxCallUrl = '${pageContext.request.contextPath}/checkImageCodeServlet?code=' + code;/*Ajax验证验证码*/$.ajax({cache: true,type: "POST",url:ajaxCallUrl,async: false,error: function(request) {alert("Connection error");evt.preventDefault();},success: function(data) {//回调函数if("验证失败" == data){evt.preventDefault();}}});}else{evt.preventDefault();}}else{evt.preventDefault();}}</script></head><body><h2>${error}</h2><div id = "main"><form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet"><table><caption style="font-size:25px;">注册本系统用户</caption><tr><td><span>用户名</span></td><td><input type="text" name="username"/></td></tr><tr class="info"><td>提示信息</td><td><span></span></td></tr><tr><td><span>密   码</span></td><td><input type="password" name="password"/></td></tr><tr><td><span>重复密码</span></td><td><input type="password" name="repassword"/></td></tr><!-- 验证码 --><tr><td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td><td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="点击刷新验证码" onclick="getCode()" style="cursor: pointer;"/></td></tr>

<tr id="btn"> <td align="center"><input type="submit" name="sub" value="注册"/></td> </tr> </table> </form> </div> </body></html>7.上面的jsp代码使用到了用户名通过Ajax进行验证是否已经存在的servletpackage com.syh.servlet;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;import com.syh.pojo.Student;import com.syh.service.StudentService;public class CheckUsernameServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String username = request.getParameter("username");PrintWriter writer = response.getWriter();if(username != null && username != ""){Student student = null;StudentService service = new StudentService();student = service.findSampleStudent(username);System.out.println("啥情况");if(student.getId() == null){System.out.println("ok");writer.write("ok");}else{//不为空的话说明拥有该用户名的学生存在System.out.println("用户名：no" + student.getUsername());writer.write("no");}}else{writer.write("no");}}}8.验证用户名是否存在的servlet的配置在web.xml<servlet><servlet-name>CheckUsernameServlet</servlet-name><servlet-class>com.syh.servlet.CheckUsernameServlet</servlet-class></servlet><servlet-mapping><servlet-name>CheckUsernameServlet</servlet-name><url-pattern>/checkUsernameServlet</url-pattern></servlet-mapping>