多个ajax请求状态？

Question

我正在编写一个需要执行一些并行 ajax 请求的脚本。我正在使用 ajax 数组，但我想在所有请求完成时执行一些代码（使一些标签可见）。这是代码希望你能帮助我。

function Update_All(){

    var loading = document.getElementById("loading_image");
    var actualizacion_completa = document.getElementById("actualizacion_completa");
    loading.style.display = "";
    actualizacion_completa.style.display = "none";
    var i=1;
    var ajax= new Array(20);//objetoAjax();
    var limit = 1;
    var ready = 1;
    for (i=1;i<=20;i++)
    {
        var index = i-1;
        ajax[index] = objetoAjax();

        var voatencion = document.getElementById("idatencionf"+i);
        var vohoras = document.getElementById("vhorasf"+i);
        var vtarifa = document.getElementById("tarifaclientef"+i);
        var voexonerado = document.getElementById("vexoneradof"+i);
        var voaprobado = document.getElementById("vaprobadof"+i);
        var campo = document.getElementById("f"+i+"c1");

        if(typeof(campo) != 'undefined' && campo != null){
            var valor = 1;
            if(campo.innerHTML=="Si") valor = 2;
                ajax[index].open("GET","update.php?atencion="+voatencion+"&opc="+5+"&valor="+valor+"&exonerado="+voexonerado.value+"&tarifa="+vtarifa.value+"&horas="+vohoras.value);
            ajax[index].send(null);
            limit = i;
            ajax[index].onreadystatechange=function() {
                if (ajax[index].readyState==4 && ajax[index].status == 200) {
                    ready++;

                    if(ready == limit){
                        loading.style.display = "none";
                        actualizacion_completa.style.display = "";
                    }
                }
            }
        }
        else{
            break;
        }       
    }
}

问题已经准备好，永远不会达到极限。

PS：抱歉西班牙变量的名称；

Answer 1

您已经知道限制为 20，无需每次都使用 limit = i; 来增加它。

设置即可

var limit = 20;

只需在脚本的开头

。由于数组以 0 开头，您实际上可能需要为限制少设置一个值（本例中为 19）。

此外，每次完成 AJAX 请求时都添加这一行：

console.log('ready = ' + ready);

这样您就可以实际看到在哪个位置价值就绪正在停止，或者根本没有增加。

Answer 2

onreadystatechange 函数中的 index 值不会是您所期望的。

建议将当前的 onreadystatechange 替换为：

(function(ajaxItem, ready) {
    ajaxItem.onreadystatechange = function() {
      if (ajaxItem.readyState==4 && ajaxItem.status == 200) {
        ready++;

        if(ready == limit){
            loading.style.display = "none";
            actualizacion_completa.style.display = "";
        }
    }
})(ajax[index], ready);