Андрей Смирнов
Время чтения: ~8 мин.
Просмотров: 1

Динамическое обновление веб-страницы

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

В библиотеке jQuery есть очень простая и быстрая возможность это сделать. Допустим, вам необходимо взять данные из блока с id – page первой страницы и вставить их в блок с id – block на второй странице.

Html код будет примерно таким:

 

JS код таким:

$("#block").load("exemple.html #page");

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

$("#block").load("/current.html #block > *");

Селектор со знаком больше ( >) указывает на дочерний элемент, а селектор со знаком звездочки (*) указывает на все элементы. Таким образом, идет указание на все дочерние элементы блока с id – block.

Это поможет избежать того случая, когда использование такого кода:

$("#block").load("/current.html #block");

Приведет к дублированию элемента с идентификатором:

 

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

Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.

Отправка формы без перезагрузки страницы:

  • не дезориентирует пользователя ненужной перезагрузкой страницы или редиректом,
  • позволяет ему продолжить навигацию по текущей странице,
  • снижает нагрузку на сервер,
  • работает приятней и «плавнее». 

Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html. 

AJAX + PHP + JQuery

Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax. 

Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:

  • ajax-запрос — функция JavaScript, делающая асинхронную отправку введённых в форму данных к обработчику.
  • PHP-обработчик на сервере, который асинхронно обрабатывает переданные ему Ajax’ом данные. После обработки посылает скрипту ответ с результатом, Вам — заявку.
  • JQuery — библиотека для работы с JavaScript. При создании ajax-формы удобнее пользоваться ей, как и при работе с JS во многих других случаях.

Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.

Готовая схема выглядит так:

Пользователь нажатием кнопки отправляет данные

файл JS отправляет их в PHP через Ajax, функцию JQuery

обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе 

в первом случае владелец сайта также получает готовую заявку.

Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.

Инструкция по созданию формы без перезагрузки

Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ). 


Делаем простую форму (в тегах <legend>Оставить заявку</legend><label>Ваше имя:</label><label>Ваш E-mail:</label><label>Ваш телефон:</label>

Если вывод формы нужен на одной странице, просто вставляем в код . Если вывод нужен по всему сайту или на многих страницах — вышеописанный код вставляется в шаблон. 

Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки. 


Обработчик, в JS элементе выше мы уже назвали его formx.php:

  if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //проверка на асинхронность  {      if (isset($_POST["name"]) && isset($_POST["email"]) )   {       if ($_POST['name'] == '')       {          return 'Не заполнено поле Имя'; //проверяем наличие обязательных полей      }      if ($_POST['email'] == '')       {          return 'Не заполнено поле E-mail';      }   mail("email1@yandex.ru", "Заявка с сайта", "Имя:".$name.". E-mail: ".$email ,"From: email2@yandex.ru rn"); //здесь делаем отправку заявки на почту. не забудьте поменять оба адреса      return 'Заявка отправлена!'; //возвращаем сообщение пользователю      }      }    

Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html. 

Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.

Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.

Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так). 

<imlass src=»https://qform24.com/assets/image/arrow-left-green.svg» alt=»»>Нд к статьям</imlass>

Вариант 1 — дублирование

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

{   subscr_cnt: 44,   news:[     {       href: "/wiskey",       name: "Названы лучшие в мире сорта виски 2015 года"     },     {       href: "/kindergarden",       name: "В Нью-Йорке появился детский сад для взрослых"     }   ] } 

При получении такого ответа клиентская часть «оборачивает» данные в html-теги, добавляет необходимые тексты и обновляет структуру страницы. Серверу же знания об отображении нужны только для того, чтобы сгенерировать изначальную версию страницы. Плюсы подхода:

  • Малый объем трафика — передаются только необходимые данные;

Минусы подхода:

  • Требуется продублировать код — он будет и в клиентской части, и в серверной;
  • Клиентская часть должна знать, как именно поступать с каждой порцией данных от сервера — иногда нужно заменить html элемента, иногда добавить новые данные к уже существующему коду;

