我无法使用 onreadystatechange 方法触发 XMLHttpRequest 是更好的使用方法

如何解决我无法使用 onreadystatechange 方法触发 XMLHttpRequest 是更好的使用方法

我有一个 html 姓名表，我希望能够单击姓名并检索此人的其他详细信息，并将其显示在“警报”弹出窗口中。我计划使用 XMLHttpRequest 将名称发送到 php 文件进行处理。我可以毫无困难地从表中检索名称，但我已经运行了一些诊断测试并且似乎无法使用 onreadystatechange 方法触发 XMLHttpRequest。 这是我检索名称的代码：-

function getDetails(x){
        var tr1 = x.parentNode.rowIndex;
        var td1 = x.cellIndex;
        var table = document.getElementById("selectedTeams");
        //Diagnostic 
        //document.getElementById("tr1").innerHTML = "1st Row index is: " + tr1; 
        //document.getElementById("td1").innerHTML = "1st Column index is: " + td1;  
        player = table.rows[tr1].cells[td1].innerHTML;
        player = player.replace("<b>","");
        player = player.replace("</b>","")
        player = player.trim();
        //Diagnostic 
        //document.getElementById("res3").innerHTML = "The player selected is: " + player;
        getName(player);
        //Diagnostic 
        //alert("This will be the "+ player + " details");
    }

这会得到玩家的名字。它运作良好。然后将玩家的姓名传递给 getName() 函数。从我的诊断来看，它不会触发 onreadystatechange 并执行后续功能。我在这里使用了正确的方法还是有更合适的方法，其余的代码是否正常。 getName() 函数的代码是：-

function getName(str){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200){
                //document.getElementById("res3").innerHTML = this.responseText;
                alert(this.responseText);
            }
            xmlhttp.open("GET","playerDetails.php?q= " + str,true);
            xmlhttp.send();
            //Diagnostic 
            //alert("after onreadystatechange");
        }
        //Diagnostic 
       //alert("after function");
    }

解决方法

您已经将 open 和 send 调用放在了 onreadystatechange 事件处理程序的内，直到 open 和send 被调用。看到 catch-22 了吗？ 通过将 open 和 send 的调用从 onreadystatechange 事件处理程序移动到封闭的 getName 函数体中来解决此问题，如下所示：

function getName(str) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200){
      //document.getElementById("res3").innerHTML = this.responseText;
      alert(this.responseText);
    }
    //Diagnostic 
    //alert("after onreadystatechange");
  };
  xmlhttp.open("GET","playerDetails.php?q= " + str,true);
  xmlhttp.send();
  //Diagnostic 
  //alert("after function");
}