Несколько HTTP-запросов одним и тем же файлом js

Question

У меня проблема с файлом js, который вызывает несколько HTTP-запросов. У меня есть кнопка, вызовите функцию VisualizzaReport, которая находится в моем файле visualizzaReport.js

Вот функция VisualizzaReport (выберите это идентификатор пользователя)

function visualizzaReport(select){ 
     reportUtente(select) 
     loadPianificazione(select) 
    } 

Здесь функция reportUtente (выбрать)

function reportUtente(select) { 
     var url = "../loadReportUtenteServlet?"; 
     url += "type=perso_atti&value=" + select.value; 
     xmlhttp.onreadystatechange = handlerForReportUtente; 
     xmlhttp.open("GET", url); 
     xmlhttp.send(""); 

    } 

Здесь функция loadPianificazione (выберите)

function loadPianificazione(select) { 
     var url = "../loadPianificazione2Servlet?"; 
     url += "type=pianificazioni&value=" + select.value; 
     xmlhttp.onreadystatechange = handlerForPianificazioneUtente; 
     xmlhttp.open("GET", url); 
     xmlhttp.send(""); 
    } 

моя проблема в том, что функция reportUtente запущена, но не действует, потому что кажется, что она заменяется функцией loadPianificazione. Как я могу вызвать loadPianificazione только тогда, когда reportUtente завершил его выполнение?

Answer 1

В вашем случае я предлагаю вам использовать либо JQuery или AngularJs для этих целей.

JQuery пример:

$.get('url1.com', function(){ 
    $.get('url2.com'); 
}) 

Вы запросить url2.com только тогда, когда первый запрос закончен.

Answer 2

Вы, кажется, используете одну глобальную переменную xmlhttp.

Затем вы вызываете две функции, которые делают с ней что-то. Второй будет перезаписывать xmlhttp.onreadystatechange до того, как первый запрос будет завершен, поэтому вторая функция, которую вы там поместите, будет вызываться для каждого запроса.

Не делайте этого. Создайте новый экземпляр XMLHttpRequest для каждого запроса и сохраните его в локальной области, чтобы он не мешал другим экземплярам.

function reportUtente(select) { 
    var url = "../loadReportUtenteServlet?"; 
    url += "type=perso_atti&value=" + select.value; 

    var xmlhttp = new XMLHttpRequest(); // New instance here 

    xmlhttp.onreadystatechange = handlerForReportUtente; 
    xmlhttp.open("GET", url); 
    xmlhttp.send(""); 

} 

Вы не поделили handlerForReportUtente, но это должно выглядеть примерно так:

function handlerForReportUtente() { 
    alert(this.responseText); // Use `this` to get the right XHR object 
}