Java项目(1)——采用Ajax异步交互技术验证用户代码是否重复

DRP项目中涉及到注册用户的问题.本文讲述的是注册过程中使用Ajax异步交互验证用户名是否已经存在的实现原理.之前很多项目中并未使用Ajax技术,结果是所有的判断都等到点击提交按钮时再执行,这样的结果无非是网站卡/软件死,都说不作死就不会死,所以Ajax被广泛应用,用户竖起拇指称赞,不得不说Ajax俘虏了web用户啊~~

实现之前先了解下AjaxreadyState的五个状态。

因本人越来越倾向于英文原版,觉得从它的本源探索会更直接更容易理解,所以在下面使用了英文解释,后面是自己的理解.



0: (Uninitialized) thesend( ) method has not yet been invoked.

(未初始化)还没调用send()方法.只是创建了xmlHttpRequest对象,不然对象不存在浏览器会报错的~



1: (Loading) the send( )method has been invoked, request in progress.

(载入)已调用send()方法,正在发送请求.这一步调用open()设置三个参数method,url和True,然后调用send()向服务端发送请求.



2: (Loaded) the send( )method has completed, entire response received.

(载入完成)send()方法执行完成.这时候接收服务器端响应的原始数据,有响应不表示请求成功,包括请求成功与失败.



3: (Interactive) theresponse is being parsed.

(交互)正在解析响应内容.将上一状态获得的原始数据进行解析,把数据转换成能通过responseBody,responseText和responseXML属性存取的格式,以备客户端调用.



4: (Completed) theresponse has been parsed, is ready for harvesting.

(完成)解析完成,可被客户端调用,即可通过XMLHttpRequest对象的响应属性取得数据.



HTML:输入用户名后按table键切换输入框时,用户名输入框失去焦点触发onBlur事件,随即调用validate()方法.

<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" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)">
	   <span id="spanUserId"></span>
	</td>
</tr>

User_add.jsp页面代码,将userId传到user_validate.jsp页面,查询是否存在,并使用callback接收回来的消息:

var xmlHttp = null;	
	function createXMLHttpRequest(){
		//表示当前浏览器不是ie,如ns,firefox
		if(window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	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;
			xmlHttp.send(null);
		}else{
			document.getElementById("spanUserId").innerHTML="";
		}
	}
	function callback(){
		//4表示有响应
		if(xmlHttp.readyState==4){
			//200表示请求成功
			if(xmlHttp.state==200){
				document.getElementById("spanUserId").innerHTML="<font color='red'>" + xmlHttp.responseText + "</font>"
			}else{
				document.getElementById("spanUserId").innerHTML="";
			}
		}else{
			alert("请求失败,错误码=" + xmlHttp.status);
		}
	}

user_validate.jsp页面,根据user_Id查询是否已存在:

<%
	String userId=request.getParameter("userId");
	if(UserManager.getInstance().findUserById(userId)!= null){
		out.println("用户代码已存在");
	}
%>

UserManager.Java中具体查询是否存在的方法,数据库连接方法已略:

public User findUserById(String userId){
		String sql="select user_id,user_name,password,contact_tel,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(userId);
				user.setUserName(rs.getString("user_name"));
				user.setPassword(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;
		
	}

总结:使用Ajax异步与数据库交互,解决了同步状态下用户等待--等待--的问题,那边验证着,这边操作着两不误.极大地改善了用户的体验，表现在动态，快速响应和高交互性。