玩玩YUI - 檢查帳號是否已經被使用
前言
YUI是Yahoo! Developer Network所推出的一個UI Library,
裡面提供了不少Javascript的函式庫,讓你可以更方便的建立一個更豐富的web介面.
在寫會員註冊的功能時,
很多人應該都會需要一個檢查會員帳號是否已經有人使用的功能,
在現在AJAX一直被提起的情況下,
很多人應該也都想要用AJAX的概念去達到檢查帳號重覆的功能,
而下面就是介紹怎麼使用YUI來寫個這樣的功能.
開始前
在開始寫這功能前,需要先下載YUI,
在筆者寫這篇文章時,YUI的最新版本是0.11.4,
檔案可以在這邊找到.
下在的檔案中包含了說明文件,範例及程式,
而這次所要用的只有connection manager的功能,
所以只要兩個檔案,一個是yahoo.js,一個是connection.js
yahoo.js可以在build/yahoo中找到,
而connection.js則是在build/connection中,
在build/yahoo中都個"yahoo-min.js"的檔案,
這個檔案的內容跟yahoo.js一樣,只是他將一些排版用的空格或是換行移掉以減少檔案的大小,
所以如果你的網站對傳輸的資料量很在意的話,那就可以使用yahoo-min.js.
而connection.js跟其他的js檔也都是如此.
所以準備好這兩個檔案後,在來就開始要寫程式了!
開始寫嘍!!
要使用AJAX的東西,程式的重點都是在前台的javascript,
而後台為了測試,所以我們只寫個簡單的判斷回傳0跟1,
程式碼如下 :
<%
If request("uid") = "adam" Then
response.write("1")
Else
response.write("0")
End If
%>
當所接收到的帳號為adam時,回傳1,否則回傳0,
而實際應用時,當然就是去撈資料庫,判斷有無資料後再回傳1或0
在來,進入重點,
在註冊的頁面將兩個js檔加進去,
程式如下 :
<script src="yahoo.js"></script>
<script src="connection.js"></script>
然後在帳號欄位旁多個按鈕,按下後去檢查帳號,
然後在下面在加個div去顯示是否已經有此帳號,
而程式碼如下
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid">
<INPUT TYPE="button" name="btnchk" value="檢查帳號" onclick="chkid('tbxuid');">
<div id="msg"></div>
當檢查帳號的按鈕被按下後,呼叫chkid的js,
而chkid的程式碼如下 :
function chkid(objname){
var obj = document.getElementById(objname);
//設定查詢用的後端程式路徑,並將帳號資料帶入
var sUrl = "yahoo_chkuid.asp?uid=" + obj.value;
//宣告設定連線完成後要執行的function
var handleSuccess = function(o){
if(o.responseText !== undefined){
var div = document.getElementById("msg");
//當連線無誤後,我們可以取得所回傳回來的內容,
//內容可以使用o.responseText取得,至於其他的屬性狀態可以參考YUI的說明文件,
//因為我們後端的程式只會傳回1或0,所以我們只需要判斷responseText 是不是為1或0即可.
//然後在將訊息顯示在msg這個div中,
//用innerHTML除了是可以顯示html外,因為firefox並沒有innerText這屬性,
//所以為了讓IE跟Firefox都可以正常無誤,所以需要使用innerHTML
if (o.responseText == "1")
{
div.innerHTML = "<font color='red'>此帳號已經有人使用</font>";
}else{
div.innerHTML = "此帳號可以使用";
}
}
}
//宣告設定連線失敗時要執行的function
var handleFailure = function(o){
alert("Error : " + o.statusText + "\nPlease try again.");
}
//宣告callback,定義成功及失敗所要呼叫的函數
//handleSuccess跟handleFailure是上面宣告的名稱而定
var callback =
{
success:handleSuccess,
failure: handleFailure
};
//執行連線動作
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}
如此,檢查帳號重覆的功能就完成了.
下面是這個程式的範例及程式碼下載!
範例 : http://vip.blueshop.com.tw/ajun/yahoo_chkuid.htm
程式碼(未包含YUI的js檔) : http://vip.blueshop.com.tw/ajun/file/yahoo_chkuid.rar