Javascript only execute the last function called

Question

I want my page to execute the same function 3 times, calling for 3 different things each time.

The code is currently

 <script>
 ajaxGet('/goget.php?name='+edit.dep.value, 'dep_result');
 ajaxGet('/goget.php?name='+edit.arr.value, 'arr_result');
 ajaxGet('/goget.php?type='+edit.reg.value, 'reg_result');
 </script>

But it only executes the last call. Why?

Javascript:

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {

XMLHttpRequestObject = new XMLHttpRequest();

} else if (window.ActiveXObject) {

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function ajaxGet(ajaxLoadData, changeToID) {

if(XMLHttpRequestObject) {

    var obj = document.getElementById(changeToID);
    XMLHttpRequestObject.open("GET", ajaxLoadData);
    XMLHttpRequestObject.onreadystatechange = function() {

    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status ==     200) {

        obj.innerHTML = XMLHttpRequestObject.responseText;

    }
}

    XMLHttpRequestObject.send(null);

}
}

Answer 1

You'll want to have each call to ajaxGet create its own XMLHttpRequest.

An XMLHttpRequest can only handle 1 request at a time. And, since they'll be making the request asynchronously, they'll be processing in parallel rather than sequentially.

function ajaxGet(ajaxLoadData, changeToID) {
    var obj = document.getElementById(changeToID);
    var xhr = new XMLHttpRequest();

    xhr.open("GET", ajaxLoadData);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            obj.innerHTML = xhr.responseText;
        }
    };
    xhr.send(null);
}

Granted, browsers generally limit requests to only a few at a time (usually 2), queuing any additional. But your code shouldn't count on that.

---

Side note: Unless you need to support IE6 or older, you shouldn't need to fallback to ActiveXObject.