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

《用Ajax制作带图形验证码的登录页面》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Steel.Ma技术笔记用Ajax制作带图形验证码的登录页面i用Ajax制作带图形验证码的登录页面作者：Steel.MaMail：steel.ma@139.comsteel.ma@tom.comMSN：Motorola_8088@hotmail.comBlog：http://hi.csdn.net/iamsteelmahttp://blog.sina.com.cn/steelma1Steel.Ma技术笔记用Ajax制作带图形验证码的登录页面一、前言在本笔记的前篇《自定义标签制作》中，已经详细描述了环境的配置以及一个最简单的自定义标签的制作方法，本篇将讲如何制作一个最常用的，带参数的自定义

2、的标签。本处，为了使用图形界面，必须先下载kaptcha图形验证组件，可以在http://code.google.com/p/kaptcha/下载。目前最新版本是2.3版。二、配置Kaptcha的使用环境Kaptcha的配置是非常简单的，将其释放出来后，在文件夹下会有Kaptcha-2.3.jar和Kaptcha-2.3-jdk1.4.jar2个jar包，如果用的是JDK1.4，则必须用后者，JDK1.5开始，用前者。Kaptcha安装也比较简单，直接拷贝到webapps/xxx/web-inf/lib下即可。然后修改web.xml，加入对Kaptcha的映射配置2St

3、eel.Ma技术笔记用Ajax制作带图形验证码的登录页面Kaptchacom.google.code.kaptcha.servlet.KaptchaServletKaptcha/kaptcha.jpg以上就完成了对Kaptcha的配置。使用起来也很方便，在html/jsp

4、中，直接用即可显示图形验证码图片，在servlet中，调用Stringxxx=(String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY)即可取得真实的验证码文本。三、编写登录页面本次编写的登陆页面将引入Ajax机制。Ajax机制的要点在于XMLHttpRequest，通过XMLHttpRequest可以实现异步调用，有回调机制，再配合DOM等可以实现局部刷新等功能。我们先编写一个通用的Ajax头部代码：//==

5、=通用ajax头===============================================varXMLHttpReq=false;functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){XMLHttpReq=newXMLHttpRequest();}elseif(window.ActiveXObject){try{3Steel.Ma技术笔记用Ajax制作带图形验证码的登录页面XMLHttpReq=newActiveXObject("Msxm12.XMLHTTP");}catch(e){try{XMLHttpRe

6、q=newActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}}//===============================================================然后，我们编写一个调用XMLHttpRequest将信息发送给服务端的和函数//发送函数functionsendRequest(url){createXMLHttpRequest();XMLHttpReq.open("GET",url,true);XMLHttpReq.onreadystatechange=processResponse;//定义回调函数

7、XMLHttpReq.send(null);}注意以上代码中的这句：XMLHttpReq.onreadystatechange=processResponse这句语句定义了消息返回的回调函数，现在我们实现这个函数//服务端回调函数functionprocessResponse(){if(XMLHttpReq.readyState==4){//判断对象状态Å这是固定的返回值，4为正常if(XMLHttpReq.status==200)