|
作者blog: www.cnbruce.com/blog/
AJAX的無刷新機(jī)制使得在注冊(cè)系統(tǒng)中對(duì)于注冊(cè)名稱的檢測(cè)能即時(shí)顯示。
常見的用戶注冊(cè)是用戶輸入用戶名，后臺(tái)程序檢測(cè)數(shù)據(jù)庫中用戶名是否重復(fù)而做出注冊(cè)的成功與失敗之提示（當(dāng)用戶注冊(cè)重名時(shí)將返回重新注冊(cè)），或者稍微人性化一點(diǎn)就是在用戶名文本框后添加一個(gè)檢測(cè)按鈕，讓用戶檢測(cè)后再做注冊(cè)。
以上操作，對(duì)于用戶體驗(yàn)方面來說是比較“差勁”的，一個(gè)很好的用戶體驗(yàn)就是：當(dāng)用戶輸入完注冊(cè)用戶名后，Web系統(tǒng)應(yīng)能即時(shí)檢查并即時(shí)顯示，并在檢查和顯示的同時(shí)不影響當(dāng)前頁面的操作。這也就是“異步獲取數(shù)據(jù)”的要求，而這正是AJAX的強(qiáng)項(xiàng)
功能展現(xiàn)
當(dāng)輸入已經(jīng)存在的用戶名（如cnbruce、cnrose）時(shí)頁面將顯示重名不能注冊(cè)（false），否則將顯示可以注冊(cè)（true），這為用戶的注冊(cè)提供了快速的參考，用戶體驗(yàn)至上。
那么下面就來說說是如何來實(shí)現(xiàn)這樣的功能的。
其實(shí)通過如上的t1.htm的源代碼，各位就可以看到AJAX的精髓
首先是定義XMLHttp對(duì)象
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();
}
關(guān)于這部分內(nèi)容的說明 請(qǐng)看
接著是自定義函數(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)容，在此前將先提取當(dāng)前頁表單元素“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
%>
如何將異步獲取的信息顯示在當(dāng)前頁呢
function updatePage() {
if (xmlHttp.readyState < 4) {
test1.innerHTML="loading...";
}
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
test1.innerHTML=response;
}
}
其中xmlHttp.readyState中的readyState表示服務(wù)器在處理請(qǐng)求時(shí)的進(jìn)展?fàn)顩r，其值分別有0-4，各有其說明情況，具體請(qǐng)參看
使用DHTML中的innerHTML可顯示信息在定義的 <span id="test1">是否能注冊(cè)</span> 上。
其余表單頁面就不詳敘了
打包文件下載
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
