How to load content via ajax like in social networks?

Question

Django

How can I load content when scrolling like in vk.com, instagram.com.
First, by default, I load 9 records from the database, then when I scroll, I want to load 9 more
Views:

def IndexAjaxLoadNews(request):
    if request.is_ajax():
        startFrom = request.GET.get("startFrom")
        data = serializers.serialize('articles', News.objects.all().order_by('-dat','-addtime')[0:startFrom])
        return HttpResponse(data, content_type='application/json')
    else:
        return render(request, 'news.html')

Script:

<script>
    $(document).ready(function(){
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */
var startFrom = 9;
    /* Используйте вариант   $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
    $(window).scroll(function(){
        /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {
        $.ajax({
            /* адрес файла-обработчика запроса */
            url: '/ajax/loadnews/',
            /* метод отправки данных */
            method: 'GET',
            /* данные, которые мы передаем в файл-обработчик */
            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.themename + "</b><br />" + data.themename + "</p>");
            });
  /* По факту окончания запроса снова меняем значение флага на false */
            inProgress = false;
            // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
            startFrom += 9;
            }});
        }
    });
});
</script>

templates:

<div class="row" id="articles">
{% block news %} {% endblock news %}
</div>

URL:
path('ajax/loadnews/', views.IndexAjaxLoadNews),