
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
*Наведите курсор мыши для приостановки прокрутки.
Ajax-подгрузка контента при прокрутке страницы
![]() |
Размер: 48,4 Мб. Длительность: 26 мин. 40 сек. |
В этом видео мы рассмотрим очень полезный прием, который позволит вам обойтись без привычной постраничной навигации.
Вместо этого, контент из базы будет подгружаться автоматически благодаря Ajax-запросам как только пользователь промотает страницу вниз.
Такой подход активно используется в социальных сетях (например, ВКонтакте) и на ряде других сайтов для того, чтобы отображать новые записи, комментарии и т.д.
Это позволяет посетителям сайта быстрее получить доступ к нужному содержимому без необходимости кликать по ссылкам постраничной навигации.
Кроме этого, динамическая подгрузка контента через Ajax-запросы позволяет не перезагружать страницу целиком, что экономит вычислительные ресурсы сервера.
В нашем примере будет реализован подход, при котором на странице изначально будет выводиться 10 записей из базы данных. Далее, при прокрутке страницы вниз идет автоматическая фоновая подгрузка еще 10 записей и т.д., пока не закончатся материалы в базе.
В самом начале урока вы увидите демонстрацию результата и после этого сможете посмотреть подробное объяснение того, как все это работает.
Краткий обзор урока (все подробности смотрите в видео):
1. Для начала создаем новый хост для работы над примером. В моем случае он имеет имя prokrutka. В нем размещаем все файлы примера из доп. материалов.
2. Далее экспортируйте дамп базы данных, который приложен к уроку (файл dump.sql). Он создаст новую базу данных и таблицу с данными, которые используются в примере.
3. Теперь давайте посмотрим на код файла index.php:
<?php include 'inc/db.php'; // Получаем первые 10 статей, которые будут видны изначально $res = mysqli_query($db, "SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT 10"); // Формируем массив из 10 статей $articles = array(); while($row = mysqli_fetch_assoc($res)) { $articles[] = $row; } ?> <!DOCTYPE HTML> <html> <head> <meta charset = "utf-8" /> <title>Все статьи</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/scripts.js"></script> </head> <body> <div style="width: 200px;" id="articles"> <?php foreach ($articles as $article): ?> <p><b><?php echo $article['title']; ?></b><br /> <?php echo $article['text']; ?></p> <?php endforeach; ?> </div> <button id="more">Дальше</button> </body> </html>
Файл index.php является основным файлом, к которому мы производим обращение. В нем мы подключаемся к базе данных, используя файл db.php и инструкцию include.
Затем обращаемся к базе и формируем массив из 10 статей, которые будут изначально отображаться на странице, после чего уже пишем саму HTML-разметку.
В тэге head подключаем два JavaScript-файла - библиотеку jQuery (для совершения Ajax-запроса) и файл scripts.js, в котором мы и напишем сам запрос и другой необходимый для работы JavaScript-код.
В тэге body мы выводим блок div с идентификатором articles. В нем формируем цикл для вывода статей, а под блоком размещаем кнопку "Дальше", которая нам пригодится чуть позже (подробно об этом рассказано в видео).
4. Рассмотрим теперь файл db.php:
<?php // Хост (обычно localhost) $db_host = "localhost"; // Имя базы данных $db_name = "maindb2"; // Логин для подключения к базе данных $db_user = "root"; // Пароль для подключения к базе данных $db_pass = ""; //Подключаемся к базе $db = mysqli_connect ($db_host, $db_user, "", $db_name) or die ("Невозможно подключиться к БД"); // Указываем кодировку, в которой будет получена информация из базы mysqli_query ($db, 'set character_set_results = "utf8"');
Как видите, здесь нет ничего необычного. Мы просто задаем данных для подключения к базе: хост, имя базы, логин и пароль.
После этого производим подключение и указываем кодировку, в которой будет получена информация из базы - UTF-8.
5. Теперь очередь файл-обрабочика - obrabotchik.php:
<?php include 'inc/db.php'; // C какой статьи будет осуществляться вывод $startFrom = $_POST['startFrom']; // Получаем 10 статей, начиная с последней отображенной $res = mysqli_query($db, "SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT {$startFrom}, 10"); // Формируем массив со статьями $articles = array(); while ($row = mysqli_fetch_assoc($res)) { $articles[] = $row; } // Превращаем массив статей в json-строку для передачи через Ajax-запрос echo json_encode($articles);
В этом файле мы будем производить необходимые действия, приняв данные, отправленные с помощью Ajax-запроса.
Первым делом подключаемся к базе данных и задаем переменную startFrom, определяющую, с какой статьи будет производиться вывод.
Получаем мы эту информацию из массива POST, в который она попадет благодаря Ajax-запросу. Значение этой переменной будет меняться, и мы используем его для задания ограничения LIMIT при формировании запроса на выборку.
Далее мы формируем массив с 10 статьями, который будет отдаваться в ответ на Ajax-запрос.
И, наконец, для того, чтобы передать данный массив через Ajax-запрос, мы преобразуем его в json-строку.
6. Теперь переходим к основному функционалу и файлу scripts.js:
$(document).ready(function(){ /* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */ var inProgress = false; /* С какой статьи надо делать выборку из базы при ajax-запросе */ var startFrom = 10; /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */ $(window).scroll(function() { /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */ if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) { $.ajax({ /* адрес файла-обработчика запроса */ url: 'obrabotchik.php', /* метод отправки данных */ method: 'POST', /* данные, которые мы передаем в файл-обработчик */ data: {"startFrom" : startFrom}, /* что нужно сделать до отправки запрса */ beforeSend: function() { /* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */ inProgress = true;} /* что нужно сделать по факту выполнения запроса */ }).done(function(data){ /* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */ data = jQuery.parseJSON(data); /* Если массив не пуст (т.е. статьи там есть) */ if (data.length > 0) { /* Делаем проход по каждому результату, оказвашемуся в массиве, где в index попадает индекс текущего элемента массива, а в data - сама статья */ $.each(data, function(index, data){ /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */ $("#articles").append("<p><b>" + data.title + "</b><br />" + data.text + "</p>"); }); /* По факту окончания запроса снова меняем значение флага на false */ inProgress = false; // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы startFrom += 10; }}); } }); });
Дожидаемся окончания загрузки документа и создаем переменную-флаг inProgress для отслеживания того, происходит ли в данный момент ajax-запрос. Изначально даем ей значение false, т.е. запрос не в процессе выполнения.
Следующим шагом указываем, с какой статьи надо делать выборку из базы при ajax-запросе (переменная startFrom).
После этого работаем с логикой скрипта. По событию прокрутки окна, мы проверяем, достиг ли человек нижней части экрана.
Если да, то мы запускаем Ajax-запрос, передав ему все необходимые данные (включая значение переменной startFrom).
Обратите внимание, что до начала выполнения запроса мы меняем значение для переменной флага с false на true, а после окончания - обратно: с true на false.
Этот прием позволяет нам избежать создания множественных Ajax-запросов пользователем, если он будет активно прокручивать страницу вверх и вниз в нижней части окна.
По окончании запроса мы преобразуем результат, пришедший от обработчика, т.е. json-строку обратно в объект (по сути - массив) для того, чтобы работать с ним средствами JavaScript.
После этого нам остается только отобрать в jQuery-набор наш блок со статьями по идентификатору articles и добавить в него 10 новых статей, запрошенных из базы.
По окончании этого мы увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы при следующем Ajax-запросе.
Вот в общем-то и все. Общую схему работы вместе с кодом я привел выше, однако если этот обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
С уважением, Дмитрий Науменко.
P.S. Неплохо? Тогда присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также: