Что такое AJAX? Создание асинхронных запросов

Александр Мальцев
80K
24
0
Содержание:
  1. Что такое AJAX?
  2. Создание асинхронных запросов с помощью XHR
  3. Пример AJAX GET запроса
  4. Пример AJAX POST запроса
  5. Создание асинхронного AJAX запроса (метод POST)
  6. Комментарии

Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.

Что такое AJAX?

AJAX – это аббревиатура от «Asynchronous JavaScript and XML», которая дословно переводится как «асинхронный JavaScript и XML».

Что означают эти слова?

  • асинхронный – означает то, что действие выполняется в фоне (не в основном потоке), другими словами, таким образом, что это не мешает пользователю взаимодействовать со страницей;
  • JavaScript – это на чём всё это делается (т.е. создание запроса и его настройка, отправка запроса на сервер, получение ответа и его разбор, обновление страницы);
  • XML – формат для хранения и передачи данных, в настоящее время вместо него чаще используется JSON, но кроме этих можно использовать и другие форматы.

Что такое AJAX? AJAX – это стек технологий, с помощью которых можно в фоновом режиме получать данные с сервера и использовать их для обновления страницы без её перезагрузки. Это делает сайты и веб-приложения более быстрыми и отзывчивыми при взаимодействии пользователей с ними.

Какие преимущества даёт технология AJAX при использовании её на сайте?

AJAX на сайте позволяет:

  • Снизить трафик (из-за уменьшения объёма передаваемых данных между клиентом и сервером);
  • Уменьшить нагрузку на сервер (не нужно будет генерировать всю страницу, а только ту часть, которую нужно обновить);
  • Создавать быстрые и отзывчивые интерфейсы (из-за того, что нет необходимости в полной перезагрузки страницы, достаточно изменить содержимое только отдельных блоков);
  • Увеличить интерактивность (с помощью AJAX можно мгновенно отображать результаты и повысить удобство использования ресурса для пользователя).

Взаимодействовать с сервером через асинхронные запросы можно посредством двух способов: XHR и метода fetch().

Создание асинхронных запросов с помощью XHR

Что такое асинхронный запрос, мы уже разобрали выше. Т.е. это такой, который выполняется в фоне и не мешает пользователю взаимодействовать со страницей.

А это значит, что при отправке такого запроса, страница не «замораживается», с ней можно работать дальше.

XHR – это аббревиатура от объекта XMLHttpRequest, позволяющего взаимодействовать с сервером.

1. Начинается написания запроса с создания экземпляра объекта XMLHttpRequest:

const xhr = new XMLHttpRequest();

2. После этого следует инициализировать запрос с помощью метода open():

xhr.open(method, url[, async[, user[, password]]]);

Где:

  • method – метод отправки запроса на сервер (GET, POST, PUT, PATCH, DELETE);
  • url – URL для отправки запроса;
  • async – определяет, как следует выполнять запрос: асинхронно (true – по умолчанию) или нет (false);
  • user и password – имя пользователя и пароль, использующиеся для аутентификации (по умолчанию имеют значение null).

Например:

// GET – метод, по которому будем делать запрос
// requestURL – переменная, содержащая URL для отправки запроса
xhr.open('GET', requestURL);

3. Следующий шаг – это назначить обработчик на событие readystatechange объекта xhr:

xhr.onreadystatechange = function() {
  // ...
}

Это событие происходит при изменении статуса запроса readyState.

readyState – это свойство, содержащее числовой код, по которому можно определить в какой сейчас стадии находится запрос.

Статусы кодов readyState:

  • 0 – создан объект XMLHttpRequest, но метод open() ещё не вызывался;
  • 1 – открыто новое соединение с помощью open() (этот этап также включает установку значений HTTP заголовкам с помощью setRequestHeader());
  • 2 – отправлен (вызван send() и получены заголовки ответа);
  • 3 – получена часть ответа;
  • 4 – завершён.

Из всех этих статусов нам интересен только 4. Он будет означать, что ответ от сервера получен и его можно обработать. Остальные коды на практике практически не используются.

Таким образом напишем проверку на равенство значения readyState числу 4:

xhr.onreadystatechange = function() {
  if (xhr.readyState !== 4) {
    return;
  }
  // все в порядке, ответ получен
}

Следующее, что нужно проверить – это статус HTTP-ответа. Он находится в свойстве status.

