用户在注册时，最好在用户填写完用户名时就感知用户名是否合法。

实现的方法有多种，js、ajax等等，这里采用jquery封装的ajax实现

效果

JQuery实现异步验证用户名是否存在_jquery

采用jsp+servlet的模式实现案例

使用的是jquery-1.7.2.min.js

jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>异步请求测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<script language="JavaScript">
//异步验证用户名是否存在
function validatorloginName(){
    var loginName=document.getElementById("loginName").value; 
   if(loginName == ""){
       alert("用户名不能为空!");
       return;
       }
   $.ajax({
       type: "POST",      //请求方式
        url: "CheckUserName",//验证的Servlet路径    
         data: "loginName="+loginName,   //参数
        success: function(data){  //返回值
       if(data=="false"){
           $('#nameLabe').text("用户名通过验证").css("color","green").css("font-size","10px");

       }else{//不存在就显示labe，并用css样式修饰一下
           $('#nameLabe').text("用户名已存在").css("color","red").css("font-size","10px");

           }   
       }            
  });
}
</script>
<body>
    <center>
        <br>
        <br>
        <br>
        <br>
        <br>
        <table width="684" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="292" align="center" valign="top"
                    background="Images/LoginBg.jpg">
                    <table width="350" height="201" border="0" cellpadding="0"
                        cellspacing="0">
                        <tr>
                            <td height="72" align="center"><h3>异步验证用户名是否存在</h3></td>
                        </tr>
                        <tr>
                            <td align="center" valign="top">
                                <form>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="30" colspan="2" align="center" class="STYLE2"><span
                                                style="color: red;">
                                            </span></td>
                                        </tr>
                                        <tr>
                                            <td width="37%" height="30" align="right" >用户名：</td>
                                            <td width="300" align="left"><input type="text"
                                                name="Username" id="loginName" placeholder="请输入用户名"
                                                onblur="validatorloginName()" />
                                                <!-- 用来显示验证结果 -->
                                                <label id="nameLabe"></label>
                                                </td>
                                        </tr>
                                        <tr>
                                            <td height="30" align="right" >密&nbsp&nbsp&nbsp码：</td>
                                            <td align="left"><input type="password" name="Password"
                                                id="Password" placeholder="请输入密码" class="text1" /></td>
                                        </tr>
                                        <tr>
                                            <td height="30" colspan="2" align="center"><label>
                                                    <input type="submit" name="button" id="button" value="注册">
                                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                                    <input type="reset" name="button" id="button" value="重置">
                                            </label></td>
                                        </tr>
                                    </table>
                                </form>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </center>
</body>
</html>


Servlet

package com.hk.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckUserName extends HttpServlet {
    private static final long serialVersionUID = 1L;


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

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");  
        //假设已经存在三个用户
       String[] users = {"zhangsan","lisi","wangwu"};

        boolean flag = false;  
        String loginName=request.getParameter("loginName").toString();
        for(int i= 0;i<users.length;i++ ){
            if(users[i].equals(loginName)){
                flag = true;//存在返回真，并结束
                break;
            }

        }
        if(true == flag){  
            response.getWriter().write("true");//此值jquery可以接收到    
        }else{
            response.getWriter().write("false");
        }
    }  



}

配置Servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <servlet>
    <description></description>
    <display-name>CheckUserName</display-name>
    <servlet-name>CheckUserName</servlet-name>
    <servlet-class>com.hk.servlet.CheckUserName</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CheckUserName</servlet-name>
    <url-pattern>/CheckUserName</url-pattern>
  </servlet-mapping>
</web-app>

完成的比较粗糙，大家继续完善