Динамическое обновление контента (без перезагрузки страницы Ajax jQuery)

Потребовалось постоянное обновление одного блока страницы, без перезагрузки самой страницы, на мой взгляд лучшее решение это использовать AJAX. Вот как я сделал обновляющий блок:
В шапку сайта подключил jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Строчкой ниже написал небольшой JS:
<script type="text/javascript">
function mode() {
    $.ajax({
        url: 'mode.php',
        success: function(data) {
            $('#display').html(data);
        }
    });
};

setInterval(mode, 10000);
</script>

В шаблоне странице, там, где мне нужен самообновляющийся блок добавляю DIV:
<div id="display"></div>

Вот и все, теперь блок работает, как и было задумано!

Что же за строки кода я такие тут нагородил?
Думаю,что про подключенный файл jquery.min.js объяснять не стоит, тут и так понятно, но если, что, то: Как подключить библиотеку jQuery. Вот дальше я создал функцию JS mode(), которая вызывает функцию $.ajax() с набором определенных параметров. И так, первый параметр:
        url: 'mode.php',

Данный параметр обращается к файлу mode.php, в котором генерируется контент для блока. Далее:
        success: function(data) {
            $('#display').html(data);
        }

Этот параметр: success (вернее то, что в нем: $('#display').html(data);) записывает в контейнер сгенерированный контент, если конечно запрос прошел успешно. Контейнером в данном примере является display, то есть:
<div id="display"></div>

Далее строка:
setInterval(mode, 10000);

Функции setInterval() вызывает функцию mode(), каждые десять секунд (10000). Одна секунда равняется числу - 1000.

Хочу показать ещё один пример ajax запроса в функции mode() (из первого поста):
function mode() {
    $('#display').load('mode.php');
};

Здесь так же, как и в первом примере, результат выполнения сценария в файле mode.php, будет загружен в контейнер display, в блок <div>.
Тут так же можно заставить функцию mode() делать запрос через определенное время, для получения нового контента:
setInterval(mode, 10000);

На последок покажу пример, пару строк кода в файле mode.php:
<?php
echo time(); // Текущее время в секундах будет передано в блок <div id="display"></div>

Разумеется передавать можно любую строку.

Читайте еще: Ajax на чистом JavaScript.
Автор:
Максим
  Февраль 22, 2018 3:19 am:
Коротко и по-делу, спасибо автору. Но у меня вопрос: если содержимое mode.php не успело сгенерировать pезультат, то возвращается пустое значение, и значение появиться только при следующем обновлении, т.е. 10 сек информации не будет видно на сайте. Собственно я это к чему у меня примерно раз в 40 мин залипает скрипт который берет информацию с сервера, с Вашей помощью решаю проблему на раз, но мне не нужно раз в 10сек. Выставляю скажем 30мин. но...
Развернуть
Scorpion
  Февраль 22, 2018 4:50 am:
По поводу пустого значения - если значение не вернулось, значит произошла ошибка, видимо в скрипте, что лежит на сервере, быть может значение пустым по условию в скрипте. Надо смотреть Ваш код, что у Вас там.

Чтобы контент загружался сразу, выполняйте нужную Вам операцию ещё перед загрузкой страницы и вставляйте данные в динамический блок. А потом уже используйте JS для обновления содержимого. Либо сразу после загрузки страницы запускайте функцию...
Развернуть