AJAX 函数请求在再次调用时停止先前的加载 - 否 jQuery 请

Question

我得到了这个函数来将 url 加载到一个元素中。问题是，如果我重复调用它，比如在循环中加载多个元素，当前加载就会停止：

function ajaxGetData(url, objId)
{
    var request;
    if (window.XMLHttpRequest) 
    { 
        request = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) 
    { 
        try 
        {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        } 
        catch (e) 
        {
        try {
            request = new ActiveXObject('Microsoft.XMLHTTP');
        } 
        catch (e) {}
        }
    }

    if (!document.getElementById(objId))
    {
        return false;
    }
    var obj = document.getElementById(objId); /* <= fix: added var */
    ajaxLoadingIndicator(obj);

    request.addEventListener("progress", function(event){ajaxCallBack(event, obj)}, false);
    request.addEventListener("load", function(event){ajaxCallBack(event, obj)}, false);
    request.addEventListener("error", function(event){ajaxCallBack(event, obj)}, false);
    request.addEventListener("abort", function(event){ajaxCallBack(event, obj)}, false);

    request.onreadystatechange = function() 
    {
        if(request.readyState === 4) 
        { 
            if(request.status === 200) 
            { 
                obj.innerHTML  = request.responseText;
            }
            else
            {
                obj.innerHTML = '<div id="'+id+'">Error loading data.</div>';
            }
        }
    };
    request.open('GET', url, true);
    request.send(null);
}

function ajaxLoadingIndicator(obj)
{
    idBase = obj.id.split("_");
    id = idBase[0]+"_ajax_loading";
    obj.innerHTML = '<div id="'+id+'">Loading</div>';
}

function ajaxCallBack(e) 
{
    // Handle each event
    switch(e.type)
    {
        case 'error':
        {
            idBase = obj.id.split("_");
            id = idBase[0]+"_ajax_error";
            obj.innerHTML = '<div id="'+id+'">Server unavailable. Error loading data.</div>';
        } break;
    }
}

所以如果我这样做：

ajaxGetData(url1, objId1);
ajaxGetData(url2, objId2);
ajaxGetData(url3, objId3);

只有 objId3 获取其内容，其余的都卡在 "loading" 指示器中。

Answer 1

您的代码中有一个全局变量 obj。

// function ajaxGetData(url, objId)
obj = document.getElementById(objId);
ajaxLoadingIndicator(obj);

您的所有请求都共享同一个变量，因此看起来只有最后一个请求正在完成。您可以在声明中使用 var 关键字来修复它。

AJAX 函数请求在再次调用时停止先前的加载 - 否 jQuery 请

AJAX function request stops previous load when called again - no jQuery please

html

javascript

ajax

load