使用Ajax校验用户名是否存在

使用Ajax校验用户名

这里我们先使用js原生操作ajax的方式,先感受一下,在新版的js中提供了更便捷的操作方式,我们后面再介绍。通常情况下在一个系统中的用户的登录名是唯一的,为了保证用户名的唯一性,需要在用户注册时添加校验,即根据用户输入的用户名去数据库中查找,这里使用ajax校验用户名可以很好的提升用户体验,用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一,然后根据结果给用户相应的提示信息,这样对于用户来说非常方便。

什么是回调函数
回调函数就是你编写好了一个函数,让软件系统来调用这个函数,该函数就是回调函数。说的简单点其实就是让系统调用你的函数就是回调,那你调用系统的函数是直调。
举例来说,你去专卖店去购买一双篮球鞋,但是没有你穿的鞋码了,此时店员会留下你的电话号码,等到货之后给你打电话通知你来取,打电话这个行为就相当于是调用回调函数了 。

代码示例:

创建jsp添加一个表单:

<body>
        用户名:<input type="text" name="name" /><span id="msg"></span><br/>
</body>

在jsp中添加onblur事件绑定,然后使用ajax完成异步请求

<script type="text/javascript">
    window.onload=function(){
        var nameElement = document.getElementById("name");
        //绑定onblur事件
        nameElement.onblur = function(){
            //this等价于nameElement
            var name = this.value;
            //创建XMLHttpRequest对象
            var xhr;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xhr = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //注册回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){//请求一切正常
                    if(xhr.status==200){//服务器响应一切正常
                        var msg = document.getElementById("msg");
                        if(xhr.responseText=="true"){
                            msg.innerHTML =  "<font color='red'>用户名已存在</font>";
                           
                        }else{
                            msg.innerHTML = "可以使用";
                        }
                    }
            }
        }

        //创建连接
        xhr.open("get","${pageContext.request.contextPath }/regist?name="+name);
        //发送请求
        xhr.send(null);
        }

    }
</script>

创建用来处理请求的servlet,这里省略JDBC数据库相关的操作,直接将用户名写死在程序中:

package com.monkey1024.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 注册
 */
public class RegistServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        if("monkey1024".equals(name)){
            out.print(true);
        }else{
            out.print(false);
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}