Question

是否可以使用AJAX和JQuery使用ASP.NET逐步加载网页。

我有一个网页，运行30个查询;每个都针对不同的数据库（我的组织有大约30个数据库）。不幸的是，每个查询运行大约需要7秒钟（平均而言）。我花时间优化了查询（他们最初花了大约30秒来运行每个查询）。

我想将网页：运行查询一并显示输出（网格视图），然后运行查询二并显示查询一和二的输出（网格wiew），然后运行查询三并显示查询一，二的输出最初我考虑使用Response.Flush（参见这个问题：Response.write and ASP.NET controls），但是Guffa说使用Web控件时这是不可能的。如何使用AJAX，JQuery等递增加载网页？

Answer 1

是的，这是可能的。查询是否必须连续执行？如果没有，您可以并行运行所有查询。

每个AJAX调用都可以选择在成功完成后调用函数。当每个AJAX调用完成时，使用该代码底部的后续AJAX调用指定返回数据格式和表示代码函数。

以下代码示例是一个通用的jQuery AJAX数据库调用，可用于串行执行任意数量的数据库调用。它假定数据库有一个HTTP POST API，它响应JSON，因为您没有指定数据库使用的数据访问方法。

myfunction参数指定在数据库响应后将调用的函数。 myerrorfunction参数指定错误处理程序。 myquery参数指定API调用。 myparams参数是要作为URL中的参数提供给HTTP POST的任意数量的逗号分隔参数的列表。它们采用格式＆amp; p0 = ..＆amp; pn =

function apitofunction6(myfunction,myerrorfunction,myquery,myparams) {
  var datstr = "";
  var indx = 0;
  var ajaxHandle;

  if (myparams != null) {
    for (indx = 0; indx < (arguments.length-3); indx++) {
      datstr = datstr + "&p" + indx + "=" + encodeURIComponent(arguments[indx+3]);
    }
  }

  ajaxHandle = $.ajax({
  type: "POST",
  url: "aqapi",
  data: "howsmyapiq=" + myquery + datstr,
  dataType: "json",
  tryCount: 0,
  retryLimit: 3,
  complete: function sortdata() {},
  success: function(myJSON,textStatus,jqXHR) {
      myfunction(myJSON,textStatus,jqXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
      if (textStatus == 'timeout') {
        this.tryCount++;
        if (this.tryCount <= this.retryLimit) {
          var retryHandle = $.ajax(this);
          pendingFunction.push(retryHandle);
          return retryHandle;
        }
      }

      if (errorThrown == 'Authorization Required') {
        window.location = "/login";
      }
      myerrorfunction(jqXHR, textStatus, errorThrown);
  }
  });
  pendingFunction.push(ajaxHandle);

  return ajaxHandle;
}

可以按如下顺序调用该函数：

arResultIndex = apitofunction6(pc_myOnGet,pc_myOnFail,"ShowIncident3",SortOrder,Count,Offset);

function pc_myOnGet (myData,myTS,myJqXHR,datstr,myparams) {
  //format and display data
  //...
  arResultIndex2 = apitofunction6(pc_myOnGet2,pc_myOnFail2,"ShowIncident4",SortOrder,Count,Offset);
}

function pc_myOnGet2 (myData,myTS,myJqXHR,datstr,myparams) {
  //format and display data
  //...
  arResultIndex3 = apitofunction6(pc_myOnGet3,pc_myOnFail3,"ShowIncident5",SortOrder,Count,Offset);
}

Answer 2

This example使用c＃，但它很容易适应您的目的。

基本上，您需要将页面拆分为多个部分。每个部分都会自己创建请求，因此它将异步加载每个部分，而不是按顺序加载每个部分，然后再显示它。

所以在你的主视图中，你可以有几个

<div class ="partialContents" data-url="/Controller/getData_1"></div>
<div class ="partialContents" data-url="/Controller/getData_2"></div>
<div class ="partialContents" data-url="/Controller/getData_3"></div>
<div class ="partialContents" data-url="/Controller/getData_4"></div>

并且客户端脚本将类似于

  $(document).ready(function(e){
    $(".partialContents").each(function(index,item){
      var url = $(item).data("url");
      if(url && url.length > 0){
        $(item).load(url);
      }
     });
   });

逐步加载网页

2 个答案: