ajax学习之xml数据处理实例（网页注册用户名无刷新检测）

来源：互联网发布：劈照片的软件编辑：程序博客网时间：2024/05/17 02:06

文件 reg.php

<html>

<head>
<title>用户注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" onkeyup="checkName();" name="username1" id="username">
<input style="border-width: 0;color: red;" type="text" id="myresult" value="">
<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>
<script language="javascript">

var xmlHttpRequest;//xml对象变量

var myre=document.getElementById("myresult");

//不同的浏览器获取对象xmlhttprequest 对象方法不一样

if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}else{
xmlHttpRequest=new XMLHttpRequest();
}
function checkName(){
var name=document.getElementById("username");

if(xmlHttpRequest){

//通过xmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果false表示不使用异步

var url="registerPro.php?"+"&username="+name.value;

//打开请求.

xmlHttpRequest.open("get",url,true);

//指定回调函数.chuli是函数名

xmlHttpRequest.onreadystatechange=chuli;

//真的发送请求,如果是get请求则填入 null即可
//如果是post请求，则填入实际的数据

xmlHttpRequest.send(null);
}

}

function chuli(){

//window.alert("处理函数被调用"+myXmlHttpRequest.readyState);
//取出从registerPro.php页面返回的数据

if(xmlHttpRequest.readyState==4){
myre.value=xmlHttpRequest.responseText;
}
}

</script>

</html>

文件regjudge.php

<?php

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

//接收数据
$username=$_GET['username'];
if($username=="张三"){
echo "用户名不可以用";//注意，这里数据是返回给请求的页面.
}else{
echo $username."用户名可以用";
}

0 0