Опрос и цикл AJAX

Question

Мой проект в основном похож на фид Reddit, который обновляется в режиме реального времени. Я пытаюсь использовать AJAX для периодического опроса сервера с обновлениями по 15 элементам за раз.

Я написал цикл for, но это заставило браузер заблокировать (я угадываю слишком много XHR?).

Как я могу опросить каждый элемент в корте Reddit-esque без блокировки браузера? Каков наиболее эффективный способ сделать это?

Должен ли я использовать длинный опрос, если в течение более 100 клиентов работает веб-приложение? Или я должен выбрать интеллектуальный опрос (увеличение времени ожидания между запросами, если нет данных)?

Спасибо! Я все еще новичок в AJAX!

for (var i=0; i < id_array_len; i++) { 
     // Grab current reply count 

     var reply = $("#repl"+item_id).html(); 
     var url= *php function here* 

     var ajaxRequest; 

     try{ 
      // Opera 8.0+, Firefox, Safari 
      ajaxRequest = new XMLHttpRequest(); 
     } catch (e){ 
      // Internet Explorer Browsers 
      try{ 
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
       try{ 
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e){ 
        // Something went wrong 
        alert("Your browser does not support AJAX!"); 
        return false; 
       } 
      } 
     } 

     ajaxRequest.onreadystatechange = function(){ 
      if (ajaxRequest.readystate == 4){ 
       live_feed_data_tot = ajaxRequest.responseText; 

       if (live_feed_data_tot.trim() == "no change" || live_feed_data_tot.trim() == "no meme" || live_feed_data_tot.trim() == "no response"){ 

        console.log("(no update)"); 

       } else { 

        var live_feed_data = live_feed_data_tot.split(','); 
        if (live_feed_data[1] == 'reply') { 
         // Reply count has changed 
         new_reply = live_feed_data[0].trim(); 

         // Update actual number 
         $("#repl"+item_id).html(new_reply); 

        } 
       } 
      } 
     } 

     ajaxRequest.open('POST', url, true); 
     ajaxRequest.send(); 

Answer 1

Использовать longpolling с длинным (подходящим для вашего приложения, конечно) таймаутом. Конечно, ваш вызов должен быть асинхронным. Пока нет данных для доставки, сервер вернет ответ, пока не будет достигнут тайм-аут. Как только клиент получит ответ, запустите следующий длинный палец в своем complete() -Block. Таким образом, вы можете свести к минимуму количество запросов.

EDIT: после просмотра кода я вижу, что вы используете собственный аякс, но используете jQuery для выбора. Я предлагаю вам использовать jQuery для ваших аякс-запросов (jQuery .ajax() Doku).

Ваш код должен выглядеть следующим образом:

function doAjaxLongpollingCall(){ 

    $.ajax({ 
    url: "...", 
    timeout: <prettylong>, 
    success: function(){ 
     //process your data 
    }, 
    complete: function(){ 
     doAjaxLongpollingCall(); 
    } 
    }); 
} 

Answer 2

Если вы делаете много пользователей, переключитесь на socket.io и избавить себя от хлопот. Он использует websockets (который использует механизм push) и выполняет резервное копирование на другие механизмы, такие как flash-сокеты или длительный опрос, если они недоступны в браузере. Однако вы должны создать эту часть своего приложения в node.js.