使用Ajax完成用户名异步校验

web开发中我们常常要保证用户在注册时要使用不同的用户名，此时在注册表单中就要用Ajax完成用户名异步校验，以下是相关代码。本实例用的是SSH框架，请多指教。

要在用户名的input域添加onblur事件，本例中是οnblur=”checkUsername()”
注册form表单：

<form action="${ pageContext.request.contextPath }/user_regist.action" method="post" novalidate="novalidate" onsubmit="return checkForm();">
<!--用户名-->
<input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"/>
                                    <span id="span1"></span>
<input type="submit" class="submit" value="注册">
</form>

js和Ajax脚本，含密码校验：
校验时将请求发送到后台Struts的user_findByName.action，并加了时间戳防止浏览器缓存。

<script> function checkForm(){ // 校验用户名: // 获得用户名文本框的值: var username = document.getElementById("username").value; if(username == null || username == ''){ alert("用户名不能为空!"); return false; } // 校验密码: // 获得密码框的值: var password = document.getElementById("password").value; if(password == null || password == ''){ alert("密码不能为空!"); return false; } // 校验确认密码: var repassword = document.getElementById("repassword").value; if(repassword != password){ alert("两次密码输入不一致!"); return false; } } function checkUsername(){ // 获得文件框值: var username = document.getElementById("username").value; // 1.创建异步交互对象 var xhr = createXmlHttp(); // 2.设置监听 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //将校验信息写回到用户名的input域后面 document.getElementById("span1").innerHTML = xhr.responseText; } } } // 3.打开连接，加上时间戳，防止浏览器缓存new Date().getTime() 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(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } </script>

DAO代码：

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代码：

@Transactional
public class UserService {
    // 按用户名查询用户的方法:
    public User findByUsername(String username){
        return userDao.findByUsername(username);
    }
}

action负责调用service中的方法根据用户名去数据库查找相应的对象，若能找到说明该用户名已经被注册过，不能再使用，若找不到说明该用户名未被注册，可以使用。使用response将信息返回到前台。
action代码：

使用Ajax完成用户名异步校验

全站热榜