验证码校验
对于验证码检查我们并不会陌生，我们在学习Session的时候已经使用过了验证码检查了。详细可参考：http://blog.csdn.net/hon_3y/article/details/54799494#t11
我们当时是同步检查验证码是否正确的，其实没有必要。因为就验证一个输入框的数据，没必要使用同步的方式验证【使用异步对用户体验更加友好】
分析
当用户输入完4位数字的时候，就去服务器端验证是否需要相同，如果相同，那么返回一个打钩的图片。如果不同，那么就返回一个打叉的图片
前台分析
- 绑定键盘输入事件
- 当输入数达到4的时候，就与服务器交互
- 得到服务器带过来的图片，使用DOM添加到对应的位置
后台分析
- 得到前台带过来的值
- 判断该值与Session保存的是否相同
- 根据判断值返回对应的图片
编写JSP
值得注意的是：要获取td定义的id，外边一定要套上table标签。。。我在刚开始写的时候，是没有table标签的。然后死活得不到td的标签....很烦...
<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/17
Time: 20:52
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>验证码校验</title>
<scripttype="text/javascript"src="js/ajax.js"></script>
</head>
<body>
<%--###################展示页面#############################--%>
<table>
<tr>
<td>验证码：</td>
<td><inputtype="text"id="checkCode"name="checkCode"></td>
<td><imgsrc="01_image.jsp"/></td>
<tdid="result"></td>
</tr>
</table>
<%--###################去除空格方法#############################--%>
<scripttype="text/javascript">
functiontrim(str){
//去除左边的空格
str.replace("/^\s*/","");
//去除右边的空格
str.replace("/\s*$/","");
returnstr;
}
</script>
<%--###################绑定键盘事件#############################--%>
<scripttype="text/javascript">
document.getElementById("checkCode").onkeyup=function(){
//得到输入框的内容，把的前后空格都去除
varkeyValue=this.value;
keyValue=trim(keyValue);
/*******************ajax代码*******************************/
if(keyValue.length==4){
varajax=createAJAX();
varmethod="post";
varurl="${pageContext.request.contextPath}/CheckCodeServlet?time="+newDate().getTime();
ajax.open(method,url);
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send("keyValue="+keyValue);
/*******************ajax回调函数*******************************/
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
//得到服务器带过来的数据
vartip=ajax.responseText;
/*******************使用DOM把数据添加到页面上*******************************/
varimg=document.createElement("img");
img.src=tip;
img.style.width="14px";
img.style.height="14px";
vartd=document.getElementById("result");
td.innerHTML="";
td.appendChild(img);
}
}
};
}else{
//清空图片
vartd=document.getElementById("result");
td.innerHTML="";
}
};
</script>
</body>
</html>
- 处理请求的Servlet
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
importjava.io.PrintWriter;
/**
* Created by ozc on 2017/5/17.
*/
@WebServlet(name="CheckCodeServlet",urlPatterns="/CheckCodeServlet")
publicclassCheckCodeServletextendsHttpServlet{
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//得到带过来的数据
StringkeyValue=request.getParameter("keyValue");
//得到Session中的数据
StringcheckCodeInSession=(String)request.getSession().getAttribute("CHECKNUM");
response.setContentType("text/html;charset=UTF-8");
Stringsrc="images/MsgError.gif";
//判断俩数据是否相同
if(keyValue.equals(checkCodeInSession)){
src="images/MsgSent.gif";
}
PrintWriterwriter=response.getWriter();
writer.write(src);
writer.flush();
writer.close();
}
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
this.doPost(request,response);
}
}
测试
总结
- 使用AJAX验证校验码主要是监听键盘的响应事件
- 要获取td标签的数据，外边一定要套有table标签！【别偷懒不写table标签】
- 当输入框的数值数为4的时候就与服务器进行交互，服务器返回一张图片。
- 可以用自定义的trim()把数据的前后空格去掉，通过正则表达式来去除空格。
- 当输入框的数值数不为4的时候就把图片的内容清空
