AJAX实例的表单验证

实例简述
从客户端页面表单中输入用户名，通过AJAX请求服务器端进行唯一性检测
包括四个文件
formValidate_ajax.js
formValidate.js
formValidate.html
formValidate.php

ajax文件 formValidate_ajax.js
/**
* 创建XMLHttpRequest对象
*
*/
var xmlHttp = false;
function sendRequest(url)
{
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overridMimeType)
{
xmlHttp.overridMimeType("txt/html");
}
}

if(!xmlHttp)
{
window.alert('创建XMLHttpRequest对象失败');
return false;
}
//指定处理函数
xmlHttp.onreadystatechange = processRequest;
//指定处理页面
xmlHttp.open('GET',url,true);
//发送请求
xmlHttp.send(null);
}

/**
* 处理服务器返回信息的函数
*
*/
function processRequest()
{
//判断XMLHttpRequest对象的目前状态
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
//信息已经返回，可以进行处理
alert(xmlHttp.responseText);
}
}
}

客户端表单验证js文件 formValidate.js

function check_username()
{
var username = document.forms(0).username.value;
if(username == "")
{
alert("username can't null!");
}
else
{
sendRequest('server.php?username=' + username);
}
}

客户端页面 formValidate.html

<script language="javascript" src="formValidate_ajax.js"></script>
<script language="javascript" src="formValidate.js"></script>
<form id="form1" name="form1" method="post" action="">
<input name="textfield" type="text" value="这里的值在检测时不会被改变" /><br />
<input name="username" type="text" id="username" />
<input name="check" type="button" id="check" onclick="check_username();" value="检测" />
<input name="commit" type="submit" id="commit" value="提交" />
</form>

服务器端页面 formValidate.php

<?php
if($username == "test")
{
echo "the name of you input is used! please input again!";
}
else
{
echo "ok!";
}
?>