AJAX实现无刷新验证用户名

<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="/ajax/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">
			用户名字：<input type="text" onkeyup="checkName()" name="username1" 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

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

AJAX实现无刷新验证用户名

猜你在找的Ajax相关文章