关于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核心对象的使用才是重中之重。