I have JavaScript code like this:

var buffer=new Array();

function fetchData(min,max){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100);
console.log(buffer);//this log an empty array

two logs with different result, what am I doing wrong? thanks for pointers.

I have JavaScript code like this:

var buffer=new Array();

function fetchData(min,max){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100);
console.log(buffer);//this log an empty array

two logs with different result, what am I doing wrong? thanks for pointers.

• javascript
• arrays

• The buffer variable in the fetchData function is conditional set. Are you sure ajaxReq.status and ajaxReq.readyState are equaling what you want? – John Giotta Commented Dec 6, 2011 at 21:28

6 Answers 6

Ajax is asynchronous. That means that console.log(buffer) at the end is executed before the response from the Ajax request.

You should change your method to this:

function fetchData(min,max,callback){
  var ajaxReq = new XMLHttpRequest(); 
  ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
      if (ajaxReq.status === 200) {
        buffer= ajaxReq.responseText;
        callback();
        //console.log(buffer)//this logs an array to console
      } else {
        console.log("Error", ajaxReq.statusText);
      }
     }
  };
  ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
  ajaxReq.send();
}

fetchData(1,100,function(){
    console.log("My Ajax request has successfully returned.");
    console.log(buffer);
});

You are trying to log() the buffer before the AJAX request in executed. To solve this, your fetchData function needs to handle a callback function.

var buffer=new Array();

function fetchData(min,max, callback){
    var ajaxReq = new XMLHttpRequest(); 
    ajaxReq.onreadystatechange = function(){
    if (ajaxReq.readyState === 4) {
        if (ajaxReq.status === 200) {
            buffer= ajaxReq.responseText;
            console.log(buffer)//this logs an array to console
            if(typeof callback == 'function'){
                callback.call(this);
            }
        } else {
            console.log("Error", ajaxReq.statusText);
        }
    }
    };
    ajaxReq.open('GET', "server/controller.php?min="+min+"&max="+max, true); 
    ajaxReq.send();
}

fetchData(1,100, function(){
    console.log(buffer);
});

This is the most basic implementation, and will work only if the AJAX response is successful.

This is asynchronous. So your flow goes like this:

1. call fetchData()
2. ajax request is sent, registering an onreadystatechange callback
3. fetchData() pletes and returns
4. buffer is logged out, which doesn't yet contain anything.
5. Sometime later, the ajax request pletes and triggers the callback
6. The callback puts things in the array.
7. buffer get's logged out from the callback, and you see it now has items in it.

So you are only starting the asynchronous request once you hit that first console.log. But it actually finishes long afterward.

A couple of issues here. When the ajax call pletes the 2nd console.log has already executed before the variable was set.

Also,You're not using the buffer varaible as an Array.

Seems right to me. buffer is empty to start and it doesn't get set until AFTER the asynchronous call is made, so even though you're fetchingData before the second console.log, you're not receiving it until after it shows an empty buffer.

MDN: https://developer.mozilla/en/XMLHttpRequest

void   open(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);

The third argument is used to tell the browser whether the request should be made asynchronous or not. You set it to true, thus it will be async. Async basically means that the request is sent and meanwhile other code is executed. So, it starts the request, and while waiting for a response, it logs the buffer: before the request has finished. If you want to log the contents, do it in the onreadystatechange event or set the third argument (async) to false.