Ajax验证用户名是否存在的实例代码

Ajax验证用户名是否存在的实例代码详解

在日常的Web项目开发中，注册功能里的用户名查重，几乎是每个新手必做的练习。这不，为了让大家对Ajax实现实时验证的流程有个透彻的理解，今天咱们就来拆解一个非常典型的例子，看看从前端页面、Ja vaScript逻辑，到后台Servlet、Service层，乃至最终的数据库查询，这整条链路是如何协同工作的。

JSP页面

首先，我们来看前端的“阵地”。代码很简单，核心就是一个文本输入框，它的使命是捕捉用户的每一次输入。

    


    
用户名：
    

        
        

    

这里有几个关键点值得注意：一是通过onblur="CheckUserName()"事件，用户的光标一旦离开这个输入框，验证函数就会被触发。二是那个不起眼的

标签，它可是个“消息公告栏”，后端返回的验证结果就靠它来动态展示了。

JS文件夹下的register.js

重头戏来了。前端的“大脑”逻辑都写在这里，它负责发起请求、处理响应、并更新页面提示。

//创建XMLHttpRequest对象，这是Ajax的基石
function ajaxFunction(){
    var xmlHttp;
    try{
        // 适用于IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp=new XMLHttpRequest();
    } catch(e){
        try{
            //兼容老版本Internet Explorer
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e){
            try{
                // 适用于更古老的IE6, IE5
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e){
                xmlHttp=false;
            }
        }
    }
    return xmlHttp;
}

var flag=true;
function CheckUserName(){
    //获取用户在输入框里填写的值
    var name=document.getElementById("r_name").value;

    //第一关：非空校验
    if(name==""||name==null){
        document.getElementById("p01").innerHTML="用户名不能为空！";
        flag=false;
    }else{
        //1.创建核心的Ajax请求对象
        var request=ajaxFunction();

        //2.配置并发送请求
        request.open("POST","/StudyWeb/CheckUserNameServlet",true); //true表示采用异步模式

        //3.注册一个监听器，专门等着服务器回信
        request.onreadystatechange=function(){
            //readyState==4代表请求完成，status==200代表服务器成功响应
            if(request.readyState==4 && request.status==200){
                var data=request.responseText; //拿到Servlet返回的纯文本数据

                //根据返回的数据，更新页面提示
                if(data == 1){
                    document.getElementById("p01").innerHTML="用户名已存在！";
                    flag=false;
                }else{
                    document.getElementById("p01").innerHTML="√";
                    flag=true;
                }
            }
        }

        //如果是POST方式提交额外数据，必须设置这个请求头
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

        //4.正式发出请求，并把用户名作为参数带过去
        request.send("name="+name);
    }
    return flag;
}

这段代码清晰地展示了Ajax的核心四步曲：创建对象、配置请求、监听状态、发送数据。特别需要注意那个onreadystatechange事件，它就像是派出去的“信使”，服务器有任何风吹草动，它都能实时感知并处理。

后台StudyWeb项目下的CheckUserNameServlet

请求到了后台，Servlet首先登场，扮演着“ dispatcher（调度员）”的角色。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //拿到前端传过来的用户名参数
    String r_name=request.getParameter("name");
    try {
        //将任务交给Service层进行业务逻辑判断
        boolean isExist=userService.CheckUserName(r_name);
        System.out.println("isExist"+isExist);

        //将判断结果以最简单的文本形式（1或2）返回给前端
        if(isExist){
            response.getWriter().println(1); //1代表用户名已存在
        }else{
            response.getWriter().println(2); //2代表用户名可用
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Servlet的工作非常聚焦：获取参数、调用服务、返回结果。它不关心具体的查询逻辑，只负责流程的衔接与数据的转发。

UserDaoImpl中方法的实现

最后，我们抵达数据持久层，这里是直接与数据库对话的地方。

public boolean CheckUserName(String u_name) {
    boolean flag=false;
    String sql="select u_id,u_name,u_password,u_email,u_phone from user where u_name=?";
    conn=super.getConnection();
    try {
        pstmt=conn.prepareStatement(sql);
        pstmt.setString(1,u_name); //使用预编译语句防止SQL注入
        rs=pstmt.executeQuery();

        //关键判断：如果查询结果集有下一条记录，说明用户名已存在
        if(rs.next()){
            flag=true;
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally{
        super.closeAll(conn, pstmt, stmt, rs); //切记关闭数据库连接，释放资源
    }
    return flag;
}

这里的逻辑直截了当：构造SQL查询，使用PreparedStatement安全地传入参数，然后根据查询结果的有无，返回一个布尔值。安全性和资源清理是这一层的生命线。

总结

走完这一遍，整个Ajax验证用户名的流程就非常清晰了：从页面交互触发，到Ja vaScript发起异步请求；请求经Servlet调度，转给Service与Dao层进行数据库查询；最终的查询结果再沿原路返回，由Ja vaScript动态渲染到页面上。这正是一个经典的前后端分离协作的微型模型。希望这个实例的逐层拆解，能帮助你牢牢掌握其中的每一处细节。如果在实践中遇到任何问题，也欢迎随时交流探讨。