ASP.NET AJAX 實戰：郵箱異步驗證與省市二級聯動完整實現

專案背景與技術棧

本示例演示基於 **ASP.NET Web Forms** + **原生 JavaScript (XMLHttpRequest)** 實現兩大經典 AJAX 場景：

1. 郵箱註冊即時驗證：用戶輸入郵箱失焦/點擊按鈕時，異步查詢數據庫是否已被註冊。
2. 省市二級聯動下拉框：選擇省份後，自動加載對應城市列表，無需刷新頁面。

技術棧：.NET Framework 4.x、C#、原生 JS (無 jQuery 依賴)、SQL Server (模擬數據)。

核心架構：前後端交互協議

約定通過 URL 參數區分業務類型：

• ?Email=xxx@xxx.com → 郵箱驗證，返回 0(已存在) / 1(可用)
• ?Selected=1 → 初始化省市數據，返回 省份列表&城市列表 (管道符分隔)
• ?ProId=1 → 獲取指定省份的城市列表

前端實現詳解

1. 跨瀏覽器 XMLHttpRequest 創建

2. 郵箱驗證流程

3. 省市聯動：初始化與級聯
protected void Page_Load(object sender, EventArgs e)
{
    // 1. 郵箱驗證
    if (Request.QueryString["Email"] != null)
    {
        string inputEmail = Request.QueryString["Email"];
        // 實際項目中應查詢數據庫
        bool exists = (inputEmail == "2320774925@qq.com"); // 模擬數據
        Response.Write(exists ? "0" : "1");
        Response.End();
    }

    // 2. 初始化省市數據
    if (Request.QueryString["Selected"] != null)
    {
        // 實際應從數據庫讀取並拼接字符串
        string result = "1,河南|2,浙江|3,湖北&1,鄭州|2,洛陽|3,開封";
        Response.Write(result);
        Response.End();
    }

    // 3. 根據省份ID獲取城市
    if (Request.QueryString["ProId"] != null)
    {
        int id = int.Parse(Request.QueryString["ProId"]);
        string cities = GetCitiesByProvince(id); // 模擬方法
        Response.Write(cities);
        Response.End();
    }
}

private string GetCitiesByProvince(int proId)
{
    switch (proId)
    {
        case 1: return "1,鄭州|2,洛陽|3,開封|4,信陽|5,南陽";
        case 2: return "1,杭州|2,寧波|3,溫州|4,嘉興|5,湖州";
        // ... 其他省份
        default: return "1,南昌|2,景德鎮|3,萍鄉|4,九江|5,新余";
    }
}


前台頁面結構

現代化改造建議

替換為 Fetch API / Axios：簡化異步代碼，支持 Promise/async-await。
後端改用 Web API / Generic Handler (.ashx)：職責分離，避免 Page_Load 膨脹。
數據格式改用 JSON：替代管道符分隔字符串，解析更健壯。
引入防抖/節流：郵箱輸入驗證時減少請求頻率。
安全加固：輸入驗證、SQL 參數化、CSRF Token、速率限制。


總結
本文通過完整的原生 JS + ASP.NET 示例，展示了 AJAX 核心機制：創建請求對象 → 異步發送 → 狀態監聽 → DOM 更新。雖然現代開發多使用 jQuery/Fetch/框架級封裝，但理解底層原理對排查疑難雜症、優化性能至關重要。