使用AJAX完成用戶名是否存在異步校驗

一、JSP代碼：

1、事件觸發：onblur

2、編寫AJAX代碼：向Action中提交，傳遞username參數

<script>
    function checkUsername(){
        //獲得文本框的值
        //function checkUsername(field){
        //field.value;
        var username=document.getElementById("username").value;
        //判斷是否輸入用戶名
        if(username.length !=0){
            //1.創建異步交互對象
            var xhr=createXmlHttp();
            //2.設置監聽
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        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);
        }else{
            document.getElementById("span1").innerHTML="";
        }
    }
    
    function createXmlHttp(){
        var xmlHttp;
        try{//Firefox,opera,Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch(e){
            try{//Internet explorer
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){}
            }
        }
        return xmlHttp;
    }
}

<!-- 事件觸發 --> <!-- <input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername(this);"/> -->
<input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername();"/>
<span id="span1"></span>

二、Java方法類Action代碼：

接收username：模型驅動接收

package cn.itcast.shop.user.action;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import cn.itcast.shop.user.service.UserService;
import cn.itcast.shop.user.vo.User;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
/*
 * 用戶模塊Action的類
 * 郭賢達
 */
//接受username，模型驅動接收--extends ActionSupport implements ModelDriven<User>
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;
    }/*
     * ajax進行異步校驗用戶名的執行方法 
     */
    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='green'>用戶名可以使用</font>");
        }
        return NONE;
    }
}

三、Java實體類代碼：

1、編寫實體類

package cn.itcast.shop.user.vo;
/*
 * 用戶模塊的實體類
 */
public class User {
    private Integer uid;
    private String username;
    private String password;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;
    }
}

2、編寫映射

<?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"/>
        </id>
        <property name="username"/>
        <property name="password"/>
        <property name="name"/>
    </class>
</hibernate-mapping>

四、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;
/*
 * 用戶模塊持久層的代碼
 */
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;
    }
}

五、Service代碼：

package cn.itcast.shop.user.service;
import org.springframework.transaction.annotation.Transactional;
import cn.itcast.shop.user.dao.UserDao;
import cn.itcast.shop.user.vo.User;

/*
 * 用戶模塊業務層的代碼
 */
@Transactional
public class UserService {
    //注入UserDao
    private UserDao userDao;

    public void setUserDao(UserDao userDao) {
        this.userDao = userDao;
    }
    
    //按用戶名查詢用戶的方法
    public User findByUsername(String username){
        return userDao.findByUsername(username);
    }

}

六、在spring中配置實體類、映射和注入：

<!-- 配置Hibernate的映射文件 -->
    <property name="mappingResources">
        <list>
            <value>cn/itcast/shop/user/vo/User.hbm.xml</value>
        </list>
    </property>
    </bean>    
    
    <!-- 事務管理: -->
    <!-- 事務管理器 -->
    <bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory"/>  
    </bean>
    
    <!-- 開啟注解事務 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>
         
    <!-- 首頁訪問的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"/>
    </bean>
    
    <!-- Service配置 -->
    <bean id="userService" class="cn.itcast.shop.user.service.UserService">
        <property name="userDao" ref="userDao"/>
    </bean>
    
    <!-- Dao配置 -->
    <bean id="userDao" class="cn.itcast.shop.user.dao.UserDao">
        <property name="sessionFactory" ref="sessionFactory"/>
    </bean>