Технология AJAX. Формат JSON и способы обработки данных в клиентских приложениях

Понятие AJAX

• AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.
• Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.

Применение AJAX

• AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.
• Динамическая подгрузка данных. Например, дерево, которое при раскрытии узла запрашивает данные у сервера.
• Живой поиск – пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера.

Форматы обмена данными

• Технически, с помощью AJAX можно обмениваться любыми данными с сервером.
• Обычно используются форматы:
• JSON – для отправки и получения структурированных данных, объектов.
• XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
• HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.
• Бинарные данные, файлы – гораздо реже, в современных браузерах есть удобные средства для них.

​

​

Формат JSON

JSON (JavaScript Object Notation) – это общий формат для представления значений и объектов. Его описание задокументировано в стандарте RFC 4627. JSON легко использовать для обмена данными, когда клиент использует JavaScript, а сервер написан на Ruby/PHP/Java или любом другом языке.

JavaScript предоставляет методы:

• JSON.stringify для преобразования объектов в JSON;
• JSON.parse для преобразования JSON обратно в объект.

Пример: преобразование через JSON.stringify данных студента

Метод JSON.stringify(student)

• Данный метод преобразует объект в строку.
• Полученная строка json называется JSON-форматированным или сериализованным объектом. Можно отправить его по сети или поместить в обычное хранилище данных.

Объект в формате JSON имеет несколько важных отличий от объектного литерала:

• строки используют двойные кавычки. Никаких одинарных кавычек или обратных кавычек в JSON. Так 'John' становится "John";
• имена свойств объекта также заключаются в двойные кавычки. Это обязательно. Так age:30 становится "age":30.

Метод JSON.stringify

• JSON.stringify может быть применён к примитивам.

JSON поддерживает следующие типы данных:

• Объекты { ... }
• Массивы [ ... ]
• Примитивы:
• строки,
• числа,
• логические значения true/false,
• null.

Пример

Исключаем и преобразуем: replacer

• Полный синтаксис JSON.stringify:

​

• value - значение для кодирования;
• replacer - массив свойств для кодирования или функция соответствия function(key, value);
• space - дополнительное пространство (отступы), используемое для форматирования.

​

Исключаем и преобразуем: replacer

• В большинстве случаев JSON.stringify используется только с первым аргументом. Но если нам нужно настроить процесс замены, например, отфильтровать циклические ссылки, то можно использовать второй аргумент JSON.stringify.
• Если мы передадим ему массив свойств, будут закодированы только эти свойства.

• В приведенном выше примере список свойств применяется ко всей структуре объекта. Так что внутри participants – пустые объекты, потому что name нет в списке.
• Включим в список все свойства, кроме room.occupiedBy, из-за которого появляется цикличная ссылка:

Форматирование: space

• Третий аргумент в JSON.stringify(value, replacer, space) – это количество пробелов, используемых для удобного форматирования.
• Ранее все JSON-форматированные объекты не имели отступов и лишних пробелов. Это нормально, если мы хотим отправить объект по сети. Аргумент space используется исключительно для вывода в удобочитаемом виде.

space = 2 указывает JavaScript отображать вложенные объекты в несколько строк с отступом в 2 пробела внутри объекта

Метод JSON.parse

• Используется, чтобы декодировать JSON-строку.
• Синтаксис:

​

• str - JSON для преобразования в объект;
• reviver - необязательная функция, которая будет вызываться для каждой пары (ключ, значение) и может преобразовывать значение.

​

Пример

XMLHttpRequest

• XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.
• На сегодняшний день не обязательно использовать XMLHttpRequest, так как существует другой, более современный метод fetch

XMLHttpRequest

В современной веб-разработке XMLHttpRequest используется по трём причинам:

• по историческим причинам: существует много кода, использующего XMLHttpRequest, который нужно поддерживать;
• необходимость поддерживать старые браузеры и нежелание использовать полифилы (например, чтобы уменьшить количество кода);
• потребность в функциональности, которую fetch пока что не может предоставить, к примеру, отслеживание прогресса отправки на сервер.

Режимы работы

XMLHttpRequest имеет два режима работы: синхронный и асинхронный.

Асинхронный режим используется в большинстве случаев.

Чтобы сделать запрос, нужно выполнить три шага:

• создать XMLHttpRequest.

​

Асинхронный режим работы

2. Инициализировать его.

​

​

Этот метод обычно вызывается сразу после new XMLHttpRequest. В него передаются основные параметры запроса:

method – HTTP-метод. Обычно это "GET" или "POST".

URL – URL, куда отправляется запрос: строка, может быть и объект URL.

async – если указать false, тогда запрос будет выполнен синхронно, это мы рассмотрим чуть позже.

user, password – логин и пароль для базовой HTTP-авторизации (если требуется).

​

Асинхронный режим работы

3. Послать запрос.

​

​

Этот метод устанавливает соединение и отсылает запрос к серверу. Необязательный параметр body содержит тело запроса.

Некоторые типы запросов, такие как GET, не имеют тела. А некоторые, как, например, POST, используют body, чтобы отправлять данные на сервер.

Асинхронный режим работы

4. Слушать события на xhr, чтобы получить ответ.

Три наиболее используемых события:

• load – происходит, когда получен какой-либо ответ, включая ответы с HTTP-ошибкой, например 404.
• error – когда запрос не может быть выполнен, например, нет соединения или невалидный URL.
• progress – происходит периодически во время загрузки ответа, сообщает о прогрессе.