AJAX應用之註冊使用者即時檢測

AJAX的無重新整理機制使得在註冊系統中對於註冊名稱的檢測能即時顯示。

常見的使用者註冊是使用者輸入使用者名稱，背景程式檢測資料庫中使用者名稱是否重複而做出註冊的成功與失敗之提示（當使用者註冊重名時將返回重新註冊），或者稍微人性化一點就是在使用者名稱文字框後添加一個檢測按鈕，讓使用者檢測後再做註冊。

以上操作，對於使用者體驗方面來說是比較“差勁”的，一個很好的使用者體驗就是：當使用者輸入完註冊使用者名稱後，Web系統應能即時檢查並即時顯示，並在檢查和顯示的同時不影響當前頁面的操作。這也就是“非同步擷取資料”的要求，而這正是AJAX的強項

比如如下的樣本就能展現AJAX的該功能：

http://www.cnbruce.com/test/ajax/t1.htm

當輸入已經存在的使用者名稱（如cnbruce、cnrose）時頁面將顯示重名不能註冊（false），否則將顯示可以註冊（true），這為使用者的註冊提供了快速的參考，使用者體驗至上。

那麼下面就來說說是如何來實現這樣的功能的。

其實通過如上的t1.htm的原始碼，各位就可以看到AJAX的精髓

首先是定義XMLHttp對象

var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); }

關於這部分內容的說明請看：
http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=987

接著是自訂函數

function callServer() { var u_name = document.getElementById("u_name").value; if ((u_name == null) || (u_name == "")) return; var url = "cu.asp?name=" + escape(u_name); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); }

該函數的主要功能就是非同步獲得cu.asp的內容，在此前將先提取當前頁表單元素“u_name”即使用者名稱文字框zhogn 的值，通過cu.asp其後的參數及賦值而得到了不同的結果（true or false）。

那麼這裡要說的即是cu.asp，他的主要功能就是接受URL參數name的值做內容顯示，該內容最終被t1.htm非同步擷取。

<!--cu.asp的源碼樣本--> <!--#include file="conn.asp"--> <% name=request.querystring("name") Set rs = Server.CreateObject ("ADODB.Recordset") sql = "Select * from u_ser where u_name='"&name&"'" rs.Open sql,conn,1,1 if rs.eof and rs.bof then response.write("true") else response.write("false") end if rs.close set rs=nothing call CloseDatabase %>

如何將非同步擷取的資訊顯示在當前頁呢

function updatePage() { if (xmlHttp.readyState < 4) { test1.innerHTML="loading..."; } if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; test1.innerHTML=response; } }

其中xmlHttp.readyState中的readyState表示伺服器在處理請求時的進展狀況，其值分別有0-4，各有其說明情況，具體請參看：

http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=718

使用DHTML中的innerHTML可顯示資訊在定義的 <span id="test1">是否能註冊</span> 上。

其餘表單頁面就不詳敘了

打包檔案下載（下載後將尾碼 .cnbruce 修改為 .rar）：

http://www.cnbruce.com/test/ajax/ajax.cnbruce