javascript - ajax onreadystatechange 函数未被调用

Question

为什么这段代码不起作用(调用 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);}

Answer 1

在这种特殊情况下，问题只是在变量的范围内，在这种情况下，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");
  }
}

展望 future ，我认为使用现有的小型 ajax 片段或库(如 http://www.openjs.com/scripts/jx/)可能是个好主意。 .甚至 jQuery 也有 RPC(包括 <script> s 以包含来自其他域的脚本而没有 COR)