使用AJAX完成用户名是否存在异步校验:

1. 事件触发:
   onblur
   2.编写AJAX代码:
   
   • 项Action中提交:传递username参数

function checkUsername(){
        // 获得文件框值:
        var username = document.getElementById("username").value;
        // 1.创建异步交互对象
        var xhr = createXmlHttp();
        // 2.设置监听
        xhr.onreadystatechange = function(){
        //xhr.readyState == 4  是表示后台处理完成了。
        //xhr.status == 200 是表示处理的结果是OK的。
            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);
    }


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;
         }

Action中的方法：

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;
    }