这里分别用get和post两种方法实现用户名的验证,使用的返回数据格式是Text格式
register.php页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest=""; //这里使用全局变量
//验证用户名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建是否成功
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,“get”/ “post”
/*
使用get方法发送请求,如果提交的用户名不变化,浏览器将不会真的发请求,而是缓存取数据,url
一、解决方法url后带一个总是变化的参数,比如当前时间
var url="registerProcess.php?mytime="+new Date()+"username="+$("username").value;
二、在服务器回送结果的时候,禁用缓存
在registerProcess.php上面加上
//这两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
*/
//第二个参数指定url,对那个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果使用false表示不使用异步机制
/*
------------------------------这里使用的是get的请求方法--------------------------------------
var url="registerProcess.php?username="+$("username").value;
//打开请求
myXmlHttpRequest.open("get",url,true);
//指定回调函数,chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求,则填入实际的数据
myXmlHttpRequest.send(null);
----------------------------------------------------------------------------------------------------------------
*/
//------------------------------这里使用的是post的请求方法--------------------------------------
var url="registerProcess.php";
//这个是要发送的数据
var data="username="+$("username").value;
myXmlHttpRequest.open("post",url,true);
//这句话必须
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=chuli;
myXmlHttpRequest.send(data);
}
}
function chuli(){
//我要取出从registerprocess.php页面返回的数据
//window.alert(myXmlHttpRequest.readyState);
if(myXmlHttpRequest.readyState==4){
//window.alert(myXmlHttpRequest.responseText);
$("myres").value=myXmlHttpRequest.responseText;
}
}
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
用户名字:<input type="text" name="username1" id="username" οnkeyup="checkName()" /><input type="button" value="验证用户名" οnclick="checkName()" />
<input style="border-width:0; color:red;" type="text" id="myres" />
<br />
用户密码:<input type="password" name="password" /><br />
电子邮件:<input type="text" name="email" /><br />
<input type="submit" value="用户注册" />
</form>
<form action="" method="post">
用户名字:<input type="text" name="username2" />
<br />
用户密码:<input type="password" name="password" />
<br />
电子邮件:<input type="text" name="email" /><br />
<input type="submit" value="用户注册" />
</form>
</body>
</html>
registerProcess.php页面
<?php
/*
//这两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
*/
// $username=$_GET['username']; //这是get方法请求
$username=$_POST['username']; //这是post请求方法
if($username=="123"){
echo "不可用..."; // 这里的数据是返回给请求的页面
}else{
echo "可用...";
}
?>
这里使用XML返回数据格式,是在以上的基础上进行改的
register.php页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
/*-----------------这里使用XML返回数据格式-----------------------*/
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建是否成功
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,“get”/ “post”
/*
使用get方法发送请求,如果提交的用户名不变化,浏览器将不会真的发请求,而是缓存取数据,url
一、解决方法url后带一个总是变化的参数,比如当前时间
var url="registerProcess.php?mytime="+new Date()+"username="+$("username").value;
二、在服务器回送结果的时候,禁用缓存
在registerProcess.php上面加上
//这两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
*/
//第二个参数指定url,对那个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果使用false表示不使用异步机制
/*
------------------------------这里使用的是get的请求方法--------------------------------------
var url="registerProcess.php?username="+$("username").value;
//打开请求
myXmlHttpRequest.open("get",url,true);
//指定回调函数,chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求,则填入实际的数据
myXmlHttpRequest.send(null);
----------------------------------------------------------------------------------------------------------------
*/
//这里使用post请求方法
var url="registerProcess.php";
//这个是要发送的数据
var data="username="+$("username").value;
myXmlHttpRequest.open("post",url,true);
//这句话必须
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=chuli;
myXmlHttpRequest.send(data);
}
}
//回调函数
function chuli(){
//我要取出从registerprocess.php页面返回的数据
//window.alert(myXmlHttpRequest.readyState);
if(myXmlHttpRequest.readyState==4){
//window.alert(myXmlHttpRequest.responseText);
// $("myres").value=myXmlHttpRequest.responseText;
//看看如何取出xml格式的数据
//获取mes节点
var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
//取出节点值
// window.alert(mes.length);
//mes[0] ->表示取出第一个mes节点
//mes[0].childNodes[0] ->表示第一个mes节点的第一个子节点
var mes_val=mes[0].childNodes[0].nodeValue;
// window.alert(mes_val);
$("myres").value=mes_val;
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
用户名字:<input type="text" name="username1" id="username" /><input type="button" value="验证用户名" οnclick="checkName()" />
<input style="border-width:0; color:red;" type="text" id="myres" />
<br />
用户密码:<input type="password" name="password" /><br />
电子邮件:<input type="text" name="email" /><br />
<input type="submit" value="用户注册" />
</form>
<form action="" method="post">
用户名字:<input type="text" name="username2" />
<br />
用户密码:<input type="password" name="password" />
<br />
电子邮件:<input type="text" name="email" /><br />
<input type="submit" value="用户注册" />
</form>
</body>
</html>
registerProcess.php页面
<?php
//这两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
// $username=$_GET['username']; 这是get方法请求
$username=$_POST['username']; //这是post请求方法
//这里我们看看如何处理格式是xml
$info="";
if($username=="123"){
$info.="<res><mes>用户名不可用,对不起</mes></res>";
}else{
$info.="<res><mes>用户名可以用,恭喜</mes></res>";
}
echo $info;
?>
这里使用json返回数据格式,是在以上的基础上进行改的
register.php页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
/*-----------------这里使用XML返回数据格式-----------------------*/
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建是否成功
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式,“get”/ “post”
/*
使用get方法发送请求,如果提交的用户名不变化,浏览器将不会真的发请求,而是缓存取数据,url
一、解决方法url后带一个总是变化的参数,比如当前时间
var url="registerProcess.php?mytime="+new Date()+"username="+$("username").value;
二、在服务器回送结果的时候,禁用缓存
在registerProcess.php上面加上
//这两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-Type:text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
*/
//第二个参数指定url,对那个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果使用false表示不使用异步机制
/*
------------------------------这里使用的是get的请求方法--------------------------------------
var url="registerProcess.php?username="+$("username").value;
//打开请求
myXmlHttpRequest.open("get",url,true);
//指定回调函数,chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求,则填入实际的数据
myXmlHttpRequest.send(null);
----------------------------------------------------------------------------------------------------------------
*/
//这里使用post请求方法
var url="registerProcess.php";
//这个是要发送的数据
var data="username="+$("username").value;
myXmlHttpRequest.open("post",url,true);
//这句话必须
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=chuli;
myXmlHttpRequest.send(data);
}
}
//回调函数
function chuli(){
//我要取出从registerprocess.php页面返回的数据
//window.alert(myXmlHttpRequest.readyState);
if(myXmlHttpRequest.readyState==4){
//window.alert(myXmlHttpRequest.responseText);
// $("myres").value=myXmlHttpRequest.responseText;
//看看如何取出xml格式的数据
//获取mes节点
var mes=myXmlHttpRequest.responseText;
//window.alert(mes);
//使用eval函数将mes字串,转成对应的对象
var mes_obj=eval("("+mes+")");
//window.alert(mes_obj.res);
//window.alert(mes_obj.id);
$("myres").value=mes_obj.res;
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
用户名字:<input type="text" name="username1" id="username" /><input type="button" value="验证用户名" οnclick="checkName()" />
<input style="border-width:0; color:red;" type="text" id="myres" />
<br />
用户密码:<input type="password" name="password" /><br />
电子邮件:<input type="text" name="email" /><br />
<input type="submit" value="用户注册" />
</form>
<form action="" method="post">
用户名字:<input type="text" name="username2" />
<br />
用户密码:<input type="password" name="password" />
<br />
电子邮件:<input type="text" name="email" /><br />
<input type="submit" value="用户注册" />
</form>
</body>
</html>
registerProcess.php页面
<?php
//这两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-Type:text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
// $username=$_GET['username']; 这是get方法请求
$username=$_POST['username']; //这是post请求方法
//这里我们看看如何处理格式是xml
$info="";
if($username=="123"){
//这里返回的json数据格式的字串 json数据是原生态数据,因此这种数据格式很稳定,而且描述能力强 json格式如下:"{属性名:属性值,属性名:属性值...}"
//如果数据返回的json是多组数据,则格式应当如下:
//$info="[{属性名:属性值,属性名:属性值...},{属性名:属性值,属性名:属性值...},....]";
//在xmlHttpRequest对象接受到json数据后,应当这样处理
//转成对象数组
//var res=eval("("+xmlHttpRequest.responseText+")");
//通过res可以取得你希望的任何一个值
//res[?].属性名
$info.='{"res":"该用户不可用","id":"1000"}';
}else{
$info.='{"res":"该用户可用","id":"1001"}';
}
echo $info;
?>