Автообновление без перезагрузки страницы на Аяксе

Тема в разделе "JavaScript", создана пользователем AGENT131313, 25 апр 2013.

Модераторы: ZiX
  1. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    282
    Симпатии:
    28
    Доброго времени суток. Интерисует такой вопрос, есть страница на тей идет несколько таблиц <table> подскажите, как сделать автообновление через определенное время одного из table без перезагрузки страницы.
    Обычное автообновление я знаю как сделать, а как совместить чтобы без перезагрузки страницы, чтобы просто подгружало?

    И будет ли сильно грузить, если допустим сделать каждые 5 секунд?
     
  2. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    o_O
    Вообще плохо понял о чём вопрос.:oops:
    Но смысл реализации подобного больше возложен на сервер, чем на JavaScript. Всё что тут от скрипта требуется так это по заданному интервалу (тыц) проверять сервер на обновления. В случае изменения данных таблицы - менять её. Способ реализации для минимальной загрузки сервера примерно следующий:
    Каждые N секунд скрипт запрашивает минимальный JSON примерно следующим образом:
    Отдаёт сессию на сервер, а сервер проверяет по своему кешу обновились ли данные в этой таблице. Если нет, то выдаёт {"changed": "false"}, ну а если изменялись то разумеется {"changed": "true"} + саму таблицу(полностью новую)+ новую сессию, а скрипт уже по новым данным обновляет таблицу.
     
    AGENT131313 нравится это.
  3. nethare

    nethare Постоялец

    Регистр.:
    27 окт 2012
    Сообщения:
    104
    Симпатии:
    30
    1. Пишете файл с логикой, скажем table_update1.php. В нем вы каким-то нужным Вам образом формируете таблицу. Отдаете ее обычным выводом, то есть echo().

    /* Я не учитываю тут особенности движка на Вашем сайте. Возможно у вас каким-то хитрым образом работает вывод или файл должен называться как-то особенно */

    2. Таблицу засуньте в контейнер, скажем вот так.
    HTML:
    <div id='div_table1'>
      <table>...</table>
    </div>.
    3. Далее предположим, что у вас подключена jQuery.

    4. Собственно скрипт:

    Код:
    $(document).ready(function(){
    window.setInterval(function(){
      $('div#div_table1').load('http://mysite.com/table_update1.php');
    }, 5000);
    })
    $.load() я использовал, потому что так писать меньше, и работает:) Если вам нравится, используйте полный $.ajax() с обработкой событий начала/конца или удачи/неудачи загрузки.

    Грузить - в зависимости от того, что за таблица у вас, как долго она формируется, и.т.п. Браузер не будет сильно нагружен.

    UPD:
    Так будет совсем правильная архитектура. Пока писал свое, не видел, что написали Вы:(
     
    AGENT131313 нравится это.
  4. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    282
    Симпатии:
    28
    У меня не идет запрос к БД, все на файлах

    Суть вопроса в том, что нужно перезагружать блок без перезагружки страницы кажые допустим 5 секунд
     
  5. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Ну у вас хоть php иль что-нить подобное есть на сервере? Файлы большие? Какой у них вообще формат? Сколько посетителей на сайте? Нужна жёсткая оптимизация или нет? С мобильников люди заходят на сайт?
     
  6. OctoRostov

    OctoRostov Писатель

    Регистр.:
    17 мар 2013
    Сообщения:
    9
    Симпатии:
    0
    Куда же Вы без базы?))
    Я обычно на jquery post использую:
    Код:
            $.post(
      "/ajax/event-information.php",
      {
        id: me.octoID
      },
      onAjaxSuccess
    );
     
    function onAjaxSuccess(data)
    {
      // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
      eventInfo.innerHTML=data;
    }
    В event-information.php принимаете постом id а с помощью echo и всего html делаете ответ. Если таблиц несколько разных нужно проверять, то рассинхроньте таймеры для них, что б не все сразу обновлялись.
     
  7. a33

    a33

    Регистр.:
    8 сен 2006
    Сообщения:
    219
    Симпатии:
    54
    без базы есть решение

    Код:
     <script type="text/javascript">
                        /* <![CDATA[ */
                       
                            function showAdditional()
                            {
                                  $("#additional").load('add.html?t=' + new Date().getTime());
                            }
                       
                          $(document).ready(function(){
                              showAdditional();
                                  window.setInterval("showAdditional();", 30000);
                          })
                        /* ]]> */
                        </script>
    
    Каждые 30 секунд
    Ну там соответственно нужно jQuery подключить и <div id="additional"></div> создать для этого кода
    Только штука опасная, мы сначала сделали на 5 сек интервал, и в первый день повесили сервер с 16Гб ОЗУ.
     
  8. nethare

    nethare Постоялец

    Регистр.:
    27 окт 2012
    Сообщения:
    104
    Симпатии:
    30
    1. А что у ТС будет, простите вот тут: "add.html"? SSI сценарий? Пусть конкретнее обозначит, откуда у него данные обновляются и что там за данные.

    2. Кстати да. У вас, очевидно, неплохое количество посещений было на ресурсе. Да и запросы не из самых легких, видимо.
     
  9. a33

    a33

    Регистр.:
    8 сен 2006
    Сообщения:
    219
    Симпатии:
    54
    add.html - там внутри мы просто пишем любой html код, который должны увидеть пользователи.
    На странице одновременно сидели 100-300 человек.
     
  10. nethare

    nethare Постоялец

    Регистр.:
    27 окт 2012
    Сообщения:
    104
    Симпатии:
    30
    Я примерно понял Вашу идею. А зачем тогда время передавать параметром?

    Осталось только выяснить, какие данные все-таки нужно обновлять ТСу.