自己实现的ajax表单验证

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

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

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

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

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

//创建XMLHttpRequest对象
var xmlhttp = createXmlHttpObject();
var serverAddress = 'validate.php';
function createXmlHttpObject(){
    var xmlhttp;
    try{
        xmlhttp = new XMLHttpRequest();
    }catch(e){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){}
    }
    if(!xmlhttp){
        alert("Error creating XMLHttpRequest object");
    }else{
        return xmlhttp;
    }
}

2、调用服务器上的文件

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

3、处理http请求的函数

 

//处理http响应的函数
function handleRequestChange(){
    //当readyState为4时，读取服务器响应
    if(xmlhttp.readyState == 4){
        // 当http状态为'ok'时继续
        if(xmlhttp.status == 200){
            try{
                //从服务器读取响应
                readResponse();
            }catch(e){
                alert('Error:'+e.toString());
            }
        }else{
        alert('Error:'+xmlhttp.statusText);
        }
    }

4、读取服务器响应

 

//读取服务器响应
function readResponse(){
    //获取文档元素
    var xmlresponse = xmlhttp.responseXML;

    result = xmlresponse.getElementsByTagName('result')[0].firstChild.data;
    fieldID = xmlresponse.getElementsByTagName('fieldid')[0].firstChild.data;

    //找到显示错误的html元素
    document.getElementById(fieldID+'Failed').className = (result == '0') ? 'error' : 'hidden';
}

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

require('validate.class.php');

$validator = new Validate();

$value = $_GET['value'];
$fieldID = $_GET['fieldID'];

//建立一个新的xml文件
$dom = new DOMDocument();
$response = $dom->createElement('response');
$dom->appendChild($response);
//创建result节点
$result = $dom->createElement('result');
$response->appendChild($result);
$resultText = $dom->createTextNode($validator->ValidateAjax($value,$fieldID));
$result->appendChild($resultText);

//创建fieldid节点
$fieldid = $dom->createElement('fieldid');
$response->appendChild($fieldid);
$fieldidText = $dom->createTextNode($fieldID);
$fieldid->appendChild($fieldidText);

//在一个字符变量中建立xml结构
$xmlString = $dom->saveXML();
//清除任何输出流，否则会不能通过document.getElementsByTagName()方法访问'<result>'和'<fieldid>'元素
if(ob_get_length) ob_clean();
//输出xml字符串
echo $xmlString;

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

define ('HOST','localhost');
define ('USER','joe');
define ('PASSWORD','123');
define ('DATABASE','ajax');

效果图：