连续调用异步loadbox函数时部分Div无法加载PHP内容的问题

你的问题出在异步回调对外部变量的引用上——在部分旧浏览器环境中，连续调用loadbox时，异步回调里的xmlhttp变量可能因为作用域绑定的问题，指向了后创建的请求实例，导致前一个请求的回调无法正确更新目标div。而同步模式下请求是串行执行的，不会出现这个变量混淆的情况。

下面是两种可行的修复方案：

方案一：用this替代外部变量 #

回调函数中的this会自动指向当前的XMLHttpRequest实例，用它代替外部的xmlhttp变量可以彻底避免作用域混淆：

function loadbox(url, targetbox){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=function(){
    // 使用this指向当前请求实例
    if (this.readyState==4 && this.status==200){
      document.getElementById(targetbox).innerHTML=this.responseText;
    }
  }
  xmlhttp.send();
};

方案二：通过闭包捕获变量 #

用立即执行函数创建闭包，把当前的请求对象和目标盒子作为参数传入，确保回调始终引用正确的变量：

function loadbox(url, targetbox){
  var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",url,true);
  // 闭包捕获当前请求和目标盒子
  xmlhttp.onreadystatechange=(function(xhr, box){
    return function(){
      if (xhr.readyState==4 && xhr.status==200){
        document.getElementById(box).innerHTML=xhr.responseText;
      }
    }
  })(xmlhttp, targetbox);
  xmlhttp.send();
};

额外建议：添加错误处理 #

可以在回调中加入状态码判断，当请求失败时输出错误信息，方便后续排查问题：

xmlhttp.onreadystatechange=function(){
  if (this.readyState==4){
    if (this.status==200){
      document.getElementById(targetbox).innerHTML=this.responseText;
    }else{
      console.error(`加载${url}失败，状态码：${this.status}`);
    }
  }
}

内容的提问来源于stack exchange，提问作者Mikey G