并发 AJAX 请求不起作用。最新的请求覆盖之前的请求答案

【问题标题】：Concurrent AJAX requests not working. Newest request overwrites previous request并发 AJAX 请求不起作用。最新的请求覆盖之前的请求
【发布时间】：2015-07-01 01:10:09
【问题描述】：

我的网页有一个表格，其中每一行都有一个“+”按钮，以便显示一个迷你表格。迷你表包含来自超慢数据库的数据，因此我通过 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();
}

}

【问题讨论】：

您能否更具体地说明您所看到的行为？ AJAX 请求不会“取消”另一个请求。在浏览器的调试工具中，这两个请求会发生什么？服务器的响应是什么？当你调试这段代码时，当每一个返回并调用onreadystatechange时会发生什么？
我认为这是因为您的 var xmlhttp 请求不在函数范围内，因此每次调用该函数 xmlhttp 请求都是一个全局变量，并且您正在覆盖它。尝试在函数顶部声明 var xmlhttp
我听取了您的建议并调查了调试。我注意到我从未将 xmlhttp 声明为 var，所以我添加了“var xmlhttp;”行在函数的最顶部，这解决了问题。感谢您的帮助！

标签： javascript php jquery ajax web

【解决方案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");
    }

【讨论】：