使用者輸入用戶名、移開焦點 (onblur) 即時檢查是否已存在，無需點擊按鈕、無需整頁重新整理。經典 AJAX (XmlHttp) 實作範例。
<script type="text/javascript">
var xmlHttp = null;
function CheckUser() {
var txt = document.getElementById("Text1");
if (!txt.value.trim()) return;
// 建立 XmlHttp (相容 IE6 ActiveX / 標準)
try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch { xmlHttp = new XMLHttpRequest(); } }
var url = "CheckUser.aspx?User=" + encodeURIComponent(txt.value);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = OnCheckComplete;
xmlHttp.send(null);
}
function OnCheckComplete() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var result = xmlHttp.responseText; // "存在" 或 "不存在"
var lbl = document.getElementById("exists");
lbl.innerHTML = result;
lbl.style.color = (result == "存在") ? "red" : "green";
}
}
</script>
<input type="text" id="Text1" onblur="CheckUser()" />
<label id="exists"></label>
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.ContentType = "text/plain; charset=utf-8";
string user = Request.QueryString["User"];
if (string.IsNullOrEmpty(user)) { Response.Write("參數錯誤"); return; }
// 實際專案請使用參數化查詢 / ORM / 儲存程序
bool exists = UserExistsInDatabase(user);
Response.Write(exists ? "存在" : "不存在");
Response.End();
}
private bool UserExistsInDatabase(string username)
{
// 範例：Entity Framework / ADO.NET / Dapper
using (var conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ConnectionString))
{
return conn.ExecuteScalar("SELECT COUNT(1) FROM Users WHERE Username=@U", new { U = username }) > 0;
}
}
| 痛點 | 改良方案 |
|---|---|
| 原生 XmlHttp 繁瑣、無 Promise | 使用 fetch() + async/await 或 axios/jQuery.ajax |
| GET 請求參數長度限制、安全性 | 改用 POST + JSON Body，加入 ValidateAntiForgeryToken |
| 頻繁觸發 (使用者連續輸入) | 加入 防抖：setTimeout/clearTimeout 300ms 後再發請求 |
| 回傳純文字，擴充性差 | 回傳 JSON：{ exists: true, message: "用戶名已被註冊", suggestion: "user123" } |
| 無載入狀態提示 | 請求前顯示 Spinner，完成後移除 |
let debounceTimer;
function CheckUser() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
fetch(`CheckUser.ashx?User=${encodeURIComponent(Text1.value)}`)
.then(r => r.json())
.then(data => {
exists.textContent = data.message;
exists.className = data.exists ? "error" : "success";
});
}, 300);
}
即時用戶名檢查是提升註冊轉換率的關鍵 UX，現代專案請採用 Fetch + 防抖 + JSON + 防偽造 Token 的完整模式。
