二十三章 AJAX学习笔记（二）检测用户名-原创手记-慕课网

一、zhuce.php
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>用户注册</title>
<script type="text/javascript">
//创建ajax引擎
function getXmlHttpObject(){
//不同的浏览器获取xmlhttprequest 的方法不一样
if(window.ActiveXObject){
//window.alert('ie');
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else{
//window.alert('ff');
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
function checkName(){
myXmlHttpRequest=getXmlHttpObject();//1号线
if(myXmlHttpRequest){
//window.alert("创建Ajax引擎成功！");
//通过myXmlHttpRequest对象发送请求到服务器的某一个页面
//第一个参数表示请求的方式，get/post
//第二个参数指定url，对那个页面发出ajax请求(本质仍然是http请求)，只要是web开发的底层是http请求，http的底层是tcp/ip协议
//第三个参数 true 表使用异步机制，false表示不使用异步机制。
//打开请求
//var url="/ajax/registerPro.php?username="+$("username").value;
//var url="/ajax/registerPro.php?mytime="+new date()+"&username="+$("username").value;
var url="registerPro.php";
//这个是要发送数据
var data="username="+$("username").value;
//window.alert(url);
myXmlHttpRequest.open("post",url,true);
//这句话不可少
//http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数 . chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求，如果是get请求发送null即可；如果是post请求，则填入实际的请求即可
//myXmlHttpRequest.send(null); //2号线
myXmlHttpRequest.send(data); //2号线
}
}
//回调函数
function chuli(){

//window.alert("回调函数成功!!"+xmlHttpRequest.readyState);  
//还是取值了  
if(xmlHttpRequest.readyState==4){  
        //window.alert("服务器返回"+xmlHttpRequest.responseText);  
        $("myres").value=xmlHttpRequest.responseText;  
    }

}
//这里写一个函数
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
用户名字1：<input type="text" onblur="checkName()" name="username1" id="username" />
用户名字：<input type="text" onkeyup="checkName()" name="username2" id="username" />
<input onclick="checkName();" type="button" value="验证用户名" /><input style="border-width:0px;color:red;" type="text" id="myres"/> <br />
用户密码：<input type="password" name="password" /> <br />
电子邮件：<input type="text" name="email" /> <br /> <input type="button" value="注册账号">
</form>
</body>
</html>

二、registerPro.php
<?php
$username = $_POST['username'];
// echo "用户名是：" . $username; // 3号线
if ($username == "zhosoft") {
echo "此用户名不可用！"; // 注意，这里的数据是返回给请求的页面。
} else {
echo "恭喜您，此用户名可用！";
}
?>