ASP.NET AJAX：取消非同步回發的客戶端腳本實作

前言

UpdatePanel 實現部分頁面更新，透過 Sys.WebForms.PageRequestManager 管理非同步回發生命週期。本文示範如何編寫 JavaScript 取消進行中的回發，並防止重複提交。

先決條件

• Visual Studio 2005 / Visual Web Developer Express
• 支援 AJAX 的 ASP.NET 網站

建立取消回發腳本

1. 新增 JScript 檔案 CancelPostback.js。
2. 註冊 ApplicationLoadHandler，於 initializeRequest 事件攔截回發。

核心程式碼

var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler(sender, args) {
    Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
}

function CheckStatus(sender, args) {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    // 取消按鈕觸發：中止當前回發
    if (prm.get_isInAsyncPostBack() && args.get_postBackElement().id == 'CancelRefresh') {
        prm.abortPostBack();
    }
    // 重新整理按鈕：若已在回發中，取消新回發並提示
    else if (prm.get_isInAsyncPostBack() && args.get_postBackElement().id == 'RefreshButton') {
        args.set_cancel(true);
        ActivateAlertDiv('visible', 'Still working on previous request.');
    }
    // 正常發起回發：顯示提示
    else if (!prm.get_isInAsyncPostBack() && args.get_postBackElement().id == 'RefreshButton') {
        ActivateAlertDiv('visible', 'Retrieving headlines.');
    }
}

function ActivateAlertDiv(visString, msg) {
    var adiv = $get(divElem);
    var aspan = $get(messageElem);
    adiv.style.visibility = visString;
    aspan.innerHTML = msg;
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

關鍵點解析

• prm.get_isInAsyncPostBack()：判斷是否正在非同步回發中。
• prm.abortPostBack()：強制中止伺服器端處理與客戶端等待。
• args.set_cancel(true)：取消即將發起的回發。
• $get()：Microsoft AJAX Library 簡易 DOM 選取器。

總結

善用 PageRequestManager 客戶端事件，可精細控制非同步回發流程，提升使用者體驗並避免伺服器過載。