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

前端之家收集整理的这篇文章主要介绍了利用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" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="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核心对象的使用才是重中之重。 原文链接:https://www.f2er.com/ajax/164265.html

猜你在找的Ajax相关文章