Using XMLHttpRequest with Django

Creating multiple concurent instances of XMLHttprequest

If we try to reuse the same code for two requests with identical structures - like below - that happens in the same time, one of them don't receive his answer from the server because of some concurent common portion of code between them. One of the requests return code = 0 (none bytes received but the server sent the answer) (requests works only if they are separated by some intermediary time of execution which separates them which could happen randomly).
<script>

function getXHR(){
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { //code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

function comm1(url,su{
    xhr = getXHR();

    xhr.onload = function() {
        if (xhr.status === 200) {
            success(xhr.responseText);
        }
        else{
            error(xhr.status);
        }
    }

    xhr.onerror = function() {
        error("Error: No response from server.");
    }

    xhr.open('GET', url);
    xhr.send(null);
}

function actions1(){ 
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");

    div1.innerHTML = "";
    div2.innerHTML = "";

    function error1(status)    { div1.innerHTML = "Err code: " + status; }
    function success1(response){ div1.innerHTML = response; }
    comm1("test/?arg=1",success1,error1);

    function error2(status)    { div2.innerHTML = "Err code: " + status; }
    function success2(response){ div2.innerHTML = response; }
    comm1("test/?arg=2",success2,error2);
}

window.onload=function(){
    var button1 = document.getElementById('test1');
    button1.onclick = actions1;
}

</script>
Server response1:
Server response2:



Simply separating the requests makes things work but don't resolve code reusability.
<script>
function actions2(){
    var div1 = document.getElementById("div1_1");
    var div2 = document.getElementById("div2_1");

    div1.innerHTML = "";
    div2.innerHTML = "";

    xhr1 = getXHR();
    xhr2 = getXHR();

    xhr1.onload = function() {
        if (xhr1.status === 200) {
                div1.innerHTML = xhr1.responseText;
        }
        else{
             div1.innerHTML = "Err code: " + xhr1.status;
        }
    }

    xhr1.onerror = function() {
        div1.innerHTML = "Error: No response from server."
    }

    xhr1.open('GET', "test/?arg=1");
    xhr1.send(null);

    xhr2.onload = function() {
        if (xhr2.status === 200) {
                div2.innerHTML = xhr2.responseText;
        }
        else{
             div2.innerHTML = "Err code: " + xhr2.status;
        }
    }

    xhr2.onerror = function() {
        div2.innerHTML = ("Error: No response from server.");
    }

    xhr2.open('GET', "test/?arg=2");
    xhr2.send(null);

}

window.onload=function(){
    var button2 = document.getElementById('test2');
    button2.onclick = actions2;
}

</script>
Server response1:
Server response2:



So every request must be a separate object...
<script>

function comm(url,success,error){
    var self = this;

    this.xhr = getXHR();

    this.url = url;
    this.success = success;
    this.error = error;

    this.xhr.onload = function() {
        if (self.xhr.status === 200) {
            if(self.success) self.success(self.xhr.responseText);
        }
        else{
            if(self.error) self.error(self.xhr.status)
        }
    }

    this.xhr.onerror = function() {
        if(self.error) self.error("No response from server.");
    }

    this.go = function(){
        this.xhr.open('GET', self.url);
        this.xhr.send(null);
    }
}

function actions3(){
    var div1 = document.getElementById("div1_2");
    var div2 = document.getElementById("div2_2");

    div1.innerHTML = "";
    div2.innerHTML = "";

    function success(response){ div1.innerHTML = response; }
    function error(status)    { div1.innerHTML = "Error: " + status; }
    var req1 = new comm("test/?arg=1",success,error);

    function success(response){ div2.innerHTML = response; }
    function error(status)    { div2.innerHTML = "Error: " + status; }
    var req2 = new comm("test/?arg=2",success,error);

    req1.go();
    req2.go();
}

window.onload=function(){
    var button3 = document.getElementById('test3');
    button3.onclick = actions3;
}
</script>
Server response1:
Server response2: