Множественные ajax-запросы без конфликтов запросов и ответов

Question

У меня постоянно возникает проблема с несколькими ajax-запросами, которые я, как правило, отправляю для получения данных для обновления различных компонентов веб-страницы.Я всегда использую свои пользовательские функции AJAX (см. Ниже) для выполнения вызовов AJAX.И я считаю, что запросы иногда сталкиваются.Я также проверяю, чтобы запросы отправлялись с интервалом в две секунды, надеясь, что они сериализуют способ отправки запросов.Тем не менее я нахожу, что это иногда сталкивается.Что я делаю неправильно?Или, скорее, какие изменения я могу внести в свои функции, чтобы они работали без проблем, в любое время?

Функции:

function get_xmlhttp_obj()
{
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) 
        {
            try
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert(invalidbrowser);
            }
        }
    }
    return xmlHttp;
}

function passUrl(url1)
{    
    url1 = url1+"&sid="+Math.random();
    xmlHttp=get_xmlhttp_obj();
    xmlHttp.onreadystatechange = function() { stateChanged(xmlHttp); }; 
    xmlHttp.open("GET", url1, true);
    xmlHttp.send(null); 
}


function passposturl(url1,params)
{
    xmlHttp=get_xmlhttp_obj();
    xmlHttp.open("POST", url1, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.onreadystatechange =  function() { stateChanged(xmlHttp); };        
    xml Http.send(params);  
}

function stateChanged(xmlHttp) 
{
    if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3 || xmlHttp.readyState == 0) 
    {
         // Wait state. I load loading text or image here
    }
    else if(xmlHttp.readyState == 4)
    {
         // catch the response and display in the specific container.
         if(loadflag=="global_live_xjournal_feed")
         {
           document.getElementById("global_live_xjournal_feed").innerHTML=xmlHttp.responseText;
           setTimeout("call_refresh_global_xjournal_feed", 5000);
         }
    }
} 


function call_refresh_global_xjournal_feed(obj)
{
    if(obj=="global_xjournal_feed")
    {
         var url = "ajax_activity_feed.php?id="+obj;
         passUrl(url);
         loadflag="global_live_xjournal_feed";
}
}

Answer 1

Как у вас есть код, каждый запрос использует другой объект xmlHttp.Столкновения не происходит, поскольку каждый объект будет иметь свое собственное отдельное состояние.При обработке результатов вы просто не должны принимать какое-либо глобальное состояние.Пока все, что вы смотрите, это состояние в конкретном объекте xmlHttp, который был вызван для того, чтобы знать, что делать, у вас все должно быть в порядке.Если оба запроса заканчиваются в один и тот же момент, один попадает в очередь JS раньше другого, он выполняет свою функцию изменения состояния до завершения, а затем второй получает уведомление об изменении состояния.для этого обычно нет нужды распространять их, если только вам не нужны результаты первого, прежде чем запустить второе.Фактически, вы получите лучшую сквозную производительность, если сразу начнете оба запроса, а затем просто дождитесь их завершения.В зависимости от того, что завершится первым, вы получите обратный вызов с изменением состояния, а затем - второй.

К сведениюк какому объекту xmlHttp относится, при интерпретации выходных данных, поскольку различные этапы их выполнения могут чередоваться.

Answer 2

Если вы хотите убедиться, что ваши асинхронные вызовы выполняются последовательным образом, вы всегда можете использовать рекурсивный асинхронный вызов, который имеет setTimeout () в обратном вызове. Так, например:

function DoSomething() {
   $.get('/ajax/call', function() {
      //do whatever
      setTimeout(DoSomething, 2000);
   }
}

В этом примере я использую пример jQuery, но вы можете легко переключить свою функцию с помощью $ .get ().

Таким образом, вы никогда не начнете другой асинхронный вызов, пока не завершится первый. Это может быть немного дольше, чем 2 секунды, но все будет работать последовательно.

Answer 3

Моя библиотека AJAX поможет с этим двумя возможными способами:

1) Библиотека позволяет «упаковывать» несколько вызовов в один запрос, так что обработчик вызывается только при ВСЕХ вызовахзавершены.

2) Другое - создать пул запросов с одним вызывающим абонентом (объект HTTP).Обычно в пулах может быть несколько вызывающих абонентов (допускается несколько одновременных запросов), но ограничение этого количества одним вызывающим вызовет принудительное выполнение любых запросов, помещенных в очередь в этот пул.

Я считаю библиотеку очень полезнойработу, это можно найти здесь:

http://depressedpress.com/javascript-extensions/dp_ajax/

Надеюсь, это поможет.