Бесконечный скроллинг на JavaScript + PHP

Сегодня затронем тему бесконечного скроллинга. Как реализовать подгрузку записей или другой информации по мере скроллинга. Работает это так - пользователь листает методом скролла записи, и когда доходит до самого низа, новые записи грузятся автоматически или при нажатии одной кнопки.
Данный скрипт мы будем писать на языке JavaScript с использованием библиотеки jQuery, и конечно же за отдачу данных будет отвечать скрипт на PHP. Зачем это нужно, спросите вы? Это удобно, когда информации очень много и количество страниц зашкаливает, по примеру новостей в ВК.
Для начала подключим библиотеку jQuery, если она не подключена:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Далее создадим файл database.php, в котором будем подключаться к базе данных:

$database = mysql_connect ("хост_БД", "имя_пользователя_БД", "пароль_к_БД");
mysql_select_db ("имя_БД", $database);

Затем выведем 10 записей из базы:

<?php
// Подключимся к базе данных
include "database.php";

// Получим первые 10 записей
$result = mysql_query("SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT 10", $database);

// Создадим массив 
$articles = array();
while($row = mysql_fetch_assoc($result))
{
    $articles[] = $row;
}

// Покажем записи
echo "<table id="articles">";
     foreach ($articles as $article):
	 echo "<tr>
            <td>".$article['title']."</td>
            <td>".$article['text']."</td>
          </tr>";
    endforeach;
echo "</table>";
?>
<!-- Кнопку нужно оставить в том случаи, если вы выбрали метод подгрузки нажатием. Если в скрипте ничего менять не будете - то удалите данную кнопку и данные будут подгружаться автоматически. -->
<button id="more">Ещё</button>

Далее создадим скрипт-обработчик, и назовем его articles.php:

<?php
// Подключимся к базе данных
include "database.php";

// Укажем, с какой страницы следует подгружать записи
$startFrom = $_POST['start'];

// Получаем 10 записей, начиная с последней отображенной
$result = mysql_query("SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT {$start}, 10", $database);

// Создадим массив записей, начиная с последней отображенной
$articles = array();
while ($row = mysql_fetch_assoc($result))
{
    $articles[] = $row;
}

// Превращаем массив записей в json-строку для передачи через Ajax-запрос
echo json_encode($articles);
?>

С php частью мы закончили. Остался сам скрипт, который будет запрашивать записи:

$(document).ready(function(){
/* Отслеживаем, происходит ли в данный момент ajax-запрос. В начале дадим ей значение false */
var inProgress = false;
/* С какой записи будем грузить остальные записи */
var start = 10;

    /* Используйте вариант $('#more').click(function() для того, чтобы задействовать кнопку "Ещё". */
	/* С данным вариантом данные будут грузиться автоматически */
    $(window).scroll(function() {

        /* Если высота прокрутки + высота окна больше или равны высоте всей страницы и нет выполняемого ajax-запроса - то запускаем подгрузку */
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {

        $.ajax({
            /* URL нашего скрипта-обработчика */
            url: 'articles.php',
            /* Метод отправки данных, поддерживаются GET и POST */
            method: 'POST',
            /* Передаваемые данные */
            data: {"start" : start},
            /* Функция, которая выполняется до отправки */
            beforeSend: function() {
            /* Показываем, что на данный момент выполняется ajax-запрос */
            inProgress = true;}
            /* Функция, которая выполняется по факту запроса */
            }).done(function(data){

            /* Преобразуем полученный json обратно в массив */
            data = jQuery.parseJSON(data);

            /* Если массив не пустой */
            if (data.length > 0) {

            $.each(data, function(index, data){

            /* Находим блок с записями и дозаполняем его */
            $("#articles").append("<tr><td>" + data.title + "</td><td>" + data.text + "</td></tr>");
            });

            /* После успешной обработки меняем обратно на false */
            inProgress = false;
            // При каждом запросе увеличиваем значение на 10, чтобы каждый раз получать новые статьи
            start += 10;
            }});
        }
    });
});

Как видите, всё не так и сложно. На этом можем закончить данную статью.