ajax异步校验

前台JS代码

/*异步验证用户名的输入格式以及是否存在*/

function CheckUsername(){

     /*取到用户名输入框*/

     var nametxt = document.getElementById("username");

     /*获取输入的用户名值*/

     var username = nametxt.value;

     /*获取到装错误信息的span框*/

     var sp = document.getElementById("usernameError");

     var regex = /^[a-z0-9]{4,12}$/i;

     /*创建异步函数*/

     var xhr = createXmlHttp();

     /*设置监听*/

     xhr.onreadystatechange = function()

     {

          if(xhr.readyState == 4){

              if(xhr.status == 200){

                   /*为信息提示框赋文本*/

                   sp.innerHTML = xhr.responseText;

                   /*为信息提示框赋样式*/

                   sp.className = "infoError";

              }

          }

     }

     /*打开链接 · 不加时间戳则会引起浏览器的缓存*/

     xhr.open("GET", "${pageContext.request.contextPath}/user_FindByName.action?time="+newDate().getTime()+"&username="+username, true);

     /*发送*/

     xhr.send();

}

function createXmlHttp(){

     var xmlHttp;

     try{//Firefox, Opera8.0+, Safari

          xmlHttp = new XMLHttpRequest();

     } catch(e){

          try {//IE

              xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");

          } catch (e) {}

     }

     return xmlHttp;

}

 

后台action代码

     /**

     * AJAX异步校验用户名

     * @return String

     * @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='green'>用户名可以使用！</font>");

          }

          /*AJAX操作，不需要页面跳转*/

          return NONE;

     }