我有一个ASP.NET Web窗体Web应用程序,它具有我需要填充数据的各种切片。当用户执行搜索时,我当前有多个ajax请求,它们会启动以恢复数据。此数据独立于每个请求,无需等待先前的请求。
但是,当我执行请求时,它们将被串行处理。在一个案例中,当我的“服务历史记录”结束时,如果我点击该行执行另一个请求以弹出一个弹出窗口,它会转到pending
,因为我的“流体”图块仍在工作。一旦Fluid请求完成,它就会处理我的ajax请求以显示服务历史记录详细信息。
我在StackOverflow about concurrent connections by browser上看过几个帖子,但不确定这是否适用于我在这里做的事情。
以下是用户搜索时的代码:
....
function Search()
{
$.ajax({
type: "POST",
url: "Main.aspx/AjaxGetServiceHistory",
data: "{ SerialNumber: \"" + $("#txtSearch").val() + "\"," +
" SortDirection: \"" + $("#ctl00_ContentPlaceHolder1_SortDirection").val() + "\"," +
" SortColumn: \"" + $("#ctl00_ContentPlaceHolder1_SortColumn").val() + "\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#dvServiceHistoryLoading").fadeOut(100);
$("#SearchHistoryResultsDiv").show();
// Set the result
var jsonValue = jQuery.parseJSON(msg.d);
// Set the result
if (jsonValue.Data[0] == null) {
$("#SearchHistoryResultsDiv").html("No results.");
return;
}
-- CODE TO DISPLAY RESULTS HERE --
},
error: function (xhr, ajaxOptions, thrownError) {
var errorMsg = "An error has occurred.";
$("#SearchHistoryResultsDiv").text("An error has occurred.");
$('#dvServiceHistoryLoading').hide();
}
});
$.ajax({
type: "POST",
url: "Main.aspx/AjaxGetFluid",
data: "{ SerialNumber: \"" + $("#txtSearch").val() + "\"," +
" SortDirection: \"" + $("#ctl00_ContentPlaceHolder1_FluidSortDirection").val() + "\"," +
" SortColumn: \"" + $("#ctl00_ContentPlaceHolder1_FluidSortColumn").val() + "\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#dvFluidLoading").fadeOut(100);
$("#FluidResultsDiv").show();
// Set the result
if (msg.d == "") {
$("#FluidResultsDiv").html("<div style='border: 1px solid rgb(211, 211, 211); padding: 16px; height:100px;'><b>No results.</b></div>");
return;
}
// Set the result
var jsonValue = jQuery.parseJSON(msg.d);
if (jsonValue.Details[0] != "") {
$("#FluidResultsDiv").html(jsonValue.Details[0]);
UpdateTDtoTH("FluidResultsDiv");
WireUpSorting("FluidResultsDiv");
}
else {
$("#FluidResultsDiv").html("No results found.");
}
},
error: function (xhr, ajaxOptions, thrownError) {
$("#FluidResultsDiv").show();
$("#FluidResultsDiv").text("An error has occurred.");
$('#dvFluidLoading').hide();
}
});
}
调用此方法是用户单击服务历史记录链接。它会创建一个新的ajax请求。
function ViewServiceHistoryDetail(serialNumber, invoiceNumber, segmentNumber) {
ClearServiceHistoryLabels();
$.ajax({
type: "POST",
url: "Main.aspx/AjaxGetServiceHistoryLineItem",
data: "{ SerialNumber: \"" + serialNumber + "\"," +
" InvoiceNum: \"" + invoiceNumber + "\"," +
" SegmentNum: \"" + segmentNumber + "\" }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Set the result
},
error: function (xhr, ajaxOptions, thrownError) {
}
....