用AJAX实现php用户名验证

　2013-01-18 08:31:09　来源：WEB开发网　　　

核心提示：//该文件为register.php,在客户端<html><head><title>用户注册</title><meta http-equiv = "content-type" content = "text/html;charset=u

//该文件为register.php,在客户端
<html>
<head>
<title>用户注册</title>
<meta http-equiv = "content-type" content = "text/html;charset=utf-8"/>
<script type = "text/javascript" >
	//创建ajax引擎
	function getXmlHttpObject(){
		var xmlHttpRequest;
		//不同浏览器获取对象XmlHttpRequest对象方法不同
		if(window.ActiveXObject){
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xmlHttpRequest = new XMLHttpRequest();
		}
		return xmlHttpRequest;
	}
	/*
	function getXmlHttpObject(){
		//不同浏览器获取对象XmlHttpRequest对象方法不同
		var xmlHttp = null;
		try{
			//Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();
		}catch(e){
			//Internet Explorer
			try{
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		return xmlHttp;
	}
	*/
	
	var myXmlHttpRequest = "";
	//验证用户名是否存在
	function checkName(){
		//1号线
		myXmlHttpRequest = getXmlHttpObject();

		//判断创建成功？
		if(myXmlHttpRequest){
			//通过myXmlHttpRequest对象发送请求到服务器的某个页面
			//第一个参数表示请求的方式, "get"/"post"
			//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是HTTP请求)
			//第三个参数.true表示使用异步机制，false表示不使用异步机制
			
			//注意：此处如果"username"和"="之间有空格，否则会出错，在服务器端接收不到"username";
			//注意：如果"="之后有空格则将此空格也作为接收到的username的值的一部分。
			//即在服务器端收到的username的值=“ ”(即空格)+从客户端发送的username值。
			var url = "/AjaxTest/registerProcess.php?username=" + $("username1id").value;
			//window.alert(url);
			
			//打开请求
			myXmlHttpRequest.open("get",url,true);
			//指定回调函数.process是个函数名
			myXmlHttpRequest.onreadystatechange = process;

			//真正发送请求。如果是get请求则填入null即可
			//如果是post请求，则填入实际的数据
			//2号线
			myXmlHttpRequest.send(null);			
			
		}
	}

	//回调函数
	function process(){
		//window.alert("这是回调函数" + myXmlHttpRequest.readyState);
		//我要取出从registerProcess.php页面返回的数据
		
		if(myXmlHttpRequest.readyState == 4){
			
			//取出值，根据返回信息的格式而定
			//window.alert("服务器返回" + myXmlHttpRequest.responseText);
			//4号线
			$('myResponse').value = myXmlHttpRequest.responseText;
		}
		
	}
	
	function $(id){
		return document.getElementById(id);
	}
</script>
</head>
<body>
	<form action = "" method = "post">
		用户名：<input type = "text" name = "username1" id = "username1id" >
			<input type = "button" onclick = "checkName();"  value = "验证用户名">
			<input style = "border-width: 0; color: red" type = "text" id = "myResponse">
			<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>

1 2 下一页