Вариант 2 — всемогущий сервер и «толстые» ответы

Основная идея — логику отображения знает только сервер, клиентская часть получает уже готовый html-код элементов. Здесь ответ сервера выглядит так:

{   subscr_cnt: "Подписчиков: 44",   news: "Крупнейшие на Земле метеоритные кратеры случайно нашли в Австралии</li> n Чудо-женщина ответила на критику о своей груди</li> «Ромео и Джульетту» экранизируют в духе «300 спартанцев»</li>  Названы лучшие в мире сорта виски 2015 года</li>  В Нью-Йорке появился детский сад для взрослых</li>" } 

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

  • Простота реализации;
  • Отсутствие дублирования кода;

Минусы подхода:

  • Многократная генерация одного и того же кода, особенно неэффективно при небольших изменениях;
  • Огромный объем трафика, особенно на больших страницах;

Вариант 2а — всемогущий сервер и «тонкие» ответы

Можно попытаться исправить главный недостаток предыдущего варианта. Сервер может не отправлять весь html компонента, а присылать только «дельту» — изменения, которые необходимо внести. Наш ответ тогда может стать таким:

{   subscr_cnt: {     html: "Подписчиков: 44",     mode: "replace"   },   news: {     html: "Названы лучшие в мире сорта виски 2015 года</li>  В Нью-Йорке появился детский сад для взрослых</li>",     mode: "append"   } } 

Теперь клиент определяет элемент, который будет изменять, и то, как он его будет изменять, непосредственно из ответа сервера. Плюсы подхода:

  • Отсутствие дублирования кода;

Минусы подхода:

  • Все еще достаточно большой объем сетевого трафика;
  • Клиент должен отправить серверу текущее состояние каждой компоненты, закодированное некоторым образом, чтобы сервер понял, относительно чего считать дельту;
  • Сложность вычисления и записи дельты в случае нетривиальных изменений;
  • Общее усложнение и клиентской, и серверной части;

Вариант 3 — всемогущий javascript

Можно переложить всю ответственность за генерацию html на клиента. В таком случае сервер будет только предоставлять данные, необходимые для отображения. Ответы, как и в первом варианте, будут содержать только данные:

{   subscr_cnt: 44,   news:[     {       href: "/wiskey",       name: "Названы лучшие в мире сорта виски 2015 года"     },     {       href: "/kindergarden",       name: "В Нью-Йорке появился детский сад для взрослых"     }   ] } 

Так в чем же существенное отличие от первого варианта? А заключается оно в том, что сервер не выполняет первоначальную генерацию страницы, её сборка осуществляется уже браузером клиента. Вариант этот только выглядит странным, он может пригодиться, если необходимо уменьшить нагрузку на сервер. Плюсы подхода:

  • Малый объем трафика — передаются только необходимые данные;
  • Уменьшение нагрузки на сервер;

Минусы подхода:

  • Высокая нагрузка на компьютер пользователя;
  • Возможна избыточность — часть знаний клиентской части об отображении может так и остаться невостребованной, если какие-то события не наступят;

Заключение

Каждый из рассмотренных методов имеет право на жизнь, и может быть использован в проектах разной сложности. Лично я во встреченных мною проектах чаще всего видел первый вариант, несмотря на нарушение им моего любимого принципа DRY — Don`t repeat yourself. А какие принципы вы используете при разработке динамических страниц?Используемые источники:

  • http://unetway.com/blog/ajax-obnovlenie-bloka-na-stranice/
  • https://qform24.com/blog/forma-bez-perezagruzki-ajax
  • https://habr.com/post/253805/

Рейтинг автора
5
Подборку подготовил
Максим Уваров
Наш эксперт
Написано статей
171
Ссылка на основную публикацию
Похожие публикации