Php динамическое обновление контента

Как правильно реализовать обновление динамических данных в RealTime?

Задача: Выводить на страницу данные из БД и обновлять их в реальном времени без перезагрузки страницы, по инициативе сервера.

Мое решение: Сейчас при загрузке страницы я делаю Ajax запрос к серверу и выдаю данные на страницу через JS. Данными является массив строк из БД. На сервер есть демон, который проводит мониторинг данных, обновляет информацию в БД и вызывает через Comet сервер JS функцию в браузере пользователя на нашей странице. Функция обращается через Ajax к контроллеру который используется при загрузке страницы и обновляет данные на странице.

Проблема: В контроллере для получения данных из БД я использую PHP, тут же находится весь HTML код, который передается Ajax`ом на страницу. Мне нужно сделать вывод информации при загрузке страницы с помощью PHP, а обновлять уже Ajax`ом, но возникает проблема дублирования HTML кода, непосредственно на самой странице и в контроллере и при любом обновление структуры HTML придется делать правку в обоих местах.

Вопрос: Как правильно реализовать мою задачу, что бы не пришлось дублировать HTML код?

Примечание: Данные на странице необходимо обновлять все сразу, потому как из-за обновления всего одной строки в БД, может измениться вся сортировка выдачи. Поэтому варианты обновления только тех элементов, которые были затронуты мне не подходит.

Проблема заключалась в моей невнимательности, решается все просто: при загрузке странице данные синхронно загружает контроллер, который используется для асинхронного обновления через Ajax. Всем спасибо и продуктивного вечера. 🙂

Источник

AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.

AJAX — инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы.

jQuery — JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру

Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.

Содержимое файла index.html.

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.

2. В теле документа создается контейнер, в который мы будем загружать контент.

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.

Рассмотрим используемые параметры функции $.ajax().

При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:

Смысл работы файла time.php — выводим текущее время на экран.

Скачать исходные файлы примера (16,6 кб):
/files/ajax_ex1.zip

Пример 2. Динамическое обновление контента по выбору пользователя

Программа, динамически загружающая контент, по выбору пользователя.

Содержимое файла index.html.

     
Какую страницу желаете открыть?
      

В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.

Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.

Событие нажатия на кнопку «Страница 1» обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку «Страница 2» обрабатывается функцией $(‘#btn2’).click().

Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

Скачать исходные файлы примера (18,4 кб):
/files/ajax_ex2.zip

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.

Содержимое файла index.html.

      Введите имя: 

 
    

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку «Отправить», выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.

$('#myForm').submit(function() < $.ajax(< type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html)< $("#content").html(html); >>); return false; >);

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username — имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:

data: "username=Vasya&age=18&sex=male"

Обратим внимание, что в конце написана строка:

Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

Содержимое файла greetings.php.

".$_REQUEST['username']."!
"; echo "В вашем имени букв: ".strlen($_REQUEST['username'])."."; ?>

Выводим на экран приветствие и подсчитываем количество символов в имени.

Скачать исходные файлы примера (16,8 кб):
/files/ajax_ex3.zip

В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:

1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.

2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.

Статьи по теме

© 2008 — 2022 :: Codething.ru
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.

Источник

PHP + ? Динамическое обновление контента

Какой сейчас самый лучший инструмент для динамического обновления?
Интервалы в AJAX это какой-то 20 век, как правильно заставить клиента ждать ответ, например, хочу выводить новую запись из БД сразу после её появления с максимальным интервалом в 5-10 секунд, какие инструменты лучше использовать?

Как сделать чтобы это не давало сильных нагрузок на сервер?

Я как человек, постоянно следящий за трендами мира веб-разработки скажу, что частенько вижу как между пхп бекендом и браузером делают WebSocket сервер на NodeJS, Express/Koa + SockJS

Читай про Single Page Application, Data Binding Frameworks\Libraries (Angular, Knockout etc.) и WebSocket

nikolnik ★★★ ( 22.07.16 12:56:34 MSK )
Последнее исправление: nikolnik 22.07.16 12:56:59 MSK (всего исправлений: 1)

Протокол WS очень мощный, но считай всю структуру надо будет переписывать, зачем все эти

нужны? чем ws под управлением js плох? интерактивности не вывозит?

серьезно? — вот это новость! .

а вебсокеты это надо понимать светлое будущее? вебсокеты это тот-же пуллинг, завернутый фантиком, и нагрузки в этом случае только возрастают на сервере.

event-drive спасет демократию

10 секунд не создадут нагрузки на сервер. Сделай флаг на сервере и проверяй его.

Юзай ws, Redis. Можно в редис подписаться на канал, либо опрашивать постоянно нужные ключи. Появившийся ключ тут же пушится в ws, у клиента срабатывает колбэк -> появляется мессага. Это не 5 — 10 секунд, это моментально. Либо с подпиской, с ней не придётся опрашивать.

Если нет желания писать свои очереди на Redis, то можно заюзать что нибудь из готового. Есть как сервисы специальные так и ПО типа RabbitMQ.

Делать постоянный опрос в мускуле лучше не стоит, лучше забудь об этом.

Когда онлайн 700 человек — создадут.

Если не хочешь обмазываться NodeJS, то ReactPHP + WebSockets.

Дану? А мне казалось, что это такие обычные сокеты, ну знаешь те самые, которые используются например в игорях?

Это в котором даже $_POST не работает?

и вот зачем тащить жабаскрипты на сервер? когда есть нормальные языки.

ну шо как маленькие. python/go

70 get в секунду к статическому флагу на nginx. Да ладно!

разве в игорях что-то особенное для веб?

Как сделать чтобы это не давало сильных нагрузок на сервер?

не трогать БД без особой необходимости, для начала

не стоит так самокритично

а что в пхп с вебсокетами не так?

проще взять rabbitmq, там есть готовый плагин для работы с вебсокетами, а обновления отсылать в момент записи в базу, впрочем, так же можно использовать пабсаб из redis, как уже было сказано.

пропустил var в недрах масштабного проекта — потерял неделю на отладку

Например тем, что из-за прототипного ООП api всех библиотек основаны на тотальных вездесущих коллбэках и замыканиях, что превращает весь код в нечитабельную лапшу, сложность и запутанность которой растет экспоненциально. Реализация модульности через создание и вызов анонимной функции, как и триллион подобных извращений. Нестрогая динамическая типизация, которая делает архитектуру неинверсируемой-асбтрагируемой (в контектсе IoC), нетестируемой (из-за невозможности создания изоляционных фреймворков), в целом абсолютно непредсказуемой при изменении отдельных частей; из динамической типизации, и, в целом самого прототипного ООП, невозможность статического анализа кода, из-за чего код на жабаскрипте невозможно ни рефакторить, ни нормально поддерживать вообще ничего. Причем нестрогость на жс доведена до такого абсурда, если хотя бы в таких языках как питон или руби, я получу иксключение хотя бы рантайме при опечатке, забывании передачи параметров и т.д, в жс не будет ровным счетом ничего, типа как оратор выше сказал про то, что можно забыть поставить var и неделю дебажить. К тому же, я еще забыл рассказать, что дебажить жс сущий ад.

nikolnik ★★★ ( 23.07.16 12:05:15 MSK )
Последнее исправление: nikolnik 23.07.16 12:08:31 MSK (всего исправлений: 1)

Да, JavaScript не для масштабных проектов, там рулить Java и .NET
Но вот если нужно сделать микросервис, какую-нибудь APIшку — то нода рулит

Источник