Question

我有一个像下面这样的异步函数（从url获取数据并加载html元素）

function gethtml(URL, elementID) {      
  if (window.XMLHttpRequest) {      
    xmlhttp=new XMLHttpRequest();
  } else {  
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   }
  xmlhttp.open("GET",URL,true);   
  xmlhttp.send();       
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {         
    document.getElementById(elementID).innerHTML = xmlhttp.responseText;            
    }
  }   
}

我需要多次调用上面的函数来将数据加载到多个html元素中。例如：

gethtml(URL1, 'element1');
gethtml(URL2, 'element2');
gethtml(URL3, 'element3');

我试过但是，它只加载了最后一个URL3数据。我认为每次调用异步函数时数据都会覆盖如何通过调用多个时间来从相同的异步函数加载数据？

Answer 1

问题是你只有一个变量xmlhttp，它被声明为全局变量。并且每次调用函数时都会通过调用new XMLHttpRequest()来覆盖它。它创建一个新的，并指定回调，但随后立即通过创建一个新对象来销毁该引用。

修复方法是为每个请求保留一个本地XMLHttpRequest对象。

function gethtml(URL, elementID){
  // using the 'var' keyword makes these variables local in scope -
  // only accessible from this function
  if (window.XMLHttpRequest) {      
    var xmlhttp=new XMLHttpRequest();
  } else {  
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
  }

  // ... 
}

使用var关键字，它应该按预期工作。

加载来自同一异步函数的数据，多次调用而无需承诺

1 个答案: