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得到它的内容，其余的被卡在＆＃34; loading＆＃34;指示器。

Answer 1

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

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

您的所有请求都在共享相同的变量，这就是为什么只有最后一个请求才会完成的原因。您可以使用声明中的var关键字对其进行修复。

再次调用时，AJAX函数请求会停止以前的加载 - 请不要使用jQuery

1 个答案: