萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> 編程語言綜合 >> 用AJAX實現php用戶名驗證

用AJAX實現php用戶名驗證

//該文件為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>
//該文件為registerProcess.php,在服務器端
<?php
	//接收數據
	$username = $_GET["username"];
	
	if($username=="shunping"){
		echo "用戶名不可用";
	}else{
		echo "用戶名可用";
	}
	echo "用戶名:".$username;//3號線
?>
copyright © 萬盛學電腦網 all rights reserved