自己实现的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.zzzyk.com
29. echo $xmlString;
config.php：用于初始化，定义连接数据库的文件。
1. define ('HOST','localhost');
2. define ('USER','joe');
3. define ('PASSWORD','123');
4. define ('DATABASE','ajax');
效果图：
摘自 沙漠的蜗牛80
补充：Web开发 , 其他 ,
