jQuery+Ajax+Servlet进行验证码校验

本篇文章主要说的是验证码的校验，使用到的有前台jsp页面+jQuery+Ajax+Servlet。

代码中都有较详细的注释，这里要交代的有两点：

1、将Ajax改为同步执行：
    Ajax代码中如果没有async:false,这一句，验证功能也能实现，之所以加上这一句是登录时的功能需要。当点击“登录”按钮时，需判断用户名、密码、验证码是否全部正确，而Ajax是异步执行的，点击登录时不能够获取到Ajax的返回值，所以调用checkCode()方法不能正确判断验证码填写是否正确。所以将Ajax改为同步执行，可获取到返回值。
2、验证码：

    验证码的标签为<img/>标签，但是src的值为"code"，其对应的是一个Servlet，该Servlet的作用就是生成一个验证码图片。有兴趣的可在另外一篇博客上看到。

    效果图：

jsp页面代码：

<tr>
	<td>
		验证码：
	</td>
	<td>
		<!--验证码输入框-->
		<input type="text" name="validate" size="5" class="text" onBlur="checkCode()"/>
		   
		<!--验证码图片，用Image流动态输出的-->
		<img class="code" alt="点击刷新" src="code" οnclick="this.src='code?s='+new Date().getTime();" >
	</td>
	<td>
		<!--验证码验证信息-->
		<div id="checkCode" class="check">*</div>
	</td>
</tr>

jQuery+Ajax代码：

/**
 * 检查验证码
 */
function checkCode() {
	var check = false;
	$.ajax( {
		type : "post",//请求方式
		url : "checkCode",//发送请求地址
		async : false,
		dataType: "html",
		data : {//发送数据
			validate : $('[name=validate]').val()
		},
		//请求成功后的回调函数有两个参数
		success : function(data,textStatus) {
			if(data=='0') {
				$("#checkCode").html("验证码错误！");
			} else {
				$("#checkCode").html("正确！");
				check = true;
			}
		}
	});
	return check;
}

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;

@SuppressWarnings("serial")
public class CheckCodeServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		String code=request.getParameter("validate");
		PrintWriter out = response.getWriter();
		if (!code.equalsIgnoreCase(request.getSession().getAttribute("code").toString())) {
			out.print(0);
		} else {
			out.print(1);
		}
		out.flush();
		out.close();
	}

}

web.xml配置代码：

  <servlet>
    <servlet-name>CheckCodeServlet</servlet-name>
    <servlet-class>servlet.CheckCodeServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>CheckCodeServlet</servlet-name>
    <url-pattern>/checkCode</url-pattern>
  </servlet-mapping>