Async xhr called while another one in progress waits for response of another

window.URL = window.URL || window.webkitURL;

var audio = document.getElementById("player"),
    progress = document.getElementById("player_progress"),
    dur = 0;

function loadSong(){
    if(!glo.player){
        $(".player .buttons > div, .player .get").addClass("disabled");
    }
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/home/song/?'+new Date().getTime(), true);
    xhr.responseType = 'blob';
    xhr.onreadystatechange = function(){
        if(xhr.readyState===2){
            var header = xhr.getResponseHeader('Content-Disposition'),
                tid = parseInt(header.split('"')[1], 10);
            getInfo(tid);
        }
    };
    xhr.onload = function(e) {
        audio.src = window.URL.createObjectURL(this.response);
        audio.play();
        $(".player .play").addClass("h");
        $(".player .pause").removeClass("h");
        if(!glo.player){
            glo.player = true;
            $(".player .buttons > div, .player .get").removeClass("disabled");
        }
    };
    xhr.send();
}

function getInfo(tid){
    var xhr1 = new XMLHttpRequest();
    xhr1.open('POST', '/home/info/?'+new Date().getTime(), true);
    xhr1.responseType = 'json';
    xhr1.onload = function(e) {
        console.log(this.response);
    };
    xhr1.send("tid="+tid);
}

loadSong();

If you perform this code(you can check it at http://ift.tt/1Dg7HEA), xhr1 in getInfo receive just a json data, but loading till the first xhr in loadSong will be loaded. Both xhr are asynced. What I'm doing wrong?