在连续的AJAX调用中使用异步

Question

Question here about use of successive AJAX calls and async. Its a bit messed here because of how the data is set up. I need to return listings, but the sever only returns 10 per query, and the only way to determine the total number of listings is a separate query with the boolean returnTotal as true instead of false. This returns the number of listings only, and not the listing results themselves. However, if I run the calls synchronously, the variable startItem (which increments on each loop to load data starting at the next block of listings) doesn't seem to populate before the next call finishes, and results get duplicated. Any way to avoid running both as async? Apologies if my code is batshit ridiculous, as I'm relatively new to jquery.

$.ajax({
            type: "POST",
            url:server url here,
            data:"creativeID=test&CompanyId=BHSR&StartItem=0&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=true",
            dataType: "html",
            async: false,

            success: function(data) {
                data=convert(data);

                $(data).find('Listing').each(function(){
                    $(this).find('total').each(function(){
                        totalList = $(this).text();
                        totalList = parseInt(totalList);
                        totalPages = totalList/10;
                    });
                }); 
            },
        });

        for (i = 0; i < totalPages; i++){

            $.ajax({
                type: "POST",
                url:server url here,
                data:"creativeID=test&CompanyId=BHSR&StartItem="+startItem+"&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=false",
                dataType: "html",


                success: function(data) {
                    data=convert(data);

                    $(data).find('Listing').each(function(){
                        results_xml.push($(this));
                    });
                    result_index=0;
                    result_image_counter=1;
                    startItem = startItem + 10;
                    popResults();
                },
            });
        }

Answer 1

Do you just mean without the async: false?

     $.ajax({
type: "POST",
url:server url here,
data:"creativeID=test&CompanyId=BHSR&StartItem=0&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=true",
dataType: "html",

success: function(data) {
console.log('test1'); // first response ok
    data=convert(data);

    $(data).find('Listing').each(function(){
        $(this).find('total').each(function(){
            totalList = $(this).text();
            totalList = parseInt(totalList);
            totalPages = totalList/10;
        });
    }); 
    var startItem=0;
console.log(totalPages); // total page should be equal too "loop" logged

    for (i = 0; i < totalPages; i++){
console.log('loop'); // enter the loop

        $.ajax({
            type: "POST",
            url:server url here,
            data:"creativeID=test&CompanyId=BHSR&StartItem="+startItem+"&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=false",
            dataType: "html",


            success: function(data) {
 console.log('test2'); // number of test 2 = nb of loop = totalPages

                data=convert(data);

                $(data).find('Listing').each(function(){
                    results_xml.push($(this));
                });
                result_index=0;
                result_image_counter=1;
                startItem = startItem + 10;
                popResults();
            },
        });
    }
},
});

Answer 2

The problem here is that you do not increment startItem until you receive a response. Your code is probably making multiple requests with startItem === 1 before the first response is even received, and so you will get some really weird behavior (probably will get duplicate responses, and you will only get the first few pages of data).

Avoid using synchronous calls because they will tie up other resources (like javascript).

In this case if you want to insure that you get the data in order, you can make it a serial chain of AJAX calls.

To get serial behavior and enjoy the benefits of AJAX, instead of using a loop make your callback function do the next AJAX request after incrementing startItem .

This is easier if you organize your code into functions. To wit:

    function GetData()
    {
      $.ajax({
         type: "POST",
         url:server url here,                     
         data:"creativeID=test&CompanyId=BHSR&StartItem="+startItem+"&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=false",
         dataType: "html", 
         success: GetData_Callback 
      });
    }    
    function GetData_Callback(data)
    {
      data=convert(data);

      $(data).find('Listing').each(function(){
          results_xml.push($(this));
      });
      result_index=0;
      result_image_counter=1;
      startItem += 10; // increment startItem
      popResults();
      if (startItem / 10 < totalPages)
      {
         GetData(); // get next "page" of data
      }
   }
   var startItem = 1; // global variable will be mutated by GetData_Callback
   GetData(); // get first "page" of data

To do this in parallel typically requires management of the parallel responses (you can use semaphores, etc.). For example (psuedo code) you could do something like this:

var pages = [];
var totalPages = GetTotalPages(); // request via ajax like you mentioned (function not shown)
var pagesLoaded = 0;
for(var i = 0; i < totalPages; i++)
{
    GetData(pageIdx);
}
function GetData(pageIdx)
{
    $.ajax({ ..., success: function(data){GetData_Callback(pageIdx,data);}});
}
function GetData_Callback(pageIdx, data)
{
    pages[pageIdx] = data; // assign this specific page of data
    pagesLoaded++;
    if (pagesLoaded === totalPages)
    {
        // fully loaded; trigger event or call function to render, etc.
    }
}

Answer 3

The problem here is that you do not increment startItem until you receive a response. Your code is probably making multiple requests with startItem === 1 before the first response is even received, and so you will get some really weird behavior (probably will get duplicate responses, and you will only get the first few pages of data).

Try this instead. It still uses your loop but it increments startItem in the loop before the next request is made to insure that all pages of data are requested.

$.ajax({
            type: "POST",
            url:server url here,
            data:"creativeID=test&CompanyId=BHSR&StartItem=0&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=true",
            dataType: "html",
            async: false,

            success: function(data) {
                data=convert(data);

                $(data).find('Listing').each(function(){
                    $(this).find('total').each(function(){
                        totalList = $(this).text();
                        totalList = parseInt(totalList);
                        totalPages = totalList/10;
                    });
                }); 
            },
        });
        var startItem = 1;
        for (i = 0; i < totalPages; i++){

            $.ajax({
                type: "POST",
                url:server url here,
                data:"creativeID=test&CompanyId=BHSR&StartItem="+startItem+"&streetlocation="+choiceTown+"&Location="+sectCode+"&PriceMin="+choiceMin+"&PriceMax="+choiceMax+"&ListingType="+checkRB+"&OpenHouse=false&NewDev=false&AuthenticationId=id&ReturnTotal=false",
                dataType: "html",


                success: function(data) {
                    data=convert(data);

                    $(data).find('Listing').each(function(){
                        results_xml.push($(this));
                    });
                    result_index=0;
                    result_image_counter=1;
                    popResults();
                },
            });

            // increment start item BEFORE the next request, not in the response
            startItem += 10; // now the next request will be for 11, 21, 31, 41, etc...
        }

You may want to get familiar with your javascript debugger to see the behavior for yourself.