javascript - 没有调用ajax onreadystatechange函数

为什么此代码不起作用（调用handleRequestStateChange函数时）？：

function ajaxRequest(){
 var xmlObj = new XMLHttpRequest();
 xmlObj.open("GET","1.php",true);
 xmlObj.onreadystatechange = handleRequestStateChange;
 xmlObj.send(null);
}

var handleRequestStateChange = function(){
    if(xmlObj.readyState == 4 && xmlObj.status==200){
        alert("if loaded");
    }
}

但这是（不调用handleRequestStateChange函数）：

function ajaxRequest(){

 var xmlObj = new XMLHttpRequest();
 xmlObj.open("GET","1.php",true);

 xmlObj.onreadystatechange = function(){
    if(xmlObj.readyState == 4 && xmlObj.status==200){
            alert("if loaded");
    }
 }
 xmlObj.send(null);}

最佳答案

在这种情况下，问题仅出在变量的范围内，在这种情况下，ajaxRequest可以“看到” handleRequestStateChange，但是handleRequestStateChange不能“看到” xmlObj。在第二个示例中，匿名函数可以看到xmlObject，因为它在“内部” ajaxRequest中。

一个很好的起点是这个stackoverflow答案。 https://stackoverflow.com/a/500459/1480215

例如，删除var实际上会修复第一个代码（不是一个好主意）。

function ajaxRequest(){
  xmlObj = new XMLHttpRequest(); //suddenly global scope
  xmlObj.open("GET","1.php",true);
  xmlObj.onreadystatechange = handleRequestStateChange;
  xmlObj.send(null);
}

var handleRequestStateChange = function(){
  if(xmlObj.readyState == 4 && xmlObj.status==200){
    alert("if loaded");
  }
}

下面的代码也可以工作

function ajaxRequest(){
  var xmlObj = new XMLHttpRequest();
  var handleRequestStateChange = function(){
    if(xmlObj.readyState == 4 && xmlObj.status==200){
      alert("if loaded");
    }
  }
  xmlObj.open("GET","1.php",true);
  xmlObj.onreadystatechange = handleRequestStateChange;
  xmlObj.send(null);
  //but not if var handleRequestStateChange is here
  //due to https://stackoverflow.com/a/336868/1480215
}

为了完整起见，我还将在其中包含以下片段

function ajaxRequest(){
  var xmlObj = new XMLHttpRequest();

  xmlObj.open("GET","fragments.htm",true);
  xmlObj.onreadystatechange = handleRequestStateChange;
  xmlObj.send(null);

  function handleRequestStateChange(){ //this will work instead of var funcName=function(){}
    if(xmlObj.readyState == 4 && xmlObj.status==200){
      alert("if loaded");
    }
  }
}

如果我们只在谈论xmlHttpRequest事件（或一般事件），那么也可以使用传递的事件参数。

function ajaxRequest(){
  var xmlObj = new XMLHttpRequest();
  xmlObj.open("GET","1.php",true);
  xmlObj.onreadystatechange = handleRequestStateChange;
  xmlObj.send(null);
}

var handleRequestStateChange=function(event){   //event handlers passes this, generally
  var xmlObj=event.target || event.srcElement   //for compatibility
  //but just having XMLHttpRequest(), is not fully cross-platform anyway
  if(xmlObj.readyState == 4 && xmlObj.status==200){
    alert("if loaded");
  }
}

展望未来，我认为使用现有的小型ajax代码段或类似http://www.openjs.com/scripts/jx/的库可能是一个好主意。甚至jQuery也具有RPC（包括<script>可以包含来自其他域的没有COR的脚本）