溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何應用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(); } |
接著是自定義函數
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，各有其說明情況，
使用DHTML中的innerHTML可顯示信息在定義的 <span id="test1">是否能注冊</span> 上。
上述內容就是如何應用AJAX進行注冊用戶即時檢測，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
