ajax异步请求和同步请求_如何使用AJAX来检测是否正在处理异步请求

最新推荐文章于 2024-05-21 10:41:09 发布

cxygs5788

最新推荐文章于 2024-05-21 10:41:09 发布

阅读量206

点赞数

文章标签： js ajax javascript java vue ViewUI

原文链接：https://bytes.com/topic/asp-net/insights/942054-how-use-ajax-detect-if-asynchronous-request-being-processed

版权

ajax异步请求和同步请求

在本文中，您将学习如何使用AJAX来检测调用另一个请求时是否仍在处理异步请求。这样，我们可以通知用户，并允许第一个请求完成后再开始另一个请求。

为了说明这一点，我们将创建两个UpdatePanels，每个UpdatePanels显示一个当前日期和时间，并带有一个按钮。每个按钮在单击时都会更新其自己的UpdatePanel。但是，当单击第一个按钮时，我们将有目的地使该过程花费3秒钟来完成，这使我们有足够的时间单击第二个按钮进行测试。在第一个仍在处理中的同时单击第二个按钮时，应通知我们某个进程仍处于活动状态，并且不允许第二个进程启动。

首先添加ScriptManager和两个UpdatePanels：


<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" /> 
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate> 
</ContentTemplate>
</asp:UpdatePanel> 
<br /><br />
<asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
<ContentTemplate> 
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
</form>

注意，我们在两个面板上都将UpdateMode设置为Conditional。这是因为我们不希望它们都同时更新-每个按钮应仅更新自己的UpdatePanel。

让我们继续并将按钮和当前时间添加到UpdatePanels：


<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime1" runat="server" Text="Get Time (1)" OnClick="btn_GetTime1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br /><br /> <asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime2" runat="server" Text="Get Time (2)" />
</ContentTemplate>
</asp:UpdatePanel>

现在在后面的代码中，在第一个按钮的click事件中，我们将故意使线程Hibernate3秒钟。像这样


using System.Threading; 
.. 
protected void btn_GetTime1_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
}

为了使请求更直观，我们也将UpdateProgress添加到混合中。这将在请求正在进行时向我们显示：


<asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP1">
<ProgressTemplate>
<br /><br />
Please wait..
</ProgressTemplate>
</asp:UpdateProgress>

我们还将包括一些JavaScript，以检查Async PostBack当前是否正在进行中。为此，请添加以下脚本：


<script type="text/javascript">
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest); 
function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');
args.set_cancel(true);
}
}
</script>

ASPX页面将如下所示：


<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" /> 
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime1" runat="server" Text="Get Time (1)" OnClick="btn_GetTime1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UPr1" runat="server" AssociatedUpdatePanelID="UP1">
<ProgressTemplate>
<br /><br />
Please wait..
</ProgressTemplate>
</asp:UpdateProgress>
<br /><br />
<asp:UpdatePanel ID="U2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="btn_GetTime2" runat="server" Text="Get Time (2)" />
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
</form>
</body>
</html>
<script type="text/javascript">
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest); 
function instance_initializeRequest(sender, args) {
if (instance.get_isInAsyncPostBack()) {
alert('Still processing request. Please wait..');
args.set_cancel(true);
}
}
</script>