使用ajax写的用户名验证

来源：互联网发布：防身术知乎编辑：程序博客网时间：2024/05/29 18:32

这里分别用get和post两种方法实现用户名的验证，使用的返回数据格式是Text格式

}

//回调函数
function chuli(){
//我要取出从registerprocess.php页面返回的数据
//window.alert(myXmlHttpRequest.readyState);
if(myXmlHttpRequest.readyState==4){
//window.alert(myXmlHttpRequest.responseText);
$("myres").value=myXmlHttpRequest.responseText;
}

}

function $(id){
return document.getElementById(id);
}
</script>
</head>

<body>
<form action="" method="post">
用户名字：<input type="text" name="username1" id="username" onkeyup="checkName()" /><input type="button" value="验证用户名" onclick="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返回数据格式，是在以上的基础上进行改的

<!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="验证用户名" onclick="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返回数据格式，是在以上的基础上进行改的

<!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="验证用户名" onclick="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;
?>