使用Ajax完成用户名异步校验--【SSH】

1.事件触发--onblur

<td><!-- onblur用户离开输入框的时候执行 -->
  <input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()">
  <span id="span1"></span>
</td>

2.编写Ajax代码

//使用Ajax完成用户名是否异步的校验
	function checkUsername(){
	
		//获得文本框的值
		var username=document.getElementById("username").value;
		//1.创建异步交互对象Xml
		
		var xhr=createXmlHttp();
		//2.设置监听
		xhr.onreadystatechange=function(){
		// 0 未连接 1 打开连接 2 发送请求 3 交互 4 完成交互,接手响应
			if (xhr.readyState==4){
				if(xhr.status==200){//表示处理结果ok
					document.getElementById("span1").innerHTML=xhr.responseText;
				}
			}
		}
		//3.打开链接
		xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username=" +username,true);
		//4.发送
		xhr.send(null);
		
	}
	
	function createXmlHttp(){
		var xmlHttp;
		try{ //Firefox ,Opera 8.0+,Safari
			xmlHttp=new XMLHttpRequest("Msxml2.XMLHTTP");
		}catch(e){
			try{ //Internet Explorer
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
			
				try{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch(e){
				
				}
			}
		}
		return xmlHttp;
	}

3.编写Action

　　接受username:模型驱动接受

import cn.itcast.shop.user.service.UserService;
import cn.itcast.shop.user.vo.User;

import com.opensymphony.xwork2.ActionSupport;
/*
 * 用户模块Action的类
 * @author 王美
 * 
 */
import com.opensymphony.xwork2.ModelDriven;

public class UserAction extends ActionSupport implements ModelDriven<User>{
	//模型驱动要使用的对象
	private User user=new User();
	public User getModel(){
		return user;
	}
	//注入UserService
	private UserService userService;
	
	public void setUserService(UserService userService) {
		this.userService = userService;
	}

	
	/*
	 * 跳转到注册页面的执行方法
	 *  
	 */
	
	public String registPage(){
		return "registPage";
	}
	
	/**
	 * AJAX进行异步校验用户名的执行方法
	 * @throws IOException
	 */
	public String findByName() throws IOException{
		//调用Service进行查询
		User existUser = userService.findByUsername(user.getUsername());
		//获得response对象，项页面输出
		HttpServletResponse response=ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		//判断
		if (existUser!=null){
			//查询到该用户：用户名已经存在
			response.getWriter().println("<font color='red'>用户名已经存在</font>");
		}else{
			//没有查询到该用户：用户名可以使用
			response.getWriter().println("<font color='greem'>用户名可以使用</font>");
		}
		return NONE;
	}
}

　　编写实体类

　　　　User

package cn.itcast.shop.user.vo;
/*
 * 用户模块实体类：
 * @author 
 * CREATE TABLE `user` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `phone` varchar(255) DEFAULT NULL,
  `addr` varchar(255) DEFAULT NULL,
  `state` int(11) DEFAULT NULL,
  `code` varchar(64) DEFAULT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
 * */

public class User {
	private Integer uid; //用户id
	private String username;//用户名
	private String password;//用户密码
	private String name;//用户姓名
	private String email;//用户Email
	private String phone;//用户电话
	private String addr; //用户地址
	private Integer state;//用户状态：激活
	private String code;//

	//自动生成get,set, Source--Generate Getters and Setters
	public Integer getUid() {
		return uid;
	}
	public void setUid(Integer uid) {
		this.uid = uid;
	}
	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 getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getAddr() {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}
	public Integer getState() {
		return state;
	}
	public void setState(Integer state) {
		this.state = state;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	
	
}

　　　　User.hbm.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
    "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
  
    <hibernate-mapping>
    	<class name ="cn.itcast.shop.user.vo.User" table="user">
    		<id name="uid">
    			<generator class="native"></generator>
    		</id>
    		<property name="username"></property>
    		<property name="password"></property>
    		<property name="name"></property>
    		<property name="email"></property>
    		<property name="phone"></property>
    		<property name="addr"></property>
    		<property name="state"></property>
    		<property name="code"></property>
    	</class>
    </hibernate-mapping>

　　　　配置到Spring中

4.编写DAO

　　继承HibernateDaoSupport

package cn.itcast.shop.user.dao;
import java.util.List;

import org.springframework.orm.hibernate3.support.HibernateDaoSupport;

import cn.itcast.shop.user.vo.User;
/*
 * 用户模块持久层代码
 * @author 
 * */
public class UserDao extends HibernateDaoSupport{

	//按照名称查询是否有该用户：
	public User findByUserName(String username){
		String hql="from User where username=?";
		List<User> list =this.getHibernateTemplate().find(hql,username);
		if (list!=null && list.size()>0){
			return list.get(0);
		}
		return null;
	}
}

　　　　配置文件中注入sessionFactory

5.编写Service

　　注入UserDao

      事务管理

<!-- 事务管理： -->
	<!-- 事务管理器 -->
	<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
		<property name="sessionFactory" ref="sessionFactory"/>
	</bean>

	<!-- 开启注解事务 -->
	<tx:annotation-driven transaction-manager="transactionManager" />


 <!--================================== Action配置============================================================ -->
	
	<!-- 首页访问的Action -->
	<bean id="indexAction" class="cn.itcast.shop.index.action.IndexAction" scope="prototype">
	</bean>

	<!-- 用户模块的Action -->
	<bean id ="userAction" class="cn.itcast.shop.user.action.UserAction" scope="prototype">
		<!-- 注入Service -->
		<property name="userService" ref="userService"></property>
	</bean>
	
	
	<!--================================== Service配置============================================================ -->
	<bean id="userService" class="cn.itcast.shop.user.service.UserService">
		<property name="userDao" ref="userDao"></property>
	</bean>
	
	<!-- =================================Dao配置 ===================================================== -->
	<bean id="userDao" class="cn.itcast.shop.user.dao.UserDao">
		<property name="sessionFactory" ref="sessionFactory"/>
	</bean>