Если запрос был успешно выполнен сервером, то его статус будет 200. Другие ответы нам в большинстве случаев не интересны. Например, если status равен 404 (запрашиваемый URL не найден), то в этом случае запрашиваемых данных нет и мы можем только как-то обработать это ошибку.

Добавим ещё одно условие в код: проверку status на равенство 200.

xhr.onreadystatechange = function() {
  if (xhr.readyState !== 4 && xhr.status !== 200) {
    return;
  }
  // все в порядке, ответ получен и его статус равен 200
}

Теперь, если всё в порядке, мы можем получить данные и делать с ними всё, то угодно.

Получить данные (ответ от сервера) можно в виде строки (xhr.responseText) или объекта XML Document (xhr.responseXML).

Например, выведем полученный ответ от севера в консоль:

xhr.onreadystatechange = function() {
  if (xhr.readyState !== 4 || xhr.status !== 200) {
    return;
  }
  const response = xhr.responseText;
  console.log(response);
}

4. Последний этап – это отправка запроса. Выполняется это с помощью метода send().

Если запрос асинхронный, то выполнение send() не останавливает дальнейшее выполнение программы. В противном случае (если запрос синхронный), программа приостанавливается и возобновляет своё выполнение только после получения ответа от сервера.

В send() при необходимости можно передать аргумент (данные серверу в теле запроса). Если это не сделать, то по умолчанию будет использоваться значение null.

Запросы GET создаются без тела, все параметры, которые нужно передать серверу здесь указывается в самом URL. Поэтому чтобы тело запроса было пустое, как уже было отмечено выше, нужно вызвать метод send() без аргументов или с аргументом null.

Отправим запрос:

xhr.send();

Итоговый код:

const xhr = new XMLHttpRequest();
xhr.open('GET', requestURL);
xhr.onreadystatechange = function() {
  if (xhr.readyState !== 4 || xhr.status !== 200) {
    return;
  }
  const response = xhr.responseText;
  console.log(response);
}
xhr.send();

Пример AJAX GET запроса

В качестве примера напишем асинхронный AJAX запрос на чистом JavaScript, который будет после готовности DOM и при нажатии на кнопку обновлять содержимое списка на странице.

1. Для генерации некоторых данных на сервере создадим простой php-файл, который будет возвращать массив из 3 элементов в формате JSON.

<?php

$arr = ['Audi', 'BMW', 'Ford', 'Hyundai', 'Mazda', 'Mercedes-Benz', 'Toyota', 'Volkswagen'];
shuffle($arr);
$random = [];
for ($i = 0; $i < 3; $i++) {
  $random[] = $arr[$i];
}
exit(json_encode($random));

В качестве сервера можно использовать «Open Server Panel», встроенный в PHP веб-сервер или любой другой.

2. Создадим HTML файл и поместим в <body> следующее содержимое:

<ul id="list"></ul>
<button type="button" id="update">Обновить список</button>

<script>
  function updateList() {
    // URL на который будем отправлять GET запрос
    const requestURL = '/list.php';
    const xhr = new XMLHttpRequest();
    xhr.open('GET', requestURL);
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4 || xhr.status !== 200) {
        return;
      }
      const response = JSON.parse(xhr.responseText);
      const listElement = document.querySelector('#list');
      let html = [];
      for (let i = 0, length = response.length; i < length; i++) {
        html.push('<li>' + response[i] + '</li>');
      }
      listElement.innerHTML = html.join('');
    }
    xhr.send();
  }
  // после готовности DOM
  document.addEventListener('DOMContentLoaded', function () {
    updateList();
  });
  // при нажатию на кнопку
  document.querySelector('#update').addEventListener('click', function () {
    updateList();
  });
</script>

В этом примере:

  • После загрузки DOM и нажатию на кнопку вызывается функция updateList();
  • Эта функция создаёт AJAX запрос и отправляет его на «/list.php», после получения ответа обновляет контент элемента «#list»;
  • Для преобразования JSON в массив используется метод JSON.parse();
  • Изменение содержимого «#list» выполняется с помощью innerHTML.
Обновление списка с помощью AJAX GET запроса

Пример AJAX POST запроса

<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$output = ['firstname' => $firstname, 'lastname' => $lastname];
exit(json_encode($output));
<form name="user" action="/list.php" method="post">
  <label for="firstname">Имя:</label>
  <input type="text" name="firstname" id="firstname">
  <label for="lastname">Фамилия:</label>
  <input type="text" name="lastname" id="lastname">
  <button type="submit">Отправить</button>
</form>
<div class="status-wrapper">
  Полученные данные:
  <div id="status"></div>
</div>

<script>
  const elForm = document.querySelector('[name="user"]');
  const elFirstname = elForm.querySelector('[name="firstname"]');
  const elLastname = elForm.querySelector('[name="lastname"]');
  const elStatus = document.querySelector('#status');
  const requestURL = elForm.action;

  function sendForm() {
    const firstname = encodeURIComponent(elFirstname.value);
    const lastname = encodeURIComponent(elLastname.value);
    const formData = 'firstname=' + firstname + '&lastname=' + lastname;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', requestURL);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4 || xhr.status !== 200) {
        return;
      }
      const response = JSON.parse(xhr.responseText);
      elStatus.innerHTML = '<ul><li>Имя: <b>' + response.firstname + '</b></li><li>Фамилия: <b>' + response
        .lastname + '</b></li></ul>';
    }
    xhr.send(formData);
    elStatus.textContent = '...';
  }
  // при отправке формы
  elForm.addEventListener('submit', function (e) {
    e.preventDefault();
    sendForm();
  });
</script>
Отправка формы на сервер с помощью AJAX POST запроса

Создание асинхронного AJAX запроса (метод POST)

Изменим вышеприведённый пример. Теперь AJAX запрос к серверу будет выполняться после нажатию на кнопку. Он будет получать имя, которое ввёл пользователь в элемент input и отправлять его посредством метода POST на сервер. После получения ответа с сервера, заменим им содержимое элемента div на странице.

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример работы AJAX</title>
</head>
<body>
<h1>Пример работы AJAX</h1>

<div id="welcome">
  <label for="name">Имя:</label>
  <input type="text" id="name" placeholder="Например, Иван">
  <button id="send">Отправить</button>
</div>

<script>
//после загрузки DOM-дерева страницы
document.addEventListener("DOMContentLoaded",function() {
//получить кнопку
var mybutton = document.getElementById('send');
//подписаться на событие click по кнопке и назначить обработчик, который будет выполнять действия, указанные в безымянной функции
mybutton.addEventListener("click", function(){
  //1. Сбор данных, необходимых для выполнения запроса на сервере
  var name = document.getElementById('name').value;
  //Подготовка данных для отправки на сервер
  //т.е. кодирование с помощью метода encodeURIComponent
  name = 'nameUser=' + encodeURIComponent(name);
  // 2. Создание переменной request
  var request = new XMLHttpRequest();
  // 3. Настройка запроса
  request.open('POST','processing.php',true);
  // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
  request.addEventListener('readystatechange', function() {
    //если запрос пришёл и статус запроса 200 (OK)
    if ((request.readyState==4) && (request.status==200)) {
      // например, выведем объект XHR в консоль браузера
      console.log(request);
      // и ответ (текст), пришедший с сервера в окне alert
      console.log(request.responseText);
      // получить элемент c id = welcome
      var welcome = document.getElementById('welcome');
      // заменить содержимое элемента ответом, пришедшим с сервера
      welcome.innerHTML = request.responseText;
    }
  });
  // Устанавливаем заголовок Content-Type(обязательно для метода POST). Он предназначен для указания кодировки, с помощью которой зашифрован запрос. Это необходимо для того, чтобы сервер знал как его раскодировать.
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  // 5. Отправка запроса на сервер. В качестве параметра указываем данные, которые необходимо передать (необходимо для POST)
  request.send(name);
});
});
</script>

</body>
</html>

PHP:

<?php
// создадим переменную для формирования ответа
$output ='';
// если в массиве пост есть ключ nameUser, то
if (isset($_POST['nameUser'])) {
// в переменную name помещаем переданное с помощью запроса имя
$name = $_POST['nameUser'];
// добавляем в переменную output строку приветствия с именем
$output .= 'Здравствуйте, '.$name.'! ';
// добавляем в переменную output IP-адрес пользователя
if ($_SERVER['REMOTE_ADDR']) {
  $output .= 'Ваш IP адрес: '. $_SERVER['REMOTE_ADDR'];
}
else {
  $output .= 'Ваш IP адрес неизвестен.';
}
// выводим ответ
echo $output;
}
HTML-страница с AJAX (метод POST) HTML-страница, на которую пришёл AJAX ответ с сервера (метод POST)

