在前一个请求完成之前，将触发多个ajax请求

Question

我有一个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) {

            }
    ....