php+ajax实现用户名验证

form.html 

<script src="ajax.js"></script>

<script>
var username = document.getElementById("user");
function show(username){
	if(username==""){
		alert("用户名不能为空!");
		return;
	}
	var ajax=Ajax();
	var userobj=document.getElementById("userid");
	ajax.post("form.php", {username:username}, function(data){
			userobj.innerHTML=data;
			if(document.getElementById("error").value != "") {
				//document.myform.username.select();
	            document.myform.username.focus();
	 }else {
		 document.myform.pass.select();
		 }	
		});
	
	}
	
</script>	


<form action="" method="post" name="myform">
	username: <input type="text" onblur="show(this.value)" name="username" id="user"><span id="userid"></span><br>
	password: <input type="password" name="pass"><br>

	<input type="submit" value="submit">
</form>	

ajax.js  文件，主要是创建ajax对象
function Ajax(recvType){
	var aj=new Object();
	aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML   判断返回的对象是html还是xml
	aj.targetUrl='';                                       //目标url
	aj.sendString='';                                      //发送的字符串
	aj.resultHandle=null;                                  //返回的字符串

	aj.createXMLHttpRequest=function(){
		var request=false;
		
		//window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
		if(window.XMLHttpRequest){
			request=new XMLHttpRequest();

			if(request.overrideMimeType){
				request.overrideMimeType("text/xml");
			}
		

		//window对象中有ActiveXObject属性存在就是IE
		}else if(window.ActiveXObject){
			
			var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];

			for(var i=0; i<versions.length; i++){
					try{
						request=new ActiveXObject(versions[i]);

						if(request){
							return request;
						}
					}catch(e){
						request=false;
					}
			}
		}
		return request;
	}

	aj.XMLHttpRequest=aj.createXMLHttpRequest();   //将aj的XMLHttpRequest 属性设置为获得的XMLHttpRequest对象

	aj.processHandle=function(){
		if(aj.XMLHttpRequest.readyState == 4){
			if(aj.XMLHttpRequest.status == 200){
				if(aj.recvType=="HTML")
					aj.resultHandle(aj.XMLHttpRequest.responseText);
				else if(aj.recvType=="XML")
					aj.resultHandle(aj.XMLHttpRequest.responseXML);
			}
		}
	}

	aj.get=function(targetUrl, resultHandle){
		aj.targetUrl=targetUrl;	
		
		if(resultHandle!=null){
			aj.XMLHttpRequest.onreadystatechange=aj.processHandle;	
			aj.resultHandle=resultHandle;	
		}
		if(window.XMLHttpRequest){
			aj.XMLHttpRequest.open("get", aj.targetUrl);
			aj.XMLHttpRequest.send(null);
		}else{
			aj.XMLHttpRequest.open("get", aj.targetUrl, true);
			aj.XMLHttpRequest.send();
		}
		
	}

	aj.post=function(targetUrl, sendString, resultHandle){
		aj.targetUrl=targetUrl;

        //发送字符串的几种不同形式，一种是以字符串的形式，一种是以对象的形式，针对不同形式，将传入的字符串转化为ajax能接受的形式
		if(typeof(sendString)=="object"){
			var str="";
			for(var pro in sendString){   //javascript中对象的用法
				str+=pro+"="+sendString[pro]+"&";	
			}
			aj.sendString=str.substr(0, str.length-1); //字符串长度减一，为什么是在post方法中使用&，这不是相当于把所有的查询字符串放在一个字符串中么？
		}else{
			aj.sendString=sendString;
		}

		if(resultHandle!=null){
			aj.XMLHttpRequest.onreadystatechange=aj.processHandle;	
			aj.resultHandle=resultHandle;	
		}

		aj.XMLHttpRequest.open("post", targetUrl);
		aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		aj.XMLHttpRequest.send(aj.sendString);
		
	}

	return aj;
}

form.php文件，主要是从数据库中查找并响应

<?php
	header("Content-Type:text/html;charset=utf-8");

	$mysqli=new mysqli("localhost", "root", "123456", "xsphpcms");

	$result=$mysqli->query("select * from cms_user where userName='{$_POST["username"]}'");

	if($result->num_rows > 0){
		echo "<font color='red' id='error'>用户{$_POST["username"]}已经存在,不能使用</font>";
	}else{
			echo "<font color='green' id='pass'>用户{$_POST["username"]}可以使用</font>";
	}
?>