AJAX异步同步

为了更好的用户体验，AJAX的异步同步技术给了我们一个很好的用户体验下面是我做的一个例子。

1、客户端处理

UserId.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="client_validate.js"></script>
<script type="text/javascript">
	function validate(field){
		//创建XML
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
		//设置请求方式为GET，设置请求URL，设置为异步提交
		xmlHttp.open("GET", url, true);
		//将方法地址复制给onreadystatechange属性
		xmlHttp.onreadystatechange=function (){
			if(xmlHttp.readyState==4){
				if(xmlHttp.status==200){
					if(trim(xmlHttp.responseText)!=""){
						document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";
								}else{
						document.getElementById("spanUserId").innerHTML="";
								}
						}else{
						alert("请求失败，错误码="+xmlHttp.status);
				}
				}
		}
	}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
	
<body>
<table>
	<tr>
    	<td>
		<div align="left">
			<font color="#FF0000">*</font>用户代码: 
		</div>
        </td>
		<td>
        	<input name="userId" type="text" class="text1" id="userId"size="10" maxlength="10"  onblur="validate(this);" />
        	<span id="spanUserId"></span>
		</td>
    </tr>
</table>
</body>
</html>

2.提交给服务器。

user_validate.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
    <%@ page import="com.bjpowernode.drp.sysmgr.manager.UserManager"%>

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

3.后台处理

3.1 连接数据库查询用户信息

UserManager.java

public class UserManager {
	
	private static UserManager instance=new UserManager();
	
	private UserManager(){
		
	}
	
	public static UserManager getInstance(){
		return instance;
	}
          /**
	 * 根据用户代码查询
	 * @param userId
	 * @return 如果存在返回User 如果不存在则返回Null
	 */
	public User findUserById(String userId){
			/*System.out.println("UserManger.findUserById--userId="+userId);*/
			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;
	}    
}

3.2数据库连接类

DbUtil.java

public class DbUtil {
	public static Connection getConnection(){
		Connection conn=null;
				try {
					Class.forName("oracle.jdbc.driver.OracleDriver");
					String url="jdbc:oracle:thin:@localhost:1521:ORCL";
					String username="drp1";
					String password="drp1";
					conn=DriverManager.getConnection(url,username,password);
				
				} catch (ClassNotFoundException e) {
					e.printStackTrace();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			
				return conn;
			}
		//关闭Connection
		public static void close(Connection conn){
			if(conn!=null){
				try {
					conn.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}
		//关闭PreparedStatement
		public static void close(PreparedStatement pstmt){
			if(pstmt!=null){
				try {
					pstmt.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}
		//关闭ResultSet
		public static void close(ResultSet rs){
			if(rs!=null){
				try {
					rs.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}
		
		｝

3.3实体类。

User.java

/**
 * 用户实体
 * @author IT
 *
 */
public class User {
	//用户代码
	private String userId;
	//用户名称
	private String userName;
	//密码
	private String password;
	//联系电话
	private String contactTel;
	//电子邮件
	private String email;
	//创建日期
	private Date createDate;
	
	public String getUserId() {
		return userId;
	}
	public void setUserId(String userId) {
		this.userId = userId;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getContactTel() {
		return contactTel;
	}
	public void setContactTel(String contactTel) {
		this.contactTel = contactTel;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public Date getCreateDate() {
		return createDate;
	}
	public void setCreateDate(Date createDate) {
		this.createDate = createDate;
	}
}

4.效果图：

需要下载的Js

Meet so Meet. C plusplus I-PLUS....