Ajax-подгрузка контента при прокрутке страницы
|
|
Размер: 48,4 Мб. Длительность: 26 мин. 40 сек. |
В этом видео мы рассмотрим очень полезный прием, который позволит вам обойтись без привычной постраничной навигации.
Вместо этого, контент из базы будет подгружаться автоматически благодаря Ajax-запросам как только пользователь промотает страницу вниз.
Такой подход активно используется в социальных сетях (например, ВКонтакте) и на ряде других сайтов для того, чтобы отображать новые записи, комментарии и т.д.
Это позволяет посетителям сайта быстрее получить доступ к нужному содержимому без необходимости кликать по ссылкам постраничной навигации.
Кроме этого, динамическая подгрузка контента через Ajax-запросы позволяет не перезагружать страницу целиком, что экономит вычислительные ресурсы сервера.
В нашем примере будет реализован подход, при котором на странице изначально будет выводиться 10 записей из базы данных. Далее, при прокрутке страницы вниз идет автоматическая фоновая подгрузка еще 10 записей и т.д., пока не закончатся материалы в базе.
В самом начале урока вы увидите демонстрацию результата и после этого сможете посмотреть подробное объяснение того, как все это работает.
Краткий обзор урока (все подробности смотрите в видео):
1. Для начала создаем новый хост для работы над примером. В моем случае он имеет имя prokrutka. В нем размещаем все файлы примера из доп. материалов.
2. Далее экспортируйте дамп базы данных, который приложен к уроку (файл dump.sql). Он создаст новую базу данных и таблицу с данными, которые используются в примере.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
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 с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
