首页问答社区 web技术正文

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

2021-02-06 16:43:15 160 0

使用Ajax校验用户名

这里我们先使用js原生操作ajax的方式，先感受一下，在新版的js中提供了更便捷的操作方式，我们后面再介绍。通常情况下在一个系统中的用户的登录名是唯一的，为了保证用户名的唯一性，需要在用户注册时添加校验，即根据用户输入的用户名去数据库中查找，这里使用ajax校验用户名可以很好的提升用户体验，用户输入完用户名失去鼠标焦点后通过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);
    }

}

Javaweb