AJAX / SPA

• Экономия трафика. Передаются данные только конкретной части страницы, что существенно снижает трафик
• Уменьшение нагрузки на сервер. Нет надобности обновлять страницу целиком, уходит конкретный запрос.
• Быстрая работа самого сервиса. Поскольку работа происходит с конкретным блоком, то и результат его работы можно увидеть намного быстрее.
• Простота проекта. AJAX часто используют для работы с программным кодом и с большой масштабностью проекта.
• Разнообразие в использовании. Действие AJAX подразумевает под собой не только работу с формами. Например, в поиске Google вы можете видеть подборку поисковых фраз после ввода уже первых букв Вашего запроса.

Пример кода

          
            // 1. Создаём новый объект XMLHttpRequest
            let xhr = new XMLHttpRequest();

            // 2. Конфигурируем его(устанавливаем соединение):
                  // GET-запрос на URL 'http://domain/service'
            xhr.open('GET', 'http://domain/service');

            // 3. вызывает функцию при смене состояния
            xhr.onreadystatechange = function() {

              // завершился ли запрос?
              if (xhr.readyState !== 4) return;

              if (xhr.status === 200) {
                // Запрос завершен. Здесь можно обрабатывать результат
                console.log(xhr.responseText);
              }
              else {
                // Если код ответа сервера не 200, то это ошибка
                console.log('HTTP error', xhr.status, xhr.statusText);
              }
            };

            // 4. Отсылаем запрос
            xhr.send();
          
        

Для того, чтобы осушествлять обмен данными, на странице должен быть создан обьект XMLHttpRequest, который является своеобразным посредником между браузером пользователя и сервером. С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.

• abort() — отмена текущего запроса к серверу.
• getAllResponseHeaders() — получить все заголовки ответа от сервера.
• getResponseHeader(«имя_заголовка») — получить указаный заголовок.
• open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).
• send(«содержимое») — это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.
• setRequestHeader(«имя_заголовка»,«значение») — это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.

• onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
• readyState — число, обозначающее статус объекта.
• responseText — представление ответа сервера в виде обычного текста (строки).
• responseXML — объект документа, совместимый с DOM, полученного от сервера.
• status — состояние ответа от сервера.
• statusText — текстовое представление состояния ответа от сервера.

P.S. Именно опираясь на состояние готовности объекта можно представить посетителю информацию о том, на какой стадии находится процесс обмена данными с сервером и, возможно, оповестить его об этом визуально.

SPA (single page application) – это веб-приложение, работающее на одной странице. Оно подгружает все необходимые javascript и css файлы при первой загрузке страницы, а затем все общение между клиентом и сервером сводится к минимуму. Т.е. при таком подходе большая часть работы сайта производится на стороне клиента, а если нужно получить данные с сервера, то это обычно делается с помощью JSON.

Такой способ создания сайтов появился относительно недавно, с приходом HTML5, но уже активно набирает обороты. В принципе, здесь нет ничего удивительного, ведь такое веб-приложение будет работать намного быстрее обычных сайтов, да и разработка не займет много времени. Благо, что сейчас уже есть куча фреймворков, которые позволяют создавать очень сложные сайты такого типа достаточно просто и быстро. На данный момент лучшим фреймворком считается React. У него больше плюсов, чем у конкурентов, а также он прост в изучении и использовании.