javascript - 一个接一个地运行 2 个 ajax 函数

Question

我正在尝试一个接一个地运行 showBalance 和 showTeam 函数。它们首先由鼠标单击触发，即 addPlayer 函数。我希望其他两个也能在连锁反应中执行。目前只有 1 个 showBalance/showTeam 功能可以随时工作。

function addPlayer(playerID, playerValue) {
  if (ajaxObject.readyState == 4 || ajaxObject.readyState == 0) {
    ajaxObject.open("GET", "http://localhost:8888/FantasyFootball/V3.0/addPlayer.php?playerID=" + playerID + "&playerValue=" + playerValue, true);
    document.getElementById("error").innerHTML = ajaxObject.responseText;
    ajaxObject.onreadystatechange = showBalance;
    ajaxObject.send();
  }
}

function showBalance() {
  ajaxObject.onreadystatechange = function () {
    if (ajaxObject.readyState == 4 && ajaxObject.status == 200) {
      document.getElementById("balance").innerHTML = ajaxObject.responseText;
    }
  }
  ajaxObject.open("GET", "http://localhost:8888/FantasyFootball/V3.0/bankBalance.php", false);
  ajaxObject.onreadystatechange = showTeam;
  ajaxObject.send();
}

function showTeam() {
  ajaxObject.onreadystatechange = function () {
    if (ajaxObject.readyState == 4 && ajaxObject.status == 200) {
      document.getElementById("playerFormation").innerHTML = ajaxObject.responseText;
    }
  }
  ajaxObject.open("GET", "http://localhost:8888/FantasyFootball/V3.0/showSquad.php", false);
  ajaxObject.send();
}

Answer 1

showBalance()在另一个onreadystatechange处理程序中进行就绪状态检查，并设置了两次该处理程序。它应该直接检查它们，然后为下一个 AJAX 调用设置处理程序。

function showBalance() {
  if (ajaxObject.readyState == 4 && ajaxObject.status == 200) {
      document.getElementById("balance").innerHTML = ajaxObject.responseText;
      ajaxObject.open("GET", "http://localhost:8888/FantasyFootball/V3.0/bankBalance.php", false);
      ajaxObject.onreadystatechange = showTeam;
      ajaxObject.send();
  }
}

function showTeam() {
  if (ajaxObject.readyState == 4 && ajaxObject.status == 200) {
      document.getElementById("playerFormation").innerHTML = ajaxObject.responseText;
      ajaxObject.open("GET", "http://localhost:8888/FantasyFootball/V3.0/showSquad.php", false);
      ajaxObject.onreadystatechange = showSquad; // I'm just guessing
      ajaxObject.send();
}