自己实现的ajax表单验证

今天学习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字符串 www.2cto.com
29. echo $xmlString;
config.php：用于初始化，定义连接数据库的文件。
1. define ('HOST','localhost');
2. define ('USER','joe');
3. define ('PASSWORD','123');
4. define ('DATABASE','ajax');

 效果图：