利用Ajax校验用户代码是否重复

      关于Ajax前面的博客已经详细的介绍过了，Ajax的核心内容就是XMLHttpRequest对象的使用，今天我们再次应用Ajax完成一个Demo，同样的核心还是XMLHttpRequest对象的理解，该实例的主要功能就是检验用户代码是否重复。

      首先在添加用户之前我们应该先查询用户代码是否重复，采用分层的思想，我们在数据访问层（UserManager.java）写一个查询用户的方法（findUserIdById）：主要代码有定义sql语句，创建连接对象实例，确定输入和输出参数，关闭连接。

	/**
	 * 根据用户代码查询
	 * @param userId
	 * @return 如果存在返回User对象，否则返回null
	 */
	public User findUserIdById(String userId){
		//定义sql语句
		String sql="select user_id,user_name,password,contact_tel,email,create_date from t_user where user_id=?";
		//初始化连接和参数以及实体
		Connection conn=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		User user=null;
		try{
			conn=DbUtil.getConnection();
			pstmt=conn.prepareStatement(sql);
			pstmt.setString(1, userId);
			rs=pstmt.executeQuery();
			if(rs.next()){
				//将最后的结果赋给实体
				user=new User();
				user.setUserId(rs.getString("user_id"));
				user.setUserName(rs.getString("user_name"));
				user.setPassword(rs.getString("password"));
				user.setContactTel(rs.getString("contact_tel"));
				user.setEmail(rs.getString("email"));
				user.setCreateDate(rs.getTimestamp("create_date"));
			}
			
		}catch(SQLException e){
			e.printStackTrace();
		}finally{
			DbUtil.close(rs);
			DbUtil.close(pstmt);
			DbUtil.close(conn);
			
		}		
		return user;
	}
}

     然后就是业务逻辑层（user_add.jsp）部分的代码编写，我们要实现光标离开就显示结果并把信息显示在一个span标签上，首先定义一个光标离开的响应事件，并加一个标签。

<tr>
       <td width="22%" height="29">
		<div align="right">
			<font color="#FF0000">*</font>用户代码: 
		</div>
	</td>
	<td width="78%">
		<input name="userId" type="text" class="text1" id="userId"
			size="10" maxlength="10" οnkeypress="userIdOnKeyPress()" value="<%=userId %>" οnblur="validate(this)">
		<span id="spanUserId"></span>
		</td>
	</tr>

    编写业务逻辑层的代码： 查询用户：

    首先创建XMLHttpRequest对象：

var xmlHttp
function createXMLHttpRequest(){
	//非IE
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttppRequest();
			
	}else if(window.ActiveXObject){
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
	}
 }

    IE和非IE的浏览对与此对象的创建是不一样的，IE用的是第三方的ActiveX控件，非IE浏览器使用的是window内部的技术。

    然后我们注册一个回调函数，用于服务器端的数据返回给浏览器时执行。以为Ajax采用异步交互的模型，因此我们需要告诉AJAX引擎当响应数据回来时我要做一些工作，这些工作就是回调函数中的内容。

//回调函数
function callback(){		
	//alert(xmlHttp.readyState);
	//Ajax引擎状态显示成功！
	if(xmlHttp.readyState==4){
		//HTTP协议状态为成功
		if(xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			if(trim(xmlHttp.responseText)!=""){
				document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";	
			}else{
				document.getElementById("spanUserId").innerHTML="";
			}
				
		}else{
			alert("请求失败，错误码="+xmlHttp.status);
		}
       }

    属性readyState有五种状态，只有状态4表示HTTP响应已经完成，不管是否成功响应，服务器端总会返回一个结果，status表示从服务器端返回的HTTP的状态代码：返回200代表成功，responseText表示响应内容为文本形式。

    需要注意的是readyState的值不会递减，只会增加，而每次增加的时候都会触发一个onreadystatechange 事件。

    下面就需要我们真正的实现异步交互了，首先我们需要获得我们交互的url地址，这里为了避免浏览器的缓存，我们在传递参数的后面加了一个时间控制，用来区别每次提交的数据不会留在缓存中。

    open方法初始化请求参数，其中包括提交方式、URL地址，是否异步。

    然后用触发的onreadystatechange事件调用回调函数。

    最后send方法发送到服务器端。

function validate(field){
	if(trim(field.value).length!=0){
		//创建Ajax核心对象XMLHttpRequest
		createXMLHttpRequest();
		var url="user_validate.jsp?userId=" + trim(field.value)+"&time="+ new Date().getTime();
		//设置请求方式为GET，设置URL，设置为异步提交
		xmlHttp.open("GET",url,true);
		//将方法低值赋值给onreadystatechange
		xmlHttp.onreadystatechange=callback;
		//将设置信息发送到Ajax引擎
		xmlHttp.send(null);
	}else{
		document.getElementById("spanUserId").innerHTML="";
	}
}

   然后客户端进行查询，我们调用UserManager.java中的方法，传入的参数通过一个Request对象获取。

if ("add".equals(command)){
        //首先查询用户是否存在
	if(UserManager.getInstance().findUserIdById(request.getParameter("userId"))==null){
		User user=new User();
		user.setUserId(request.getParameter("userId"));
		user.setUserName(request.getParameter("userName"));
		user.setPassword(request.getParameter("password"));
		user.setContactTel(request.getParameter("contactTel"));
		user.setEmail(request.getParameter("email"));
			
		UserManager.getInstance().addUser(user);
		out.println("添加用户成功!");
	}else{
		userId=request.getParameter("userId");
		userName=request.getParameter("userName");
		contactTel=request.getParameter("contactTel");
		email=request.getParameter("email");
			
		out.println("用户代码已经存在，代码=【" +request.getParameter("userId") +"】");
	}
}

    这样就完成了我们异步交互查询用户代码是否存在。

    熟练的使用Ajax技术是我们编程必须具备的技能，系统开发只要需要实现异步交互，无刷新页面等功能时都需要使用Ajax，对于Ajax核心对象的使用才是重中之重。