Замість цього, контент з бази буде довантажувати автоматично завдяки Ajax-запитам як тільки користувач промотає сторінку вниз.
Крім цього, динамічне підвантаження контенту через Ajax-запити дозволяє не перезавантажувати сторінку цілком, що економить обчислювальні ресурси сервера.
У нашому прикладі буде реалізований підхід, при якому на сторінці спочатку буде виводитися 10 записів з бази даних. Далі, при прокручуванні сторінки вниз йде автоматична фонова подгрузка ще 10 записів і т.д. поки не закінчаться матеріали в базі.
На самому початку уроку ви побачите демонстрацію результату і після цього зможете подивитися докладне пояснення того, як все це працює.
1. Для початку створюємо новий хост для роботи над прикладом. У моєму випадку він має ім'я prokrutka. У ньому розміщуємо всі файли прикладу з доп. матеріалів.
2. Потім експортуйте дамп бази даних, який додається до уроку (файл dump.sql). Він створить нову базу даних і таблицю з даними, які використовуються в прикладі.
3. Тепер давайте подивимося на код файлу index.php.
Файл index.php є основним файлом, до якого ми виробляємо звернення. У ньому ми підключаємося до бази даних, використовуючи файл db.php та інструкцію include.
Потім звертаємося до бази і формуємо масив з 10 статей, які будуть спочатку відображатися на сторінці, після чого вже пишемо саму HTML-розмітку.
4. Розглянемо тепер файл db.php.
Як бачите, тут немає нічого незвичайного. Ми просто задаємо даних для підключення до бази: хост, ім'я бази, логін і пароль.
Після цього виробляємо підключення і вказуємо кодування, в якій буде отримана інформація з бази - UTF-8.
5. Тепер черга файл-обрабочіка - obrabotchik.php.
У цьому файлі ми будемо виробляти необхідні дії, прийнявши дані, відправлені за допомогою Ajax-запиту.
Насамперед підключаємося до бази даних і задаємо змінну startFrom. визначальну, з якої статті буде проводитися висновок.
Отримуємо ми цю інформацію з масиву POST, в який вона потрапить завдяки Ajax-замовлення. Значення цієї змінної буде змінюватися, і ми використовуємо його для завдання обмеження LIMIT при формуванні запиту на вибірку.
І, нарешті, для того, щоб передати цей масив через Ajax-запит, ми перетворимо його в json-рядок.
6. Тепер переходимо до основного функціоналу і файлу scripts.js.
Чекаємо закінчення завантаження документа і створюємо змінну-прапор inProgress для відстеження того, чи відбувається в даний момент ajax-запит. Спочатку даємо їй значення false, тобто запит не в процесі виконання.
Наступним кроком вказуємо, з якої статті треба робити вибірку з бази при ajax-запиті (змінна startFrom).
Після цього працюємо з логікою скрипта. За подією прокрутки вікна, ми перевіряємо, чи досягла людина нижній частині екрана.
Якщо так, то ми запускаємо Ajax-запит, передавши йому всі необхідні дані (включаючи значення змінної startFrom).
Зверніть увагу, що до початку виконання запиту ми міняємо значення для змінної прапора з false на true. а після закінчення - назад: з true на false.
Цей прийом дозволяє нам уникнути створення множинних Ajax-запитів користувачем, якщо він буде активно прокручувати сторінку вгору і вниз в нижній частині вікна.
Після закінчення цього ми збільшуємо на 10 порядковий номер статті, з якої треба починати вибірку з бази при наступному Ajax-запиті.
З повагою, Дмитро Науменко.