AJAX應用之注冊用戶即時檢測

熱門標簽：電子圍欄 Linux服務器 服務器配置 Mysql連接數(shù)設置 團購網(wǎng)站 阿里云 科大訊飛語音識別系統(tǒng) 銀行業(yè)務

AJAX的無刷新機制使得在注冊系統(tǒng)中對于注冊名稱的檢測能即時顯示。

常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復而做出注冊的成功與失敗之提示（當用戶注冊重名時將返回重新注冊），或者稍微人性化一點就是在用戶名文本框后添加一個檢測按鈕，讓用戶檢測后再做注冊。

以上操作，對于用戶體驗方面來說是比較“差勁”的，一個很好的用戶體驗就是：當用戶輸入完注冊用戶名后，Web系統(tǒng)應能即時檢查并即時顯示，并在檢查和顯示的同時不影響當前頁面的操作。這也就是“異步獲取數(shù)據(jù)”的要求，而這正是AJAX的強項

比如如下的示例就能展現(xiàn)AJAX的該功能：

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

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

那么下面就來說說是如何來實現(xiàn)這樣的功能的。

其實通過如上的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(); }

關于這部分內(nèi)容的說明請看：
http://www.cnbruce.com/blog/showlog.asp?cat_id=34log_id=987

接著是自定義函數(shù)

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);   }

該函數(shù)的主要功能就是異步獲得cu.asp的內(nèi)容，在此前將先提取當前頁表單元素“u_name”即用戶名文本框zhogn 的值，通過cu.asp其后的參數(shù)及賦值而得到了不同的結(jié)果（true or false）。

那么這里要說的即是cu.asp，他的主要功能就是接受URL參數(shù)name的值做內(nèi)容顯示，該內(nèi)容最終被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=34log_id=718

使用DHTML中的innerHTML可顯示信息在定義的 span id="test1">是否能注冊/span> 上。

其余表單頁面就不詳敘了

打包文件下載（下載后將后綴 .cnbruce 修改為 .rar）：

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