When sending multiple XMLHttpRequests, only the last request returns success

Question

I have a page that dynamically creates (using jQuery) input fields for a user. The user can then enter values ​​in each input field that he created. When the save button is clicked, a javascript function is called, which iterates through all the input windows entered by the user and sends these values ​​using XMLHttpRequest to the process.php file, which inserts these values ​​into the database.

This code works fine if I send only one request at a time. But if I loop it and send a value from each window at each iteration (which means send a few requests using a loop), only the last request will succeed. All other calls except the last call are interrupted (found using firebug).

Any idea why this is happening?

My code is:

<script> function saveTimeSlots(){ var ajaxRequest; try{ ajaxRequest = new XMLHttpRequest(); } catch(e){ alert('Issue with browser.') } ajaxRequest.onreadystatechange = function(){ if( ajaxRequest.readyState==4 ){ alert(ajaxRequest.responseText); //This returns empty except for last call } } var timeSlots = document.getElementById('formSlots').childNodes; var date = $.datepicker.formatDate('dd-mm-yy', new Date($('#datepicker').datepicker("getDate"))); for(j=0; j<timeSlots.length; ++j){ var time = timeSlots[j].getElementsByTagName("input")[0].value; var status = 1; var queryString = "?date=" + date + "&time=" + time + "&status=" + status; ajaxRequest.open("GET", "process.php" + queryString, true); ajaxRequest.send(null); } } </script> <input type="button" value="Save time slots" class="custom-button" onclick="saveTimeSlots()"/> 

Below is the process.php code

 <?php mysql_connect( $dbhost,$user,$pwd ); mysql_select_db( $dbase ) or die( mysql_error() ); $date = mysql_real_escape_string( $_GET['date'] ); $time = mysql_real_escape_string( $_GET['time'] ); $status = mysql_real_escape_string( $_GET['status'] ); $query = "INSERT INTO time_slots (`date`,`time`,`status`) VALUES ('" . $date . "','" . $time . "'," . $status . ")"; echo $query; if( mysql_query( $query ) ){ echo "Success"; }else{ echo mysql_error(); } mysql_close(); } ?> 

This shows Firebug:

 GET http://localhost/process.php?date=24-06-2012&time=1&status=1 Aborted GET http://localhost/process.php?date=24-06-2012&time=2&status=1 Aborted GET http://localhost/process.php?date=24-06-2012&time=3&status=1 200 OK 31ms 

Answer 1

You cannot use an instance of XMLHttpRequest for multiple requests. Create a new instance for each request.

Since you are already using jQuery, I recommend using $.ajax (or $.get ) to get the request.

 function saveTimeSlots(){ $('#formSlots').children().each(function() { var time = $(this).find('input:first').val(); var status = 1; var queryString = "?date=" + date + "&time=" + time + "&status=" + status; $.get("process.php" + querystring, function(responseText) { alert(responseText); }); }); } 

Answer 2

You use the same XMLHttpRequest object for all requests, so as soon as you start the request, the next one starts another request, which interrupts the previous one.

Create a new XMLHttpRequest object for each request or just use jQuery ajax . It is not good to have jQuery and not use it.