逐步加载网页

Is it possible to use AJAX and JQuery to incrementally load a webpage using ASP.NET.

I have a webpage, which runs 30 queries; each against a different databases (my organisation has about 30 databases). Unfortunately each query takes about seven seconds to run (on average). I have spent time optimizing the queries (they originally took about an average of 30 seconds to run each).

I would like the webpage to: run query one and display output (grid view), then run query two and display output (grid wiew) of query one and two, then run query three and display output of query one,two and three etc. Originally I thought about using Response.Flush (see this question: Response.write and ASP.NET controls), however Guffa says this is not possible when using Web Controls. How can I incrementally load a webpage using AJAX, JQuery etc?

Yes it is possible. Do the queries have to be executed serially? If not, you can run all the queries in parallel.

Every AJAX call has the option of calling a function after successful completion. When each AJAX call completes, specify the return data formatting and presentation code function with the subsequent AJAX call at the bottom of that code.

The following code example is a generalized jQuery AJAX database call that can be used to execute any number of database calls serially. It assumes the database has an HTTP POST API that responds with JSON because you didn't specify the data access methods used by your databases.

The myfunction parameter specifies the function that will be called after the database responds. the myerrorfunction parameter specifies the error handler. the myquery parameter specifies the API call. the myparams parameter is a list of any number of comma delimited parameters to be supplied to the HTTP POST as parameters in the URL. They take the format &p0=..&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;
}

The function can be called in a sequence like this:

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);
}

This example uses c#, but it can easily be adapted to your purpose.

Basically, you need to split the page into several partials. Each partial will make it's own request, so it will asynchronously load each section instead of sequentially loading each and ever section and then displaying it.

so in your main view, you can have several

<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>

and the client side scripting will be something like

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