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

來源:互聯網
上載者:User

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

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

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

功能展現

當輸入已經存在的使用者名稱(如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);
}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.