一步步學 ASP.NET AJAX：jQuery + JSON + 快取載入新聞分類

學習目標

在母版頁以 AJAX 動態載入新聞分類選單，體驗「資料與介面分離、JSON 傳輸、後台快取」三大優勢。

資料結構

資料表 NewsType：TypeId(int), TypeName(string)

jQuery 核心函式

• $.ajax()：發送非同步請求
• $.parseJSON()：解析 JSON 字串
• $.each()：遍歷陣列/物件

後台資料提供者

產生 JSON 格式：[{"TypeId":1,"TypeName":"科技"},{"TypeId":2,"TypeName":"財經"}]

前台 AJAX 載入

$(function() {
    $.ajax({
        url: "Admin/News/Data/GetNewsInfo.ashx?method=GetNewsTypeForCombox",
        type: "get",
        success: function(text) {
            var data = $.parseJSON(text);
            $("#m2").empty(); // 清空舊選項
            $.each(data, function(key, val) {
                $("#m2").append('<a href="NewsList.aspx?TypeId=' + val.TypeId + '">' + val.TypeName + '</a>');
            });
        }
    });
});

加入伺服器端快取

母版頁每次載入都會觸發 AJAX，分類資料極少變動，加入快取大幅降低 DB 壓力：

// GetNewsInfo.ashx 內
public string GetNewsTypeForCombox()
{
    string cacheKey = "NewsTypeList";
    if (HttpRuntime.Cache[cacheKey] != null)
        return (string)HttpRuntime.Cache[cacheKey];

    string json = BuildJsonFromDb(); // 查詢 DB 組 JSON
    HttpRuntime.Cache.Insert(cacheKey, json, null, 
        DateTime.Now.AddHours(1), Cache.NoSlidingExpiration);
    return json;
}

架構心得

• UI 與資料分離：後台只負責供應 JSON，前台決定如何渲染
• 高效能：快取 + 輕量 JSON + 非同步載入，首屏不阻塞
• 易維護：修改樣式只動前台，修改資料源只動後台
• 三層架構：UI → BLL → DAL，配合代碼產生器，擴充極快