码迷,mamicode.com
首页 > Web开发 > 详细

AJAX异步校验

时间:2016-12-21 01:59:01      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:tac   https   对象   bsp   异常   tty   页面跳转   turn   family   

前台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="+new Date().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;
     }
 
 
 
 
 
 
 

AJAX异步校验

标签:tac   https   对象   bsp   异常   tty   页面跳转   turn   family   

原文地址:http://www.cnblogs.com/panweiwei/p/6205073.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!