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动态渲染到页面上。这正是一个经典的前后端分离协作的微型模型。希望这个实例的逐层拆解，能帮助你牢牢掌握其中的每一处细节。如果在实践中遇到任何问题，也欢迎随时交流探讨。
