检测 javascript 来自 asp 的 ajax 请求的结束

Question

如果用户单击 input 标签 (type="radio")，我会从数据库加载新数据。因为它可以花时间，所以我展示了一个加载动画。之后必须取消显示动画。

现在我的问题是：我如何检测您来自 aspx 页面的 ajax 请求是否已被取消显示动画的 javascript 代码完成？如果不是，还有其他方法可以得到相同的结果吗？

更新 1： 我只使用了这行代码：

<asp:ScriptManager EnablePartialRendering="true"  runat="server" />

<asp:UpdatePanel ID="updPnlCategorieen" UpdateMode="Always" runat="server">
    <ContentTemplate>

        <asp:Panel ID="pnlHoofdTopics" CssClass="topics" runat="server" />
        <asp:Panel ID="pnlCategorien" CssClass="topics" runat="server" />
        <asp:Panel ID="pnlItems" CssClass="topics" runat="server" />

        <asp:Panel cssclass="loading" ID="pnlLaden" runat="server">
            <div class="circle"></div>
            <div class="circle1"></div>
        </asp:Panel>

    </ContentTemplate>
</asp:UpdatePanel>

并通过代码将触发器放在后面 (C#):

updCategorieen.Triggers.Add(new AsyncPostBackTrigger() {
    ControlID = rbtCat.ID,
    EventName = "CheckedChanged"
});

为了显示加载动画，我使用 javascript。代码如下：

var topic = []; //--> location for all the radio buttons
var laden; //--> location for loading div

document.addEventListener("DOMContentLoaded", function () {
    init();
});

function init() {

    laden = document.getElementsByClassName("loading")[0];
    topic = document.getElementsByClassName("topic");

    laden.style.display = "none";

    for (i = 0; i < topic.length; i++) {

        topic[i].addEventListener("click", function () {
            startLaden();
        });
    }

    geladen.addEventListener("change", function () {
        stopLaden();
    });
}

function startLaden() {

    laden.style.display = "block";
}

function stopLaden() {

    laden.style.display = "none";

    topic = document.getElementsByClassName("topic");
}

更新 2： 我也尝试在加载所有主题后在服务器端删除它。

pnlLaden.Style["display"] = "none";

这行得通，但如果我再次显示它，加载动画不会返回。所以，我一开始就这样做。

pnlLaden.Style["display"] = "block";

但是没有效果...

我也尝试过 一些在互联网上找到的东西，但没有像 live、on 等那样工作，但没有任何工作。

谁能帮助我，我是 ajax 和 Asp.net 的新手？
谢谢，抱歉我的英语不好。

Answer 1

@ Karl Anderson 建议我使用 asp:UpdateProgress 并且它有效。我的代码现在是这样的：

<%-- my asp:UpdatePanel--%>

<asp:UpdateProgress ID="updPrgLadenTopics" AssociatedUpdatePanelID="updPnlCategorieen" 
                    runat="server">
    <ProgressTemplate>
        <asp:Panel CssClass="loading" ID="pnlLaden" runat="server">
            <div class="circle"></div>
            <div class="circle1"></div>
        </asp:Panel>
    </ProgressTemplate>
</asp:UpdateProgress>

检测 javascript 来自 asp 的 ajax 请求的结束

Detect end of ajax request from asp by javascript

javascript

c#

asp.net

ajax

asp.net-ajax