您的位置：首页 > 其它

ajax的基本应用--检查用户名是否被注册案例

2013-05-27 16:39 435 查看

ajax的基本应用--检查用户名是否被注册案例，这里重点介绍ajax的如何使用，我相信大家看了之后可以融会贯通。

参考代码：

register.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>用户注册</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">

//创建ajax引擎
function getXMLHttpRequest(){
var xmlHttp;
if(window.ActiveXObject){
// Internet Explorer
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}else{
// Firefox, Opera 8.0+, Safari
xmlHttp= new XMLHttpRequest();
}

return xmlHttp;
}

//验证用户
var xmlHttpRequest;
function checkUser(){
xmlHttpRequest=getXMLHttpRequest();
//清除缓存 get 方式提交
/*        var url="/ajax/registerProcess.php?time="+new Date()+"&username="+$("username").value;
//var url="/ajax/registerProcess.php?username="+$("username").value;
xmlHttpRequest.open("get",url,true);
//触发器
xmlHttpRequest.onreadystatechange=check;
xmlHttpRequest.send(null);
*/
//post 方式提交
var url="/ajax/registerProcess.php";
var data="username="+$("username").value;
xmlHttpRequest.open("post",url,true);
//post请求需要加入这句
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//触发器
xmlHttpRequest.onreadystatechange=check;
xmlHttpRequest.send(data);
}

//回调函数
function check(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status=='200'){
//window.alert("OK");
//window.alert("返回用户名"+xmlHttpRequest.responseText);
//$("myres").value=xmlHttpRequest.responseText;

//返回是个对象
/* //处理xml数据
//window.alert(xmlHttpRequest.responseXML);
var mes=xmlHttpRequest.responseXML.getElementsByTagName("mes");
var mes_val=mes[0].childNodes[0].nodeValue;
$("myres").value=mes_val;
*/
//处理json数据 使用eval()函数把返回的字符串转成对应的对象
var mes=xmlHttpRequest.responseText;
var mes_obj=eval("("+mes+")");
//window.alert(mes_obj);
$("myres").value=mes_obj.res;

}
}
}
//获取dom对象
function $(id){
return document.getElementById(id);
}
</script>
</head>

<body>
<form action="???" method="post">
用户名字:<input type="text"  name="username1" id="username"><input type="button" onclick="checkUser();" value="验证用户名">
<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>

</body>
</html>

registerProcess.php

<?php

//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
//header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器返回的数据是文本格式
header("Content-Type: text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");

//接收
//$username=$_GET['username'];
$username=$_POST['username'];

$info="";
if($username=="test1"){
//echo "用户已注册";
//$info.="<res><mes>用户名已注册</mes></res>";
$info='{"res":"用户名已注册"}';
}else{
//echo "可以注册";
//$info.="<res><mes>可以注册</mes></res>";
$info='{"res":"可以注册"}';
}

echo $info;
?>

截图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航