AJAX+Struts2实例：实现注册重名检验

JSP页面：

onblur实在输入框失去焦点是触发checkUsername函数

<tr>
    <th>
        <span class="requiredField">*</span>用户名:
    </th>
    <td>
        <input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"/>
        <span id="span1"></span>
    </td>
</tr>

<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) {
                    document.getElementById("span1").innerHTML = xhr.responseText;
                }

            }

        }

        // 3.打开连接，跳转到UserAction执行findByName函数
                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{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTTP");
            }
            catch(e) {
                try{
                    xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
                }catch(e){}

            }
        }
        return xmlHttp;


    }
</script>

struts.xml

<!-- 配置用户模块的Action -->
<action name="user_*" class="userAction" method="{1}">
    <result name="registPage">/WEB-INF/jsp/regist.jsp</result>
</action>

UserAction

package fjnu.lxf.myshop.user.action;
import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

import fjnu.lxf.myshop.user.service.UserService;
import fjnu.lxf.myshop.user.vo.User;

public class UserAction extends ActionSupport implements ModelDriven<User>{
    // 跳转到注册页面
    private User user = new User();
    private UserService userService;


    public User getModel() {
        // TODO Auto-generated method stub
        return user;
    }


    public void setUserService(UserService userService) {
        this.userService = userService;
    }


    public String registPage() {        
        return "registPage";
    }




    // AJAX进行一步校验用户名的执行方法

    public String findByName() throws Exception {
        //调用service

        User u = userService.findByUsername(user.getName());

        //获得response对象，获得页面输出
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");

        if(u != null) {
            response.getWriter().println("<font color='red'>用户名已经存在</font>");

        }else {
            response.getWriter().println("<font color='green'>用户名可以使用</font>");
        }
        return NONE;
    }

}

这里用到了hibernate以及spring框架。