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事件一直出錯，也是調試了好久才發現了這個問題。如果有什麼錯誤的地方，希望各位能指出來，並且十分歡迎大家一起討論，共同學習。