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 的映射配置
<servlet>
Steel.Ma 技术笔记用 Ajax 制作带图形验证码的登录页面
3
<servlet-name>Kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servle
t-class>
</servlet>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>
以上就完成了对 Kaptcha 的配置。使用起来也很方便，在 html/jsp 中，直接用
<img src="kaptcha.jpg" />即可显示图形验证码图片，在 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);
- 1
- 2
前往页