CODEWITHSUNDEEP
javascriptjqueryajax
Rehat
Rehat

Reputation: 89

How to process jquery ajax requests in the order they were requested

I am making a java servlet page that checks a list of domain names and it checking each name through a jquery ajax request. It works fine except the results are being appended to the DOM out of order. What is the best method to process requests in the requested order but also be asynchronously like a long polling effect. I am new with javascript.

This is the code I am using for the requests:

$.ajax({
    async:true,
    type:'GET',
    url:servlet,
    success:function(data){
        $('p').append(data+"<br>");
    }, 
});

I was thinking of sending a sequence number to the java servlet which would return it through JSON but I was wondering if there was a simpler way.

Upvotes: 1

Views: 3788

Answers (4)

Corbin
Corbin

Reputation: 33457

What I would do is create the containers for the response ahead of time and then bind the callback around it (not actually binding as in the bind() function).

For example, assuming you have a container something like <div id="container"></div>, you can do the following:

function makeRequest(something) {
    var target = $("<div></div>");
    $("#container").append(target);
    $.get("", {something: something}, function(data) {
        target.html(data);
    });
}

It's a rather bad example in terms of flexibility, but it should illustrate the point. It adds a div to the container before the request is made and then uses that div to push the response into. That means that the divs will be appended in the order the requests are made. You could extend this idea to use styling to make it look like the divs aren't there until they're populated, or you could have a "Loading" message in them.

(Also, the data passing is rather bad with the something parameter, but hopefully you get the point.)

Upvotes: 3

adeneo
adeneo

Reputation: 318342

Take the success functions out of the Ajax function itself, and chain the success functions, they will fire in order and if one request has not finished it will wait for it to finish before firing the next one.

A really simple way of doing it would be to just do like so:

var firstOne = $.ajax({
    async:true,
    type:'GET',
    url:servlet
}); 

var SecondOne = $.ajax({
    async:true,
    type:'GET',
    url:servlet
}); 

firstOne.done(function(data){
    $('p').append(data+"<br>");
    SecondOne.done(function(data){
        $('p').append(data+"<br>");
    }); 
});

For more advanced methods learning how promises work is a good idea!

This is much faster than sequentially sending ajax requests, waiting for the last one to finish before the next one starts, as this will send all of them when the browser is available, and chaining the done() functions will wait for any that are not finished, and just execute the ones that are finished right away when they are reached in the order you put them in, and the content will then be appended in the right order. If doing many ajax calls, using promises and $.when/$.then will let you build a more rational function with iterations etc.

Upvotes: 0

Alex Siri
Alex Siri

Reputation: 2864

You could sequence the requests sent to the server, caching the results, and adding them only in sequence

next_to_request = 0;
next_to_append = 0;
results = [];
function reqToServer(){
  var e = next_to_request++;

  $.ajax({
    async:true,
    type:'GET',
    url:servlet,
    success:function(data){
        results[e] = data;
    }, 
  }); 
function loadAnswers(){
   if (results[next_to_request]){
     data = results[next_to_request];
     next_to_request++;
     $('p').append(data+"<br>");
   }
}

setTimeout(100, loadAnswers);

This has a different thread for displaying the results, and are only displayed in the right order.

Upvotes: 0

Eli Sand
Eli Sand

Reputation: 1032

I'm guessing your problem is that the browser sends as many AJAX requests as possible to the server, and the server answers them as it can. It's likely that the server is just answering some faster than others so you get them out of order though the requests were sent in order.

The fix for this would be to have your queries sent sequentially to ensure the answers back are sequential. Essentially, do an AJAX call, and on success of that call, you then initiate the second AJAX call, etc...

Upvotes: 1

Related Questions