When sending multiple XMLHttpRequests only the last request returns success

Question

I have a page that dynamically creates (using jQuery) Input boxes for the user. The user can then enter values in each input box he created. On clicking the save button a call is made to a javascript function that iterates through all the input boxes user created and sends these values using an XMLHttpRequest to the process.php file which inserts these values into the DB. This code works fine if i send only one Request at a time. But if i loop it and send the value from each box on each iteration (means, send multiple requests using loop), only the last Request finds success. All the other calls except the last call gets aborted (found it using firebug). Any idea why is this happening? My code: ``` <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 }…

Accepted Answer

You cannot use an instance of `XMLHttpRequest` for more than one request. Create a new instance for each request.

Since you're already using jQuery, I recommend to use `$.ajax` (or `$.get`) to fetch 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);
        });
    });
}
```

When sending multiple XMLHttpRequests only the last request returns success

Solution

Problem