Ajax requests in parallel

I have a system that has some things that you use long polling, this messes up everything, any button that you click (that makes an Ajax request) will take a long time because it has the long polling running.

Ajax by default creates a queue of requests, I want the requests to be executed at the same time, in parallel.

For example:

I'm moving the site, meanwhile, I keep an Ajax request that holds the server for 20sec.

If I click on anything or even go to another page, I have to wait for this 20sec request to finish.

I want you to give several requests at the same time, like facebook. Anyone know of any technique? Any references? I've heard of when , but that's not what I need.

Ajax for long polling

getNotifications();
    function getNotifications(lastRequest){
        if(!lastRequest){
            lastRequest = Math.round(+new Date()/1000);
        }
        $.ajax({
            url: "/ajax/get_notifications.php?last_request=" + lastRequest,
            type: "GET",
            async: true,
            success: function(data){
                data = $.parseJSON(data);
                if(data['exist_news'] == true){
                    document.getElementById('notifications').insertAdjacentHTML('afterbegin', data['news']);
                    var howMuchElement = document.getElementById('howMuchNotifications');
                    var howMuch = parseInt(howMuchElement.innerHTML);
                    var curHowMuch = data['howMuch'] + howMuch;
                    howMuchElement.innerHTML = curHowMuch;
                }
                getNotifications(data['last_request']);
            },
            error: function(error){
                showMsg(error['error']);
            }
        });
    }

NOTE: You do not have a problem with long polling.

An example request I have

function loadModal(modalPage, modalBox, button){
    $.ajax({
        url: "/modals/" + modalPage,
        async: true,
        success: function(data){
            $("#" + modalBox + " .modal-body").html(data);  
            button.removeAttribute("onclick");  
        },
        beforeSend: function(){
            $("#" + modalBox + " .modal-body").html("<img src='/images/loading.gif'> Carregando...");
        },
        error: function(){
            $("#" + modalBox + " .modal-body").html("Ocorreu uma erro!");
        }
    });
}