Ajax验证建议模版

整个注册过程在 Ajax 技术的支持下，利用 JavaScript的 HTML 操纵能力，使得用户不需要进行额外的操作。用户体验的效果逼近 C/S 结构。而整个案例的改进，仅仅是改良了客户端的 register.html文件，添加了 JavaScript代码和 HTML元素。

 

首先还是编写一个 HTML 表单来接收用户输入。

源代码如下（register.html）：

   
   

    
    

     
     <H1>Demo 邮件系统 - 用户注册</H1>
    
    
    
    

     
         	<form name="regForm" id="regForm" action="DoRegister.jsp" method="post">
    
    
    
    

     
         	注册用户名：
    
    
    
    

     
         	 <input type="text" name="userName" id="userName" onblur="checkUser();"/>
    
    
    
    

     
         	 <label id="checkResult"></label>
    
    
    
    

     
         	 <br/>
    
    
    
    

     
         	注册密码：
    
    
    
    

     
         	<input type="password" name="password" id="password"/><br/>
    
    
    
    

     
         	确认密码：
    
    
    
    

     
         	<input type="password" name="password2" id="password2"/><br/>
    
    
    
    

     
         	<input type="submit" value="提交"/>
    
    
    
    

     
         	</form>
    
    
   
   

在 HTML文件中对id 为 userName的文本框元素添加了 onblur 事件。这样，当这个文本框失去焦点，即用户填完了注册用户名，准备继续填写注册密码时，事件被触发。JavaScript方法checkUser()被调用。下面是checkUser()的定义：

   
   

    
    

     
     var req;
    
    
    
    

     
     function checkUser(){
    
    
    
    

     
     var checkResult = document.getElementById("checkResult");
    
    
    
    

     
     checkResult.innerHTML="正在检测用户名...";
    
    
    
    

     
     var userName=document.getElementById("userName").value;
    
    
    
    

     
     //得到浏览器中可以发送http请求的对象，本例只对IE5.5+有效
    
    
    
    

     
     req=new ActiveXObject("Microsoft.XMLHttp");
    
    
    
    

     
     req.open("get","http://localhost:8080/test1/CheckUserName.jsp? checkUserName="+userName);
    
    
    
    

     
     //javascript特殊语法，表明req的状态改变将调用handleRequest方法
    
    
    
    

     
     req.onreadystatechange=handleRequest;
    
    
    
    

     
     req.send(null);
    
    
    
    

     
     }
    
    
   
   

为了便于理解，JavaScript方法checkUser()被写得很简单。其中最关键的步骤就是方法将会生成一个XMLHttpRequest对象在IE浏览器中，这个对象以ActiveX控件的形式出现。有了XMLHttpRequest对象之后，JavaScript方法可以利用它直接发送异步请求到服务器端而不需要刷新当前浏览器页面。当服务器端返回处理结果时， XMLHttpRequest对象的状态将会发生改变，这样会触发相应的 JavaScript方法被调用。在案例中，handleRequest()方法就是用来处理服务器端返回的结果。

编写 handleRequest 方法：

   
   

    
    

     
     function handleRequest(){
    
    
    
    

     
     var checkResult = document.getElementById("checkResult");
    
    
    
    

     
                //判断就绪状态
    
    
    
    

     
     if(req.readyState==4){
    
    
    
    

     
     if(req.status==200){
    
    
    
    

     
     checkResult.innerHTML=req.responseText;
    
    
    
    

     
     }
    
    
    
    

     
     else{
    
    
    
    

     
     alter("An error occurred:"+req.statusText);
    
    
    
    

     
     }
    
    
    
    

     
     }
    
    
    
    

     
     }
    
    
   
   

HandlerRequest()方法的逻辑也比较简单，当服务器端有正常返回值时，就在 id 为 checkResult 的 label 元素中添加一段HTML，其值就是由服务器端返回的数据。

整个注册过程在 Ajax 技术的支持下，利用 JavaScript的 HTML 操纵能力，使得用户不需要进行额外的操作。用户体验的效果逼近 C/S 结构。而整个案例的改进，仅仅是改良了客户端的 register.html文件，添加了 JavaScript代码和 HTML元素。

 

首先还是编写一个 HTML 表单来接收用户输入。

源代码如下（register.html）：

    
    

     
     

      
      <H1>Demo 邮件系统 - 用户注册</H1>
     
     
     
     

      
          	<form name="regForm" id="regForm" action="DoRegister.jsp" method="post">
     
     
     
     

      
          	注册用户名：
     
     
     
     

      
          	 <input type="text" name="userName" id="userName" onblur="checkUser();"/>
     
     
     
     

      
          	 <label id="checkResult"></label>
     
     
     
     

      
          	 <br/>
     
     
     
     

      
          	注册密码：
     
     
     
     

      
          	<input type="password" name="password" id="password"/><br/>
     
     
     
     

      
          	确认密码：
     
     
     
     

      
          	<input type="password" name="password2" id="password2"/><br/>
     
     
     
     

      
          	<input type="submit" value="提交"/>
     
     
     
     

      
          	</form>
     
     
    
    

在 HTML文件中对id 为 userName的文本框元素添加了 onblur 事件。这样，当这个文本框失去焦点，即用户填完了注册用户名，准备继续填写注册密码时，事件被触发。JavaScript方法checkUser()被调用。下面是checkUser()的定义：

    
    

     
     

      
      var req;
     
     
     
     

      
      function checkUser(){
     
     
     
     

      
      var checkResult = document.getElementById("checkResult");
     
     
     
     

      
      checkResult.innerHTML="正在检测用户名...";
     
     
     
     

      
      var userName=document.getElementById("userName").value;
     
     
     
     

      
      //得到浏览器中可以发送http请求的对象，本例只对IE5.5+有效
     
     
     
     

      
      req=new ActiveXObject("Microsoft.XMLHttp");
     
     
     
     

      
      req.open("get","http://localhost:8080/test1/CheckUserName.jsp? checkUserName="+userName);
     
     
     
     

      
      //javascript特殊语法，表明req的状态改变将调用handleRequest方法
     
     
     
     

      
      req.onreadystatechange=handleRequest;
     
     
     
     

      
      req.send(null);
     
     
     
     

      
      }
     
     
    
    

为了便于理解，JavaScript方法checkUser()被写得很简单。其中最关键的步骤就是方法将会生成一个XMLHttpRequest对象在IE浏览器中，这个对象以ActiveX控件的形式出现。有了XMLHttpRequest对象之后，JavaScript方法可以利用它直接发送异步请求到服务器端而不需要刷新当前浏览器页面。当服务器端返回处理结果时， XMLHttpRequest对象的状态将会发生改变，这样会触发相应的 JavaScript方法被调用。在案例中，handleRequest()方法就是用来处理服务器端返回的结果。

编写 handleRequest 方法：

    
    

     
     

      
      function handleRequest(){
     
     
     
     

      
      var checkResult = document.getElementById("checkResult");
     
     
     
     

      
                 //判断就绪状态
     
     
     
     

      
      if(req.readyState==4){
     
     
     
     

      
      if(req.status==200){
     
     
     
     

      
      checkResult.innerHTML=req.responseText;
     
     
     
     

      
      }
     
     
     
     

      
      else{
     
     
     
     

      
      alter("An error occurred:"+req.statusText);
     
     
     
     

      
      }
     
     
     
     

      
      }
     
     
     
     

      
      }
     
     
    
    

HandlerRequest()方法的逻辑也比较简单，当服务器端有正常返回值时，就在 id 为 checkResult 的 label 元素中添加一段HTML，其值就是由服务器端返回的数据。