Автоматическое обновление сайта с помощью jQuery

Я иногда обожаю быдлокодить на jQuery. Зачем пилить какие-то классы, компоненты и прочие сложные вещи, если 5-ю строчками кода можно сделать сайт полностью асинхронным. Как? Очень просто!

На самом деле, jQuery отличная библиотека. Больше всего у меня горит, когда люди начинают хейтить её или тех, кто ею пользуется. Чаще всего, это уникальные люди с 47-й хромосомой.

Я работаю над одним проектом в свободное время и там юзаю ReactJS с jQuery (знаю, слишком идеально). Недавно пришла задача и мне было лень её делать "по красоте", а задачу надо было сделать быстро.

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

# Обновление комментариев

Требовалось автоматически обновлять комментарии, каждые 5 сек (к чёрту сокеты). Ничего на сервера разрабатывать не надо.

Всё гениальное просто!

setInterval(() => {
    $.get("/").then(function(html) {
        // Получаем от сервера HTML код, вытаскивает оттуда нужный DOM элемент.
        var list = $(".activity-list", html); // берём из этого ответа элемент UL, со списком комментариев.
        $(".activity-list").html(list); // И уже в нашу страницу вставляем актуальный список комментариев (заменяем DOM-элемент)
    });
}, 5000); // каждые 5 секунд

# Подгрузка новостей без перезагрузки

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

Всё гениальное просто!

$(document).ready(function() {
  var page = 1; // первая страница

  // Вешаем событие клика на кнопку "Показать ещё"
  $('#loadMoreButton').click(function() {
    page++; // Каждый раз увеличиваем счётчик номера страницы
    $.get("/news?page=" + page).then(function(html) {
      var list = $(".posts", html);
      $(".posts").html(list);
    }).catch(function() { // Если сервер выдал 404 или другую HTTP-ошибку, то скрываем кнопку "Показать ещё"
      $('#loadMoreButton').hide();
    });
  });

});

Таким образом, вы можете отправлять на любой адрес своего сайта GET-запрос и вытаскивать нужные вам данные.

P.S.: Если у вас начался бугурт, то охладите трахание. Этот пример показывает, как получать в асинхронном режиме актуальные данные со своего сайта без разработки API.