Комментарии:

  1. Alexander
    23 марта 2021, 16:45
    Александр, доброго здоровья!

    Будьте добры, подскажите один момент насчет аякс-запросов к стороннему сайту (не локалхост).

    Такой вот код
    $.ajax({
          url: "http://.......",
          method: "POST",
          timeout: 0,
          crossDomain:true,
          data: "{\"sel\":\"production\"}",
            beforeSend: function(xhr) { 
                  xhr.setRequestHeader("Authorization", "Basic " + btoa(name+":"+pwd)); 
                },
            success: function (data) {
              console.log(data);
            }
        });
    
    В отладчике вызывает ошибку:

    «Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at … (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).»

    Аналогичная ситуация и при испольозвании
    var data = "{\"sel\":\"production\"}";
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.addEventListener("readystatechange", function() {
      if(this.readyState === 4) {
        console.log(this.responseText);
      }
    });
    xhr.open("POST", "http://....");
    xhr.send(data);
    
    Так как через reqbin.com все работает, прричина все-таки не в настройках сервера?
    1. autotester
      22 апреля 2020, 12:35
      У меня на платформе один фрейм и в нем меняются страницы (без перезагрузки). Сейчас возникла проблема, что страница не успевает загрузиться и коллега подсказал проверить ajax запрос, но как это сделать — не знаю. Вручную проблема не воспроизводится, только при автотесте. Можете подсказать, как можно посмотреть эти запросы и понять, где проблема?
      1. Александр Мальцев
        22 апреля 2020, 16:21
        Открываете «Инструменты разработчика» в браузере (в Windows комбинация клавиш Ctrl + Shift + I). В ней переходите на вкладку Network, при необходимости можете включить показ только XHR (для этого нужно нажать на соответствующую кнопку на строке Filter), чтобы не показывались другие записи. Далее выбираете нужный скрипт и просматриваете информацию: Headers, Response и т.д. В большинстве случаев этой информации для анализа должно быть достаточно.
      2. Beginner
        09 декабря 2019, 20:14
        Зравствуйте, Александр.

        Подскажите пожалуйста что специфичное (нестандартное) передается при асинхронных запросах:

        — в заголовках от клиента к серверу и обратно

        — в данных от клиента к серверу при POST запросе, и от сервера клиенту в блоке данных

        Вопрос связан с тем, что HTTP-сервер самописанный и встроен в программу (бинарник), поэтому использовать примеры на PHP не представляется возможным. Cервер работает напрямую с сокетами, делает разбор и формирование заголовков и данных.

        Заранее спасибо.
        1. Beginner
          10 декабря 2019, 22:59
          Спасибо, Александр, за ваш ответ.

          Ваш пример заработал. Действительно, асинхронные запросы прозрачны для сервера.
          Моя ошибка была в том, что я выдавал статус 302, а не 200. Это было связано с тем, что нижеприведенный код срабатывал только на статус 302.

          <!DOCTYPE html>
          <html>
          <script>
          'use strict';
          
          (async () => {
          let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
          let response = await fetch(url);
          
          let commits = await response.json();  // или  .text()  
          
          alert(commits[0].author.login);
          })()
          </script>
          </html>
          
          1. Александр Мальцев
            10 декабря 2019, 15:16
            Привет! AJAX запросы (синхронные или асинхронные) к серверу ничем не отличаются от обычных. Поэтому если вы не установите с помощью JavaScript дополнительный заголовок, то на сервере вы никак не сможете узнать, что это AJAX. Например, библиотека jQuery устанавливает следующий дополнительный заголовок к запросу: «X-Requested-With: XMLHttpRequest».
          2. selftrips
            24 ноября 2019, 06:58
            Напишите как именно работать с
            На сервере (с помощью php):

            Получим данные. Если данные посланы через метод GET, то из глобального массива $_GET['имя']. А если данные переданы с помощью метода POST, то из глобального массива $_POST['имя'].
            Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ. Выведем его с помощью echo.

            <?php
                $output = 'Здравствуйте, пользователь! ';
                if ($_SERVER['REMOTE_ADDR']) {
                  $output .= 'Ваш IP адрес: '. $_SERVER['REMOTE_ADDR'];
                }
                else {
                 $output .= 'Ваш IP адрес неизвестен.';
                }
                echo $output;
            1. Александр Мальцев
              24 ноября 2019, 11:23
              Тут всё зависит от задачи.
              Первое — это нужно получить данные (GET, POST, REQUEST). После этого обычно приступают к проверке данных и того, как они были получены. Если валидация данных прошла не успешно, то действие на сервере обычно прекращают и возвращают результат. В противном случае продолжают дальнейшие действия. Здесь уже вы выполняете действия в зависимости от задачи, опираясь на данные, которые получили. Это может быть выбор информации из базы данных или запись в неё, отправка писем, запись данных в файлы и многое другое. В результате выполнения этого или нет необходимо сформировать ответ и отправить его пользователю. При AJAX формирование ответа обычно осуществляется в формате JSON.
              После этого, когда клиент (браузер пользователя) получит ответ от сервера, необходимо его разобрать и вывести пользователю данные или какую-то другую информацию.

              Чтобы глубже разобраться в этом разбирайте реальные примеры: Скрипт звёздного рейтинга для сайта, Форма обработной связи и др.
              1. selftrips
                24 ноября 2019, 14:10
                А ваш пример нельзя дополнить, чтобы получить как у вас в статье

                так как реально введенное имя назад не возвращается.
                1. Александр Мальцев
                  24 ноября 2019, 14:40
                  Этот момент добавлен к статье.
                  1. selftrips
                    24 ноября 2019, 15:31
                    теперь вообще не работает
                    1. selftrips
                      24 ноября 2019, 14:54
                      myexpedia.ru/%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82/
                      ps
                      Еще в ваше статье не корректно работает блок развернуть — перекрывает текст ниже, а должен сдвигать вниз
                      1. selftrips
                        24 ноября 2019, 14:47
                        не работает php не получает введеное имя, соответственно не может вывести (метод post)
                2. Влад
                  12 марта 2017, 20:45
                  Здравствуйте, у меня не получается сделать так, чтобы по нажатию на кнопку изменялась переменная в скрипте php и выводились данные вместо div'а. Сами переменные объявлены в другом куске скрипта.
                  <script>
                  <button id="tr" style = "background-color: mediumspringgreen; width: 120px; font-size:20px; height: 35px"  onclick="color('lightgreen')"><?php echo $string; ?></button>
                  
                  document.addEventListener("load", function() {
                    var mybutton = document.getElementById('tr');
                       mybutton.addEventListener("click", function(){
                      var request = new XMLHttpRequest();
                      request.open('GET','scr3.php',true);
                      request.addEventListener('readystatechange', function() {
                        if ((request.readyState==4) && (request.status==200)) {
                        var welcome = document.getElementById('welcome');
                        welcome.innerHTML = request.responseText; 
                        }
                      });
                      request.send();
                    });
                  });
                  </script>
                  
                  </div id="welcome">
                      <?php
                       echo $true;?> out of <?php echo $all; ?>
                    </div> 
                  
                  <?php
                  $output ='';
                    $output .= ++$true . ' of ' . ++$all;
                    echo $output;
                          ?>
                  
                  1. Влад
                    12 марта 2017, 22:29
                    Нашел: как обычно не работало из-за какой-то фигни(
                    </div id="welcome">
                        <?php
                         echo $true;?> out of <?php echo $all; ?>
                      </div>
                    Два раза див закрывал, вместо того, чтобы открывать-закрывать:(
                  2. Jaan
                    01 марта 2017, 12:48
                    Александр здравствуйте! помогите уяснить один момент. После отправки методом POST с welcome.html на страницу proccesing.php на самой странице proccesing.php можно отобразить переданные данные? Ведь страница proccesing.php не перезагружается. Или же увидеть переданные данные так нельзя?
                    1. Александр Мальцев
                      01 марта 2017, 16:22
                      Здравствуйте. Вызов файла proccesing.php в данном случае осуществляется посредством AJAX. Т.е. мы не открываем его явно как страницу.
                      Для того чтобы данная страница (proccesing.php) что-то отобразила ей необходимо передать данные методом POST. Т.е. она не может ничто вывести, если в суперглобальном массиве $_POST не будет ключа nameUser. Другими словами, вам никто не запрещает сделать обычную HTML форму и назначить данный файл для её обработки (без AJAX).

                      Но если вы хотите чтобы файл proccesing.php выполнялся только для AJAX запросов, то необходимо сделать следующее:
                      1. Добавить в сценарий JavaScript строчку:
                      request.open('POST','processing.php',true);
                      // добавим специальный заголовок
                      request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                      
                      2. Будем его проверять в файле proccesing.php. Если данный заголовок не доступен в этом файле (запустили его не по AJAX), то завершаем его работу.
                      <?php
                      // если запрос не является AJAX, то завершить работу
                      if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {
                        exit();
                      }
                      // ... остальной код
                      
                      1. Jaan
                        01 марта 2017, 19:15
                        Что-то не получается. Все равно не выводятся данные на странице proccesing.php. Немного опишу ситуацию что я пытаюсь сделать. На сайте в файле index.html (условно) подключен скрипт js который кроппит обрезает изображение. Потом с помощью кнопки в форме по нажатию на которою js просто вставляет обрезанное изображение в пустой div.

                        Мне нужно по нажатию на эту кнопку что бы изображение отсылалось на сервер. В идеале конечно в контроллер отослать как будто через обыкновенную форму.
                        1. Александр Мальцев
                          02 марта 2017, 15:14
                          Чтобы после отправки открывалась страница proccesing.php необходимо отправлять данные без AJAX, т.е. с помощью формы:
                          <form action="processing.php" method="POST">
                            <label for="nameUser">Имя:</label>
                            <input type="text" name="nameUser" id="name" placeholder="Например, Иван">
                            <button type="submit" id="send">Отправить</button>
                          </form>
                          
                          При этом код JavaScript не нужен.

                          Как отправлять изображения на сервер можете посмотреть в этой статье: itchief.ru/lessons/php/feedback-form-for-website
                          1. Jaan
                            02 марта 2017, 19:04
                            Спасибо Александр за статью надеюсь это то что мне нужно.
                        2. Jaan
                          01 марта 2017, 18:59
                          Спасибо Александр пошел пробовать код.
                      2. Евгений
                        20 января 2016, 15:42
                        Добрый день.
                        Большое спасибо за статью!
                        А где бы посмотреть подгрузку информации при прокрутке страницы? Т.е. например листаем вниз, добавляются новые посты.
                        1. Александр Мальцев
                          23 января 2016, 04:12
                          Здравствуйте.
                          Тут необходимо завести переменную, которая будет отвечать за то, находится ли AJAX запрос в обработке или нет. Например, processing. Т.е. если при прокрутке страницы, значение переменной равно false, то загружаем данные. На момент загрузки данных устанавливаем значение переменной processing, равной true. Это необходимо сделать для того чтобы не сделать кучу запросов пока данные не пришли. Как только данные пришли, устанавливаем переменной значение false и готовы к загрузке новой партии данных с сервера. Другими словами, данная переменная необходима для того чтобы при прокрутке Вы не сделали 1000 запрос к серверу, а только один.

                          Для простоты приведу решение на jQuery, пояснив каждую строчку кода. Для загрузки данных будем использовать содержимое файла data.txt. Т.е. при прокрутке страницы более чем на 80%, берём данные из файла data.txt и помещаем их в блок div.

                          <!-- Контейнер, в который будут подгружаться данные из файла data.txt -->
                          <div id="container"></div>
                          
                          <script>
                          // переменная, отвечаяющая за то находится ли в процесс в получение данных с помощью AJAX
                          var processing;
                          // после загрузки страницы
                          $(document).ready(function(){
                            // при прокрутке страницы
                            $(document).scroll(function(e){
                              // если процесс находится в обработке (т.е. ещё не данные не пришли), то ничего не делать
                              if (processing)
                                return false;
                              // если пользователь прокрутил страницу более чем на 80%
                              if (window.scrollTop >= (document.height - window.height)*0.8){
                                // отмечаем то, что процесс находится в обработке
                                processing = true;
                                // отправляем и обрабатываем запрос
                                $.get('data.txt', function(data){
                                  // вставляем контент в контейнер
                                  $('#container').append(data);
                                  // отмечаем, что процесс получения данных завершился
                                  processing = false;
                                });
                              }
                            });
                          });
                          </script>
                          
                          Для демонстрации можно создать файл data.txt со следующим содержимым:
                          <div class="content">Информация :)</div>
                          
                          Ну и добавить стиль CSS в вышеприведённый документ:
                          <style>
                          .content {
                            min-height: 1280px;
                          }
                          </style>
                          
                          1. Евгений
                            26 января 2016, 03:03
                            Огромное спасибо!!!
                        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.