Only last of multiple ajax requests gets completed

Question

I'm trying to create a script that allows me to make a ajax call with few lines of code. The script works with one ajax request, but when it comes to handling multiple request at once it fails. What have I done wrong ?

The code only processes the last request, while leaving the others "loading ...".

Here's my code:

/****************
  Related Javascript inside the HTML document
****************/
// First request
var ajax1 = new ajax_class();
ajax1.meth = "GET";
ajax1.file = "ajax_info.txt";
ajax1.elem = "results";
ajax1.send = null;
ajax1.ajax_call(ajax1.meth, ajax1.file, ajax1.elem, ajax1.send);

...

// Third request
var ajax3 = new ajax_class();
ajax3.meth = "GET";
ajax3.file = "ajax_info3.txt";
ajax3.elem = "results3";
ajax3.send = null;
ajax3.ajax_call(ajax3.meth, ajax3.file, ajax3.elem, ajax3.send);

/****************
  Related HTML inside the HTML document
****************/

<body>
<div id="results">Nothing has happend yet for 1....</div>
<div id="results2">Nothing has happend yet for 2 ....</div>
<div id="results3">Nothing has happend yet for 3 ....</div>
</body>


/****************
  Related code inside the JAVASCRIPT document
****************/

function ajax_class () {

this.meth = "GET";
this.file;
this.elem;
this.send = null;

this.ajax_call = function (meth, file, elem, send) {
    x = new XMLHttpRequest();
    x.onreadystatechange = function () {
        if (x.readyState == 4 && x.status == 200) {
           _id(elem).innerHTML = x.responseText;
        }
        else {
            _id(elem).innerHTML = "Loading ...";
        }
    }
    x.open(meth , file, true);
    x.send(send);
}
}

Works now, just had to add the "var" in front of x variable

If you found a solution, add it as an answer and accept it! – likeitlikeit Aug 19 '13 at 20:57 — likeitlikeit, Aug 19 '13 at 20:57

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

It's at least partially because each new XMLHttpRequest is being set to the same global x, which can only keep 1 of them. This means later references to x.readState and x.responseText aren't always referring to the "correct" instance.

You'll want to declare x when or before setting it so it's scoped and unique to each Ajax request:

var x = new XMLHttpRequest();

For more info, see Difference between using var and not using var in JavaScript.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 19 '13 at 20:43

Jonathan Lonowski

121,453
34
200
199

Not "possibly", it's exactly what's happening. – just_dont Aug 19 '13 at 20:43
@just_dont I wrote that because I don't know if this the only issue. But, revised to clarify. – Jonathan Lonowski Aug 19 '13 at 20:45
It works perfectly now, that I used the "var" -- Thank you very much – larsrbak Aug 19 '13 at 20:50

score 0 · Answer 2 · answered Aug 19 '13 at 20:53

If you can make use of jQuery, your code will become much more simple

    function firstAjaxCall() {
      return $.get('/first');
    }

    function secondAjaxCall() {
      return $.get('/second');
    }

    function doFinalWork() {
      //wrap up
    }

    $.when( firstAjaxCall(), secondAjaxCall() )
      .done(function() {
        doFinalWork();
      })
      .fail(function() {
        console.log( 'Something is wrong, go fix it.' );
    });

Only last of multiple ajax requests gets completed

2 Answers2