what is the right way to manage multiple ajax requests?

Question

We've all seen some examples in AJAX tutorials where some data is sent. They all (more or less) look like:

var http = createRequestObject(); // shared between printResult() and doAjax()

function createRequestObject() { /* if FF/Safari/Chrome/IE ... */ ... }

function printResult() 
{ 
    if (http.readyState == 4) { ... } 
}

function doAjax() {
    var request = 'SomeURL';
    http.open('post', request);
    http.onreadystatechange = printResult;
    data = ...; // fill in the data
    http.send(data);
}

// trigger doAjax() from HTML code, by pressing some button

Here is the scenario I don't understand completely: what if the button is being pressed several times very fast? Should doAjax() somehow re-initialize the http object? And if if the object is re-initialized, what happens with the requests that are being already on air?

PS: to moderator: this question is probably more community-wiki related. As stated here (https://meta.stackexchange.com/questions/67581/community-wiki-checkbox-missing-in-action) - if I've got it right - please mark this question appropriately.

+1 It's a great question for a common question – Tony the Pony May 09 '11 at 08:04 — Tony the Pony, May 09 '11 at 08:04

score 3 · Answer 1 · answered May 09 '11 at 08:12

3

Since AJAX has asynchronus nature, with each button click you would raise async event that would GET/POST some data FROM/TO server. You provide one callback, so it would be triggered as many times as server finishes processing data.

It is normal behaviour by default, you should not reinitialize of http object. If you want to present multiple send operation you have to do that manually (e.g. disabling button as first call being made).

I also suggest to use jQuery $.ajax because it incapsulate many of these details.

answered May 09 '11 at 08:12

Alexander Beletsky

19,453
9
63
86

Calling the open function of an XMLHTTPRequest object aborts the send algorithm and cancels any network activity that the object is responsible for. Just because it's asynchronous doesn't mean one object can handle multiple requests concurrently, in fact it can't. – Jake T. May 09 '11 at 08:31

score 2 · Accepted Answer · answered May 09 '11 at 10:27

Sure that numerous libraries exist nowadays that perform a decent job and should be used in production environment. However, my question was about the under-the-hood details. So here I've found the lamda-calculus-like way to have dedicated request objects per request. Those object will obviously be passed to the callback function which is called when response arrives etc:

function printResult(http) {
  if (http.readyState == 4) { ... } 
  ...
}

function doAjax() {
    var http = createRequestObject();       
    var request = 'SomeURL';

    http.open('get', request);      
    http.onreadystatechange = function() { printResult(http); };
    http.send(null);
    return false; 
}

Successfully tested under Chrome and IE9.

score 1 · Answer 3 · edited May 23 '17 at 12:09

1

I've used a per-page request queue to deal with this scenario (to suppress duplicate requests and to ensure the sequential order of requests), but there may be a more standardized solution.

Since this is not provided by default, you would need to implement it in JavaScript within your page (or a linked script). Instead of starting an Ajax request, clicking a button would add a request to a queue. If the queue is empty, execute the Ajax request, with a callback that removes the queued entry and executes the next (if any).

See also: How to implement an ajax request queue using jQuery

edited May 23 '17 at 12:09

Community

1
1

answered May 09 '11 at 08:06

Tony the Pony

40,327
71
187
281

I also use a per-page request, am I? but how it resolves/suppresses duplicate requests? – BreakPhreak May 09 '11 at 08:13

what is the right way to manage multiple ajax requests?

3 Answers3