本篇文章為大家展示了如何應(yīng)用AJAX進(jìn)行注冊(cè)用戶即時(shí)檢測(cè)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司從2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元鎮(zhèn)安做網(wǎng)站,已為上家服務(wù),為鎮(zhèn)安各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
AJAX的無(wú)刷新機(jī)制使得在注冊(cè)系統(tǒng)中對(duì)于注冊(cè)名稱的檢測(cè)能即時(shí)顯示。
常見(jiàn)的用戶注冊(cè)是用戶輸入用戶名，后臺(tái)程序檢測(cè)數(shù)據(jù)庫(kù)中用戶名是否重復(fù)而做出注冊(cè)的成功與失敗之提示（當(dāng)用戶注冊(cè)重名時(shí)將返回重新注冊(cè)），或者稍微人性化一點(diǎn)就是在用戶名文本框后添加一個(gè)檢測(cè)按鈕，讓用戶檢測(cè)后再做注冊(cè)。
以上操作，對(duì)于用戶體驗(yàn)方面來(lái)說(shuō)是比較“差勁”的，一個(gè)很好的用戶體驗(yàn)就是：當(dāng)用戶輸入完注冊(cè)用戶名后，Web系統(tǒng)應(yīng)能即時(shí)檢查并即時(shí)顯示，并在檢查和顯示的同時(shí)不影響當(dāng)前頁(yè)面的操作。這也就是“異步獲取數(shù)據(jù)”的要求，而這正是AJAX的強(qiáng)項(xiàng)
比如如下的示例就能展現(xiàn)AJAX的該功能：
http://www.cnbruce.com/test/ajax/t1.htm
當(dāng)輸入已經(jīng)存在的用戶名（如cnbruce、cnrose）時(shí)頁(yè)面將顯示重名不能注冊(cè)（false），否則將顯示可以注冊(cè)（true），這為用戶的注冊(cè)提供了快速的參考，用戶體驗(yàn)至上。
那么下面就來(lái)說(shuō)說(shuō)是如何來(lái)實(shí)現(xiàn)這樣的功能的。
其實(shí)通過(guò)如上的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(); } |
接著是自定義函數(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)前頁(yè)表單元素“u_name”即用戶名文本框zhogn 的值，通過(guò)cu.asp其后的參數(shù)及賦值而得到了不同的結(jié)果（true or false）。
那么這里要說(shuō)的即是cu.asp，他的主要功能就是接受URL參數(shù)name的值做內(nèi)容顯示，該內(nèi)容最終被t1.htm異步獲取。
<% 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)前頁(yè)呢
function updatePage() { if (xmlHttp.readyState < 4) { test1.innerHTML="loading..."; } if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; test1.innerHTML=response; } } |
其中xmlHttp.readyState中的readyState表示是否能注冊(cè) 上。
上述內(nèi)容就是如何應(yīng)用AJAX進(jìn)行注冊(cè)用戶即時(shí)檢測(cè)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
