php使用ajax实现注册账号时判断账号是否已经存在

在写注册界面的时候，比如账号输入框，我们要实现的功能不仅仅是判断有没有输入，或者说是格式对不对，还需要进行的一步操作便是对账号是否已经存在进行判断；对于这个功能其实也挺简单实现，就是在form表单的提交页面进行数据库查询操作。而这样做便是要提交一次页面，但我们平时在注册的时候也碰到过这样的网站，在我们刚输入账号的时候，后面的就有提示框告诉你这个用户是否可以使用。两者一相比，后者所实现的效果肯定比前者实现的效果好很多，要实现这样的功能便需要掌握ajax的相关知识了。

简单介绍一下ajax:

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

想要了解更多的同学可以去百度查。

下面便以我自己写的一个例子来讲,截取其中部分代码讲解。

首先是html的代码：

 <tr>
                    <td style="width:100px;">
                        账        号：
                    </td>
                    <td style="width:250px;">
                        <input type="text" name="userid" id="userid" class="form-control" placeholder="User Id"/>
                    </td>  
                    <td style="width:200px;">
                    	<span id="useridSpan" style="color:#F00; font-size:9px;">*6-18位字母或数字</span>
                    </td>           
                </tr>

     然后是js的代码：

<script language="javascript">
	var xmlHttp;
	var useridObj=document.getElementById("userid");
	useridObj.οnblur=checkUserid;//onblur是指当离开输入框是所触发的事件
	
	//这个函数可以直接拷过去用
	function S_xmlhttprequest()
	{
		if(window.ActiveXObject)
		{
			xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
		else if(window.XMLHttpRequest)
		{
			xmlHttp = new XMLHttpRequest();
		}
	}
	
	 //这个函数就是你要进行账号判断时所要实现的功能
	  function checkUserid(){
	   var useridValue = trim(useridObj.value);
	   var useridRegex =  /^\w{6,18}$/;
	   var span = document.getElementById("useridSpan");
	   var msg ="   <img src='../images/loading.jpg'  style='width:12px'>";
	   if(useridValue == null || useridValue == "")
	   {
			msg ="<font color='red'>账号不能为空！</font>";
	   }
	   else if(!useridRegex.test(useridValue))
	   {
			msg ="<font color='red'>账号长度不正确！</font>";
	   }
	   //检查账号时候存在
	   else
	   {
	   	    S_xmlhttprequest();
			//这里是异步运行了，当js执行到这一句话后不会等待他的返回值，而是直接往下进行，我测试出来的效果是当你js代码执行完了这里的值才返回来。
	   	    xmlHttp.open("POST","regist_ajax_form.php?id="+useridValue,true);//这个页面便是你要进行选择查询的PHP页面
	        xmlHttp.onreadystatechange = byphp;//接受返回值
	        xmlHttp.send(null);
	   }
	   
	   span.innerHTML = msg;
  }
  
  //接受返回值，xmlHttp.readyState一共有五种状态，想了解具体情况可以去百度查询
   function byphp()
	{
		var msg;
	if(xmlHttp.readyState==1)//等于1是指还未获取返回值的意思
	{
		document.getElementById('useridSpan').innerHTML = "   <img src='../images/loading.jpg'  style='width:12px'>";
	}
	else
	{
		var byphp100 = xmlHttp.responseText;//接受PHP的返回值		
		document.getElementById('useridSpan').innerHTML = byphp100; //设置span里的内容
	}
}
</script>

然后是PHP的代码，也就是js代码中的regist_ajax_php

<?php
if($_GET['id'])
{
	sleep(1);//为了显示等待检测这么一个动态效果，所以这里等待一秒执行
	include("connection.php");
	
	$sql = "select * from userform where userid='$_GET[id]'";
	$result = mysql_query($sql);
	
	//这里的echo输出的内容便是将要返回给之前byphp()这个函数的值
	if(is_array(mysql_fetch_row($result)))
	{
		echo "用户名已经存在！";
	}
	else
	{
		echo "   <img src='../images/true.gif' style='width:12px'>";
	}
}
?>

注意：采用ajax是进行异步运行的，也就是说js和xmlHttp.open()打开的php页面是同时进行的，要是想实现表单提交再次进行判断的时候要注意返回值的问题。

差不多就这些了，我也是才接触ajax，只是会应用，因为一个异步运行的原因，导致checkUserid的返回值除了问题，以至于表单的submit事件一直出错，也是调试了好久才发现了这个问题。如果有什么错误的地方，希望各位能指出来，并且十分欢迎大家一起讨论，共同学习。