在php中使用Xajax能夠即時(shí)與數(shù)據(jù)庫(kù)發(fā)生交互
帶給用戶(hù)更好的體驗(yàn)
主要的應(yīng)用有網(wǎng)頁(yè)的即時(shí)、不刷新的登錄系統(tǒng)
也可以利用于注冊(cè)系統(tǒng)中
即時(shí)驗(yàn)證用戶(hù)名是否被占用
一、基本目標(biāo)
首先在mysql中有一張用戶(hù)信息表user
編寫(xiě)一個(gè)用戶(hù)注冊(cè)系統(tǒng)，一開(kāi)始注冊(cè)按鈕是禁用的狀態(tài)
當(dāng)用戶(hù)輸入用戶(hù)名完畢時(shí)，馬上檢查這個(gè)用戶(hù)名是否被占用，如果是，禁用注冊(cè)按鈕，并彈出對(duì)話(huà)框
如果用戶(hù)輸入的用戶(hù)名沒(méi)有被占用，則解鎖注冊(cè)按鈕，但如果用戶(hù)輸入兩次輸入的密碼不一致，同樣不允許用戶(hù)注冊(cè)
直到用戶(hù)滿(mǎn)足所有注冊(cè)條件的時(shí)候，才放行
用戶(hù)注冊(cè)成功能夠成功把用戶(hù)名與密碼添加到數(shù)據(jù)庫(kù)之中，如上面的aa與b：
二、基本思想
由于第一個(gè)輸入框在失去焦點(diǎn)時(shí)，需要與數(shù)據(jù)庫(kù)發(fā)生交互，所以需要用到php的Xajax技術(shù)
關(guān)于什么是失去焦點(diǎn)，見(jiàn)我之前的《【JavaScript】組件焦點(diǎn)與頁(yè)內(nèi)錨點(diǎn)間傳值》（點(diǎn)擊打開(kāi)鏈接）一文，
關(guān)于什么是PHP的Xajax技術(shù)，與Xajax如何配置，可以參考我剛寫(xiě)的《【php】Xajax Helloworld》（點(diǎn)擊打開(kāi)鏈接）一文
而第二個(gè)輸入框與第三個(gè)輸入框不需要與數(shù)據(jù)庫(kù)發(fā)生交互，在前臺(tái)就可以做出判斷，因此僅僅使用javascript就可以，
下面的代碼說(shuō)明，不再對(duì)此進(jìn)行討論，因?yàn)橹拔以凇丁綣avaScript】表單即時(shí)驗(yàn)證，不成功不讓提交》（點(diǎn)擊打開(kāi)鏈接）一文中已經(jīng)對(duì)此討論得比較詳細(xì)了。
三、制作過(guò)程
分兩個(gè)頁(yè)面，一個(gè)是用戶(hù)填寫(xiě)注冊(cè)信息的頁(yè)面xajaxrec.php，一個(gè)是把用戶(hù)注冊(cè)信息填寫(xiě)到數(shù)據(jù)庫(kù)的處理頁(yè)面下xajxrecsuc.php
xajxrecsuc.php的代碼如下，與之前《【php】數(shù)據(jù)庫(kù)的增刪改查和php與javascript之間的交互》（點(diǎn)擊打開(kāi)鏈接）的插入處理頁(yè)面dbinsert.php根本就是一樣的，由于筆者用的是同一張用戶(hù)表，同一個(gè)數(shù)據(jù)庫(kù)，因此連代碼都不改就能夠使用了，就把“添加成功”四個(gè)大字，改成“注冊(cè)成功”而已：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注冊(cè)成功</title>
</head>
<body>
<?php
$username=$_REQUEST["username"];
$password=$_REQUEST["password"];
$con=mysql_connect("localhost","root","root");
if(!$con){
die("連接失敗！");
}
mysql_select_db("test",$con);
mysql_query("insert into user(username,password) values ('".$username."','".$password."');");
mysql_close($con);
?>
<script>
alert("注冊(cè)成功");
window.location.href="xajaxreg.php" rel="external nofollow" ;
</script>
</body>
</html>
然后重點(diǎn)來(lái)說(shuō)說(shuō)這個(gè)xajaxrec.php：
<?php
include 'xajax_core/xajax.inc.php';
$xajax=new xajax();
//首先在xajax聲明一個(gè)check函數(shù)
$xajax->registerFunction("check");
//這個(gè)check函數(shù)需要前臺(tái)傳來(lái)用戶(hù)名username
function check($username){
$orps=new xajaxResponse();
//連接數(shù)據(jù)庫(kù)，看看用沒(méi)有這個(gè)用戶(hù)名
$con=mysql_connect("localhost","root","root");
if(!$con){
die("連接失敗！");
}
mysql_select_db("test",$con);
$dbusername=null;
$result=mysql_query("select * from user where username='".$username."';");
while($row=mysql_fetch_array($result)){
$dbusername=$row["username"];
}
//如果沒(méi)有，根本不可能查出數(shù)據(jù)，對(duì)dbusername賦值的，所以dbusername還是為空的
if(is_null($dbusername)){
//彈窗，把id為submitbtn的提交按鈕disabled屬性清理掉，解鎖disabled
$orps->alert("恭喜，該用戶(hù)名未被占用，可以注冊(cè)");
$orps->clear("submitbtn","disabled");
}
else{
//否則彈窗之后為submitbtn上鎖，加上disabled屬性
$orps->alert("該用戶(hù)名已被占用，請(qǐng)更換被的用戶(hù)名");
$orps->assign("submitbtn","disabled","disabled");
}
//人走帶門(mén)，然后是三個(gè)xajax的指定動(dòng)作
mysql_close($con);
return $orps;
}
$xajax->processRequest();
$xajax->printJavascript();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用戶(hù)注冊(cè)</title>
</head>
<body>
用戶(hù)注冊(cè)
<!--為表單上個(gè)onsubmit屬性，是因?yàn)榈脩?hù)點(diǎn)擊提交按鈕的時(shí)候，跑完這個(gè)check()函數(shù)再提交這個(gè)表單-->
<form action="xajxregsuc.php" method="post" onsubmit="return check()">
<!--但用戶(hù)名的輸入框失去焦點(diǎn)時(shí)，也就是用戶(hù)輸入完成，光標(biāo)離開(kāi)這個(gè)輸入框的時(shí)候，馬上調(diào)用xajax中的check函數(shù)，帶過(guò)去的值就是本輸入框的內(nèi)容-->
用戶(hù)名：<input type="text" name="username" onblur="xajax_check(this.value);" /><br />
密碼：<input type="password" name="password" id="password" /><br />
<!--確認(rèn)密碼這里調(diào)用下面的javascript檢查即可-->
請(qǐng)?jiān)俅屋斎朊艽a:<input type="password" name="passwordconfirm" id="passwordconfirm" onchange="check()"/><br />
<input type="submit" id="submitbtn" value="注冊(cè)" disabled />
</form>
</body>
</html>
<script>
function check() {
var check = false;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("passwordconfirm").value;
if (password != pwdc) {
alert("兩次輸入密碼不一致");
check = false;
} else {
check = true;
}
return check;
}
</script>
至此整個(gè)注冊(cè)系統(tǒng)就完成。
四、展望