今天学习ajax的时候，实现了ajax表单验证功能。表单的验证有了ajax的应用给用户带来了更好的体验，用户无需等待，ajax在后台与服务器交互并返回检验用户的信息响应。

index.html：接口文件，主要是呈现表单的结构，以及引入css和js的文件。

validate.css：样式表，实现样式的文件。

validate.js：js文件，主要实现功能的调用。

1、创建ajax中的XMLHttpRequest对象，在后台与服务器文件交互，及时的返回信息。

  1. //创建XMLHttpRequest对象 
  2. var xmlhttp = createXmlHttpObject(); 
  3. var serverAddress = 'validate.php'; 
  4. function createXmlHttpObject(){ 
  5.     var xmlhttp; 
  6.     try{ 
  7.         xmlhttp = new XMLHttpRequest(); 
  8.     }catch(e){ 
  9.         try{ 
  10.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  11.         }catch(e){} 
  12.     } 
  13.     if(!xmlhttp){ 
  14.         alert("Error creating XMLHttpRequest object"); 
  15.     }else{ 
  16.         return xmlhttp; 
  17.     } 
  18. }   

2、调用服务器上的文件

  1. //调用服务器上的脚本文件 
  2.   function validate(value,fieldID){ 
  3.       if(xmlhttp){ 
  4.           try{ 
  5.               //仅在空闲的时候并的时候继续 
  6.               if((xmlhttp.readyState == 0 || xmlhttp.readyState == 4) ){ 
  7.                   //构造一个服务器请求来验证取出的数据 
  8.                   xmlhttp.open('GET',serverAddress+'?value='+value+'&fieldID='+fieldID,true); 
  9.                   xmlhttp.onreadystatechange = handleRequestChange; 
  10.                   xmlhttp.send(null); 
  11.               } 
  12.           }catch(e){ 
  13.               alert('Error:'+e.toString()); 
  14.           } 
  15.       } 
  16.   } 

3、处理http请求的函数

 

  1. //处理http响应的函数 
  2. function handleRequestChange(){ 
  3.     //当readyState为4时，读取服务器响应 
  4.     if(xmlhttp.readyState == 4){ 
  5.         // 当http状态为'ok'时继续 
  6.         if(xmlhttp.status == 200){ 
  7.             try{ 
  8.                 //从服务器读取响应 
  9.                 readResponse(); 
  10.             }catch(e){ 
  11.                 alert('Error:'+e.toString()); 
  12.             } 
  13.         }else{ 
  14.         alert('Error:'+xmlhttp.statusText); 
  15.         }    
  16.     } 

4、读取服务器响应

 

  1. //读取服务器响应 
  2. function readResponse(){ 
  3.     //获取文档元素 
  4.     var xmlresponse = xmlhttp.responseXML; 
  5.      
  6.     result = xmlresponse.getElementsByTagName('result')[0].firstChild.data; 
  7.     fieldID = xmlresponse.getElementsByTagName('fieldid')[0].firstChild.data; 
  8.  
  9.     //找到显示错误的html元素 
  10.     document.getElementById(fieldID+'Failed').className = (result == '0') ? 'error' : 'hidden'; 
  11. } 

validate.php与validate.class.php：服务器上脚本文件，用于返回用户输入信息的响应。

  1. require('validate.class.php'); 
  2.  
  3. $validator = new Validate(); 
  4.  
  5. $value = $_GET['value']; 
  6. $fieldID = $_GET['fieldID']; 
  7.  
  8. //建立一个新的xml文件 
  9. $dom = new DOMDocument(); 
  10. $response = $dom->createElement('response'); 
  11. $dom->appendChild($response); 
  12. //创建result节点 
  13. $result = $dom->createElement('result'); 
  14. $response->appendChild($result); 
  15. $resultText = $dom->createTextNode($validator->ValidateAjax($value,$fieldID)); 
  16. $result->appendChild($resultText); 
  17.  
  18. //创建fieldid节点 
  19. $fieldid = $dom->createElement('fieldid'); 
  20. $response->appendChild($fieldid); 
  21. $fieldidText = $dom->createTextNode($fieldID); 
  22. $fieldid->appendChild($fieldidText); 
  23.  
  24. //在一个字符变量中建立xml结构 
  25. $xmlString = $dom->saveXML(); 
  26. //清除任何输出流，否则会不能通过document.getElementsByTagName()方法访问'<result>'和'<fieldid>'元素 
  27. if(ob_get_length) ob_clean(); 
  28. //输出xml字符串 
  29. echo $xmlString; 

config.php：用于初始化，定义连接数据库的文件。

  1. define ('HOST','localhost'); 
  2. define ('USER','joe'); 
  3. define ('PASSWORD','123'); 
  4. define ('DATABASE','ajax'); 

效果图：

自己实现的ajax表单验证_表单验证

 

自己实现的ajax表单验证_表单验证_02

自己实现的ajax表单验证_ajax_03