使用Ajax技术验证用户名是否存在

在注册系统的开发中，有事需要在用户输入完用户名，当输入框失去焦点时验证用户名是否存在。这个基本上在任何注册系统中都有这个特性。

要想实现这个功能可以使用ajax技术，我们可以使用javascript原生的ajax，也可以使用其他框架提供的ajax（如大家熟悉的jquery），本篇文章我将介绍js原生的ajax技术。

首先，在html中type如下代码：

<form action="register.php" method="post">
  <div>用户名：<input type="text" name="username" id="input1" οnfοcus="change()" οnblur="onb()"><textarea id="error_username" style="display:inline-block;visibility:hidden;"></textarea></div>
  <div>密码：<input type="password" name="password"></div>
           <input style="background:#765;" type="submit" name="submit" value="提交"></input> 
</form>

这里主要要关注就是username这个input标签的οnblur="onb()"，这个当input失去焦点时会被触发的函数。

接下来在看看js文件：

function onb(){
		console.log("trigger blur");
		time&&clearInterval(time);
		//check the username is exists user ajax
		var replit=$("#input1").val()+"";
		var http=false;
		var error=document.getElementById("error_username");
		var numLetter=/^[a-zA-Z-0-9]+$/;
		if(replit==""){
			error.innerHTML="输入为空！"
			error.style.visibility="visible";
		}
		else
		{
			// if(replit.match(numLetter)){
				if(window.XMLHttpRequest){
					console.log("this is chrome XMLHttpRequest")
					http=new XMLHttpRequest();
				}else{
					console.log("this is IE XMLHttpRequest")
					http=new ActiveXObject("Microsoft.XMLHTTP");
				}
				if(http){

					http.open("POST","Check.php",true);

					http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
					console.log(http);
					http.onreadystatechange=function(){

						if(http.readyState==4&&http.status==200){
							error.innerHTML=http.responseText;
							error.style.visibility="visible";
                           switch(http.responseText){
                           	case 'fail':
                           	   error.innerHTML="the username was not provided";
                           	break;
                           	case 'user_exists':
                           	   error.innerHTML="the username already exists";
                           	break;
                           	case 'user_doesnt_exist':
                           	   error.innerHTML="the username was not found on the database,continue";
                            break;
                           }
						};
						http.send("username="+replit);

					}
					//error.innerHTML="";
					//error.style.visibility="hidden";
				}else{
					error.innerHTML="无效的数字！！！";
				    error.style.visibility="visible";
				}
				
			// }
			// console.log(http);
		}

	};

上面这段代码看起来很长，其实就很简单，首先获取input的内容，验证内容是否为空，接着创建XMLHttpReauest对象，使用此对象打开一个会话连接，然后发送请求头文件，等待请求的状态，状态改变则执行switch的中代码，最后发送username数据到check.php中。

下面来看看php中的文件：

<?php
echo "connect to mysql successfully";
$return='fail';

class Checking{
     public function Checking($con,$sql);
     {
     	$this->con=$con;
     	$this->sql=$sql;
     	self::func()
     }	

     public function func(){
     	$result="ok";
     	if(mysqli_connect_errno()==0{
     		if($result==mysqli_query($this->con,$this->query)){
     			$result=mysqli_num_rows($result)>0?'user_exists':'user_doesnt_exist';
     		}
     	}
     	return $result;
     }
}
$con=mysqli_connect("localhost","root","","my_db");
if(!$con)
         {
          echo "connect to mysql error:".mysqli_connect_errno();
         }
         else{
          echo "connect to mysql successfully";
         }
  if($_POST['username']){
	$desired=mysqli_real_escape_string($_POST['username']);
	$return=new Checking($con,"SELECT username FROM user WHERE username='$desired'");
}

?>

这里创建了一个Checking类，累的主要功能是查询数据库是否存在username的值，并作出回应。代码的最后面就是简单地实现了这个类的功能达到相应目的。

你可以复制上面的代码，试试！