Вызов функции AJAX после другого

Question

У меня есть что-то, что я не могу понять, как это сделать в AJAX. У меня есть боковая панель и div-контент на моей странице. Боковая панель изготовлена ​​из кнопки и OnClick его называют классическую функцию:

function loadDoc(url) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("content").innerHTML = xhttp.responseText; 
    } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
} 

Он загружает «URL» кнопки в контенте. Ну, на данный момент все в порядке. Теперь один из этих URL-адресов, например «TheUrl», представляет собой документ, содержащий заголовок и т. Д., И «список» div, и в этом списке я хотел бы загрузить XML-файл. У меня есть функция

function loadXML() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
    myFunction(xhttp); 
    } 
    }; 
    xhttp.open("GET", "file.xml", true); 
    xhttp.send(); 
} 
function myFunction(xml) { 
    var i; 
    var xmlDoc = xml.responseXML; 
    var table="<ul>"; 
    var x = xmlDoc.getElementsByTagName("ITEM"); 
    for (i = 0; i <x.length; i++) { 
    table += "<li>" + 
    x[i].getElementsByTagName("ELEMENT")[0].childNodes[0].nodeValue + 
    "</li>" 
    }; 
    table += "</ul>"; 
    document.getElementById("list").innerHTML = table; 
} 

Но я понятия не имею, как загрузить функцию loadXML() после loadDoc («TheUrl»), так что данные Xml появится в списке сНа, который был создать в содержании сНа .. Я поняла? : D

Я хотел бы что-то подобное в моей боковой панели:

<ul> 
<li><button type="button" onclick=loadDoc("OtherUrl.html")>OtherUrl</button></li> 
<li><button type="button" onclick=loadDoc("TheUrl.html").done(loadXML())>TheUrl</button></li> 
</ul> 

Спасибо Вам заранее за любезную помощь.

Answer 1

Вы можете просто позвонить loadXML функцию в случае первого вызова AJAX onreadystaechange так:

xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      document.getElementById("content").innerHTML = xhttp.responseText; 
      // call the other function 
     loadXML(); 

     }