ASP.NET 原生 JS 與 jQuery 呼叫 Generic Handler (ashx) 的差異比較

前端呼叫 .ashx 處理 AJAX 請求時，可使用原生 XMLHttpRequest 或 jQuery 封裝方法。本文對比兩種寫法，說明參數傳遞、回應處理、錯誤捕捉差異。

原生 JavaScript (XMLHttpRequest)

var xhr = new XMLHttpRequest();
var cartId = document.getElementById("txtCartId").value;
var count = document.getElementById("txtCount").value;
var url = "Controls/gengCart.ashx?CartID=" + encodeURIComponent(cartId) 
        + "&count=" + encodeURIComponent(count);

xhr.open("GET", url, true); // 非同步
xhr.setRequestHeader("If-Modified-Since", "0"); // 防止 IE 快取 GET 請求

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var result = xhr.responseText;
            try {
                var json = JSON.parse(result); // 建議用 JSON.parse，避免 eval 風險
                alert(json.name);
            } catch (e) {
                console.error("JSON 解析失敗", e);
            }
        } else {
            console.error("請求失敗", xhr.status);
        }
    }
};
xhr.send(null);

jQuery AJAX

$.ajax({
    url: 'Controls/Cart.ashx',
    type: 'POST', // 或 GET
    data: {
        productID: <%= GetID %>,
        count: 1,
        userID: '<%= uid %>'
    },
    dataType: 'json', // 自動解析 JSON 回應
    success: function (data, textStatus, jqXHR) {
        if (data === "success" || data.success) {
            window.location = "gwc.aspx?uid=" + '<%= uid %>';
        } else if (data === "false" || data.error) {
            alert("請先登入");
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.error("AJAX 錯誤", textStatus, errorThrown);
    }
});

比較表

Handler 端接收參數

public void ProcessRequest(HttpContext context)
{
    // GET 參數
    string cartId = context.Request.QueryString["CartID"];
    // POST 參數
    string productId = context.Request.Form["productID"];
    // 統一取值 (QueryString + Form)
    string count = context.Request["count"];

    // 回傳 JSON
    context.Response.ContentType = "application/json";
    context.Response.Write("{\"name\":\"Test\"}");
}

建議

• 專案已引用 jQuery → 直接使用 $.ajax 或 $.post/$.get 簡化代碼。
• 無 jQuery 環境（如輕量頁面、Worker） → 使用 fetch API（現代瀏覽器）或 XMLHttpRequest。
• 永遠使用 encodeURIComponent 編碼 URL 參數，防止特殊字元錯誤。
• 回傳 JSON 設定 Content-Type: application/json，前端 dataType: 'json' 自動解析。