javascript - 并发 AJAX 请求不起作用。最新的请求会覆盖之前的请求

Question

我的网页有一个表格，其中每行都有一个“+”按钮，以便出现一个迷你表格。迷你表保存来自超慢数据库的数据，因此我通过 ajax 请求获取数据。我的问题根源于某种情况。假设您按下一个加号按钮引发 AJAX 请求，并且在等待期间按下另一个加号按钮。第二个 ajax 请求导致第一个请求永远不会返回。换句话说，最新的请求将覆盖所有先前的待处理请求。知道为什么会发生这种情况吗？我觉得这可能就是当您不使用 jQuery 处理 AJAX 时发生的情况，但我不确定，而且我找不到任何说明情况的内容。我在下面附加我的代码。如有任何帮助，我们将不胜感激!

function fetchSINamesForVariantAJAX(latestBuild, variantToExpand){
if (latestBuild ==  "") {
    //document.getElementById(subTableId).innerHTML = ""; 
    return;
} 
else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            spinner.stop();
            var variantRow = variantToExpand + "Row";
            if (document.getElementById(variantRow).rows.length == 1){
                var json = JSON.parse(xmlhttp.responseText);
                var SINames = json['SIs'];
                var locations = json['locations'];
                var SIBuilds = json['SIBuilds'];
                for (var i = 0; i < SINames.length ; i++){
                    var row = document.getElementById(variantRow).insertRow(-1);
                    var cell = row.insertCell(-1);
                    var SILinkURL = "exampleWebsite.com/name.php?names=" + SINames[i];
                    cell.innerHTML = "<a href=\"" + SILinkURL + "\">" + SINames[i] + "</a>";

                    cell = row.insertCell(-1);
                    var fullLocation = locations[i] + "\\" + SIBuilds[i];
                    cell.innerHTML = "<a href=\"" + fullLocation + "\">" + fullLocation + "</a>";

                    cell = row.insertCell(-1);
                    cell.innerHTML = "";
                }
            }
        }
    }
    //create the GET message to be sent using AJAX window
    var stateToSend = "SITableGeneratorFromVariant.php?";
    stateToSend += "latestBuild=" + latestBuild;    
    xmlhttp.open("GET", stateToSend, true);
    xmlhttp.send();
}

}

Answer 1

我认为原因是每次新的 AJAX 调用完成时都会用新的变量覆盖 xmlhttp 变量，请尝试在函数内声明它:

if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        var xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }