用ajax兑现检测注册用户名是否重复的完整例子（一）

用ajax实现检测注册用户名是否重复的完整例子（一）
网上搜索了很多案例，但都和自己的需求不一样。
最终实现了下面的例子实现了对注册用户名的校验。采用的架构是servelet+jsp.
JSP页面代码：

	<form action="register.do?action=add" onsubmit="return submessage(this)" method="post" name="form1">
			<table border="1" width="500" cellspacing="1" cellpadding="3" align="left" bordercolor="#326598" >
				<tr>
					<td colspan="7" bgcolor="#FEA817">
						[align=center]
							<font color="#FFFFFF"><b>用户注册</b> </font>
						[/align]
					</td>
				</tr>
				<tr>
					<td>
						用户名
					</td>
					<td>
						<input name="uname" id="username" type="text" class="form_text" size="20" onblur="validatorloginName()">      
					</td>
				</tr>
				
				<tr>
					<td>
						登陆密码
					</td>
					<td>
						<input type="password" name="upwd">
					</td>
				</tr>
				<tr>
					<td>
						确认密码
					</td>
					<td>
						<input type="password" name="upwd1">
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="提交">
						<input type="reset" value="重置">
					</td>
				</tr>
			</table>
					</form>

页面上添加的ajax组件：

function validatorloginName(){
		 var loginName=document.getElementById("uname").value;
		 if(loginName == "")
		 {
		 	alert("用户名不能为空!");
		 	return;
		 }
		 $.ajax({
		 		type: "POST",    
		         url: "ValidateName",    
		          data: "loginName="+loginName, 
		         success: function(data){
			    if(data=="true"){   
			     alert("恭喜您！用户名没有被使用！");  
			   
			    }else{   
			     alert("抱歉！用户名已存在！");   
		    	} 
		  		}          
		        });   
		}		

通过ajax将注册用户名发送到ValidateName.do进行校验。

web.xml里面配置如下：

<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>ValidateName</servlet-name>
    <servlet-class>com.wuliu.test.ValidateName</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>ValidateName</servlet-name>
    <url-pattern>/ValidateName</url-pattern>
  </servlet-mapping>

java代码后面请看后面的（二）。

（未完待续）