自己实现的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\');

 效果图：