-2

I'm sending over 140 AJAX requests. The problem is that making 140 requests freezes the browser.

To fix this I want to make 10 requests and then on page scroll request 10 more. 


    var url = "https://xxxxxxx.com/search?name=" + searchWord + "&xxxs=" + duck + "&format=application/json";
    jQuery.ajax({
      url: url,
      beforeSend: function() {
        jQuery('#image').show();
      },
      complete: function() {
        jQuery('#image').hide();
      },
      dataType: "text",
      success: function(data) {}
    });

I have tried this code:

var currentPageNumber = 1;
    loadMore(currentPageNumber);
$(window).scroll(function() {

    if($(window).scrollTop() ==  $(document).height()- $(window).height())
    {

        loadMore(currentPageNumber);
        currentPageNumber +=1;
    }
  });
function loadMore(currentPage){
        $.ajax({})
}
Tony
  • 105
  • 2
  • 11
  • Making 140 AJAX requests in succession is a ***really*** bad idea. Making 10 AJAX requests in succession is still a bad idea. Why are you doing this? – Rory McCrossan Nov 29 '19 at 09:41
  • Hi! Is not a problem to do 10 to 50 requests. Why do you think It is a problem? – Tony Nov 29 '19 at 09:43
  • 1
    Imagine you have 100 users connecting at the same time - that's not 100 connections, that's 14,000 connections... and you don't think that's a bad idea? – freedomn-m Nov 29 '19 at 09:46
  • 1
    Yes, 10 to 50 requests is still a problem. Aggregate the data and send a single request when required. – Rory McCrossan Nov 29 '19 at 09:46
  • Hi! I dont have 100 users, I only have one user. – Tony Nov 29 '19 at 09:47
  • 10 to 50 requests Its not the problem In my code, I have tried, and Is loading fast. – Tony Nov 29 '19 at 09:49
  • 1
    Ok, disregarding off-topic common sense (1 request, 1500 requests makes no difference to the question) - what's the problem you're having with implementing what you want? ie on page scroll make another request? – freedomn-m Nov 29 '19 at 09:51
  • I have tested some code, but i cant get it to work, so I want some help on how I can write some good code :). – Tony Nov 29 '19 at 09:54
  • Then please add your code to the question. Remember that SO is here to help you debug code, not to write it for you. Also note that for this to work the API you're calling needs to support paging via the AJAX request – Rory McCrossan Nov 29 '19 at 09:55
  • I need some help pointing and showing some code to help me, I dont want you to write everything. My ajax code is added. – Tony Nov 29 '19 at 09:58
  • Yes, we know you can make ajax calls - you want to make that ajax call on page scroll - what's stopping you? Where's your attempt at adding the existing ajax call(s) to the scroll? – freedomn-m Nov 29 '19 at 10:04
  • 1
    The term you're looking for is "infinite scrolling" - here's an example implementation: https://stackoverflow.com/a/27898461/2181514 – freedomn-m Nov 29 '19 at 10:05
  • You just need to adapt your ajax requests to the pagination on the destination page. I Think problem is you are crawling external site. If you have the server also, just call ajax?page=10 and such – Cristo Nov 29 '19 at 10:12
  • Hi! Ok, I understand, but I dont wanna go to another page, I wanna stay on one page, and load more requests on scroll. – Tony Nov 29 '19 at 10:16
  • Yes, on your same page. You make the request with the param so it gets let's say page=1 (which contents 10 ducks), then ?page=2 which contents the next 10... – Cristo Nov 29 '19 at 11:00
  • Now, you might want to search info about CORS – Cristo Nov 29 '19 at 11:38

2 Answers2

0

Let's say you do this in google:

https://www.google.com/search?q=duck

You want next https://www.google.com/search?q=duck&start=10 so smth like:

var currentPageNumber = 1;
loadMore(currentPageNumber);
$(window).scroll(function() {

    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

        loadMore(currentPageNumber);
        currentPageNumber += 1;
    }
});

function loadMore(currentPage) {
    var start = currentPage * 10;
    $.ajax({
            url :'https://www.google.com/search', 
            data:{
                'search': 'duck',
                'start': start
                },
            }).done(function(response) {
                alert("Success !");
                console.log(response);
                }
            );   
}
Cristo
  • 700
  • 1
  • 8
  • 20
-1

I guess you are talking about loading data rather than requests. Its better to implement lazy loading and when we go the end of the page make a button stating "Load More" and again just increment it by 10.

Rishi RD
  • 1
  • 1