用Ajax制作带图形验证码的登录页面

Steel.Ma技术                                                                                  用 Ajax制作带图形验证码的登录页面  1    i                  用 Ajax 制作带图形验 证码的登录页面              作者：Steel.Ma Mail： steel.ma@139.com steel.ma@tom.com MSN： Motorola_8088@hotmail.com Blog： http://hi.csdn.net/iamsteelma http://blog.sina.com.cn/steelma       Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  2    一、前言  在本笔记的前篇《自定义标签制作》中，已经详细描述了环境的配置以及一 个最简单的自定义标签的制作方法，本篇将讲如何制作一个最常用的，带参数的 自定义的标签。 本处，为了使用图形界面，必须先下载 kaptcha 图形验证组件，可以在 http://code.google.com/p/kaptcha/  下载。目前最新版本是 2.3 版。 二、配置 Kaptcha的使用环境  Kaptcha 的配置是非常简单的，将其释放出来后，在文件夹下会有 Kaptcha-2.3.jar和 Kaptcha-2.3-jdk1.4.jar 2个 jar包，如果用的是 JDK1.4， 则必须用后者，JDK1.5 开始，用前者。 Kaptcha 安装也比较简单，直接拷贝到 webapps/xxx/web-inf/lib 下即可。然后 修改 web.xml，加入对 Kaptcha 的映射配置 Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  3    Kaptcha com.google.code.kaptcha.servlet.KaptchaServlet Kaptcha /kaptcha.jpg 以上就完成了对 Kaptcha 的配置。使用起来也很方便，在 html/jsp 中，直接用 即可显示图形验证码图片，在 servlet 中，调用 String xxx = (String) request.getSession() .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY) 即可取得真实的验证码文本。 三、编写登录页面  本次编写的登陆页面将引入 Ajax 机制。 Ajax 机制的要点在于 XMLHttpRequest，通过 XMLHttpRequest 可以实现异步 调用，有回调机制，再配合 DOM 等可以实现局部刷新等功能。我们先编写一个通 用的 Ajax 头部代码： //===通用 ajax 头=============================================== var XMLHttpReq = false; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  4    XMLHttpReq = new ActiveXObject("Msxm12.XMLHTTP"); }catch(e){ try{ XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } } //=============================================================== 然后，我们编写一个调用 XMLHttpRequest 将信息发送给服务端的和函数 //发送函数 function sendRequest(url){ createXMLHttpRequest(); XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = processResponse; //定义回调函数 XMLHttpReq.send(null); } 注意以上代码中的这句： XMLHttpReq.onreadystatechange = processResponse 这句语句定义了消息返回的回调函数，现在我们实现这个函数 //服务端回调函数 function processResponse(){ if(XMLHttpReq.readyState == 4){ //判断对象状态 Å 这是固定的返回值，4 为正常 if(XMLHttpReq.status == 200){ //消息已经成功返回，开始处理消息 var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data; window.alert(res); }else{ //页面不正常 window.alert("你所请求的页面有异常" + XMLHttpReq.status); Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  5    } } } 定义 form 的 html 代码忽略，以下列调用函数 //调用函数 function userCheck(){ var username = document.forms[0].username.value; var password = document.forms[0].password.value; var checkit = document.forms[0].checkit.value; if(username==""){ window.alert("用户名不能为空"); document.forms[0].username.focus(); return false; }else{ sendRequest('servlets/Login?username='+username+'&password='+password+'&checkit='+check it);//发送Å 这是关键 } } 以下为 login.jsp 的全部代码 <%@ page language="java" import="javax.servlet.*,javax.servlet.http.*,java.io.*,java.util.*,java.sql.*,javax.naming.C ontext,javax.naming.InitialContext,javax.sql.*"%> <%@ taglib uri="/mytaglib" prefix="mm" %> Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  6   

Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  8   

用户名:
密  码:
验证码:	（大小写不敏感）

四、编写 servlet  代码如下： import java.io.IOException; import java.io.PrintWriter; Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  9    import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.code.kaptcha.Constants; public class Login extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("LoginAjaxAction"); req.setCharacterEncoding("UTF-8"); String username = req.getParameter("username"); String password = req.getParameter("password"); String checkit = req.getParameter("checkit"); String kaptchaExpected = (String) req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); Å 这 是关键 resp.setContentType("text/xml;charset=UTF-8"); resp.setHeader("Cache-Control", "no-cache"); PrintWriter out = resp.getWriter(); out.println(""); if(username.equals("admin")&&password.equals("admin")&&checkit.equalsIgnoreCase(kaptcha Expected)){ out.println("热烈的欢迎您!"); Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  10    }else{ out.println("对不起，登陆失败"); } out.println(""); out.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } } 五、部署与测试  部署没有太多问题，与前面几篇笔记一样，只需修改 web.xml，配置 Servlet 即可。 调用 login.jsp，效果如下： Steel.Ma技术笔记                                                                                  用 Ajax制作带图形验证码的登录页面  11    输入正确内容后，页面不转到 servlet，直接由回调函数接收返回值：