验证码Kaptcha与异步请求

发表于 更新于 分类于 阅读次数： Valine：

使用步骤

加入jar包

kaptcha-2.3.2.jarr

在web.xml文件中配置

注册KaptchaServlet，并设置验证码图片相关属性

1
2
3
4
5
6
7
8
<servlet>
    <servlet-name>KaptchaServlet</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>KaptchaServlet</servlet-name>
    <url-pattern>/kaptch.jpg</url-pattern>
</servlet-mapping>

设置文件

查看constant文件

1
2
3
4
5
6
7
8
9
10
11
//设置边框
public static final String KAPTCHA_BORDER = "kaptcha.border";
//边框颜色
public static final String KAPTCHA_BORDER_COLOR = "kaptcha.border.color";
//噪声干扰
public static final String KAPTCHA_NOISE_COLOR = "kaptcha.noise.color";
//设置是否字母等
public static final String KAPTCHA_TEXTPRODUCER_CHAR_STRING = "kaptcha.textproducer.char.string";
//设置长度
public static final String KAPTCHA_TEXTPRODUCER_CHAR_LENGTH = "kaptcha.textproducer.char.length";
...
1
2
3
4
5
6
7
8
9
10
11
12
<servlet>
    <servlet-name>KaptchaServlet</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <init-param>
        <param-name>kaptcha.border.color</param-name>
        <param-value>red</param-value>
    </init-param>
    <init-param>
        <param-name>kaptcha.textproducer.char.string</param-name>
        <param-value>abcdefghigk</param-value>
    </init-param>
</servlet>

在网页加入img验证码图片

1
<img th:src="@{/kaptch.jpg}" alt="" />

验证

在KaptchaServlet生成验证码图片的时候，会将图片的验证码保存到session中，并将用户的输入与其进行比较，session的键为KAPTCHA_SESSION_KEY

1
2
3
4
if (session.getAttribute(KAPTCHA_SESSION_KEY).equals(code)){
    userService.register(user);
    return "user/regist_success";
}

异步请求

了解

很多情况下，我们点击浏览器之后，浏览器会进行相应，比如点击加入购物车，如果此时比进行刷新，购物车的数量不会增加，但是如果刷新则需要刷新整个页面，此时占用的网络带宽比较大，而且浏览器进行渲染的工作量比较多

Ajax(asynchronous javascript and xml)

应用

现在在注册的时候，当文本输入框失去焦点的时候，我们自动在数据库查询是否用户名已经被注册，如果被注册，则返回给用户提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//首先创建xmlhttprequest
var xmlHttpRequest;
function createXmlHttpRequest(){
    if (window.XMLHttpRequest){
        //符合dom2标准的浏览器
        xmlHttpRequest=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        //ie浏览器
        try {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
            xmlHttpRequest=new ActiveXObject("Msxm12.XMLHTTP");
        }
    }
}

function ckUname(uname){
        createXmlHttpRequest();
        var url="user.do?operate=ckUname&uname="+uname;
        xmlHttpRequest.open("GET",url,true);
        //设置回调函数
        xmlHttpRequest.onreadystatechange=ckUnameCB;
        //发送请求
        xmlHttpRequest.send();
}
function ckUnameCB(){
    if (xmlHttpRequest.ready()==4&&xmlHttpRequest.status==200){
    alert("用户名存在");
    }
}

我们需要在后台进行相应的信号值，交给前端接受，比如返回1表示可以注册，返回0表示不可以注册