AJAX readystate breaking, AJAX not processing data fast enough?

Question

http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/#xmlhttprequest

4 Loaded The data transfer has been completed.

readyState == 4

I used the ajax framework from w3schools.

I want to process the data from a group of rows. (form fields). I loop through the form elements and send them to the ajax script. The ajax script then sends the data via get to a php page that processes the data. Once the processing is complete, the data should then be displayed back to the original page where the function was called.

I get this error message: "The data necessary to complete this operation is not yet available." and results for the last row are displayed only. The function works correctly on an individual bases, but when I try to loop through more than one row that error occurs.

function stateChanged5() 
{ 

    if (request5.readyState==4)
    {
     document.getElementById(displayElem).innerHTML=request5.responseText;
    }
    else
    {
     document.getElementById(displayElem).innerHTML=""; 
    }
}

Ready state condition is breaking to here except for last row. If I try to put the above line of code here I get the the data necessary to complete this operation is not yet available. This is how I came to the conclusion that the php page is not proccessing the data fast enough for the ajax to return it and display it in time for the next iteration.

Answer 1

Wait for each row's results to come back before kicking off the request for the next one.

Answer 2

Recursion...

var counter = 0;

function makeRequest() {
  var xhr = // yada yada yada, get your XmlHttpRequest instance
  xhr.onreadystatechange = function() {
    if(this.readyState == 4) {
      // Do whatever, based on the counter variable
      counter += 1
      if(counter < 5)
        makeRequest();
    }
    else {
      // Do whatever, based on the counter variable
    }
  }
  xhr.open();
}