Передача информации при работе в сети и Интернете осуществляется при помощи запросов. Они могут быть синхронными и асинхронными. Реализуются при помощи специальных команд.

Сегодня предстоит изучить AJAX и JSON в JavaScript, а также познакомиться с основами асинхронных запросов. Необходимо понять, что собой представляет JSON и AJAX, для чего они нужны, какие особенности предусматривают. Также нужно разобраться с нюансами работы асинхронных запросов и их реализацией на примере JS. Предложенная информация рассчитана на широкий круг лиц. Она подойдет как новичкам в области веб-разработки, так и более опытным их коллегам.

JSON – определение

JSON – это текстовый формат обмена данными. Он базируется на JavaScript и используется при разработке на соответствующем языке. JSON, как и многие другие текстовые форматы, хорошо распознается и читается людьми.

Несмотря на то, что данный формат активно используется в JS и основан на нем, задействовать JSON получится практически на любом языке программирования. Многие из них предусматривают готовые кодовые блоки для формирования и обработки данных в JSON-формате.

Преимущества и недостатки

JSON – формат, предусматривающий достаточно понятный и простой синтаксис описания информации. Он представляет собой текстовую строку, которая состоит из пар «ключ–значение», организованных в массивы или объекты. Этот прием дает возможность легко запоминать синтаксис, а также оперировать данными.

К преимуществам JSON можно отнести:

• простоту записи и чтения;
• гибкие возможности описания информационной структуры;
• удобство в плане передачи данных по сети;
• поддержку огромным количеством языков программирования и платформ.

JSON – формат, который широко используется во многих областях – от обмена данными в клиент-серверных моделях и на веб-сайтах, до применения его в API тех или иных сервисов. Это неотъемлемая часть разработки программного обеспечения.

К недостаткам данного элемента можно отнести:

• сложности при сжатии информации;
• отсутствие поддержки типов данных даты и времени;
• отсутствие комментариев;
• отсутствие возможности сообщения о кодировке текстовой строки – кодировать можно только в UTF-8, а также в UTF-16 и UTF-32, но с порядком следования байт BE и LE.

Рассматриваемый формат, несмотря на свои недостатки, достаточно часто используется в веб-разработке. Особенно на языке JavaScript. Он удобен в асинхронных запросах.

Синтаксис

Перед более подробным изучением AJAX data JSON необходимо получше изучить синтаксис соответствующего текстового формата. Он в закодированной интерпретации представляет собой одну из двух структур:

1. Пары «ключ–значение». Они могут быть реализованы в виде записей, структур, словарей, списков с ключами, ассоциативных массивов и хеш-таблиц. В качестве ключа может выступать только строка, в виде значения – любая форма. Повторения ключей допускаются, но они не рекомендованы стандартом. Это связано с тем, что обработка подобных ситуаций осуществляется на усмотрение отдельно взятого программного обеспечения.
2. Упорядоченный набор значений. Во многих языках ими выступают векторы, списки, последовательности и массивы.

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

В качестве значений в JSON могут выступать:

1. Записи. Они представляют собой неупорядоченное множество пар «ключ:значение». Заключаются в фигурные скобки. Ключи описываются строками, между ними и значением ставится символ «:». Отделяются пары «ключ:значение» запятыми.
2. Одномерные массивы. Они представляют собой упорядоченное множество значений. Массивы заключаются в квадратные скобки, а их значения разделяются запятыми. Этот элемент может быть пустым – не включать в себя ни одного значения. Значения в пределах одного и того же массива предусматривают возможность выражения разными типами.
3. Числа – целые или вещественные.
4. Литералы. К ним относят логическую истину (true) и ложь (false). Также сюда можно отнести null.
5. Строки. Так называется упорядоченное множество из нуля или более символов Юникода. Соответствующая запись заключается в двойные кавычки. Символы в строках могут указываться при помощи escape-последовательностей, которые начинаются с обратной косой черты, а также выражаться шестнадцатеричным кодом в кодировке Unicode в виде \uFFF.

Теперь можно более подробно изучить AJAX data JSON на примере работы с JS. Начать можно с общего понимания асинхронных запросов.

Асинхронные запросы – это…

Обычные запросы работают для формирования страницы в браузере примерно так:

1. Пользователь нажимает в форме обратной связи кнопку «Отправить».
2. Браузер распознает, что по кнопке требуется направить запрос на серверную часть модели. Он пакует соответствующую команду и отправляет ее.
3. Сервер получает запрос.
4. Запрос обрабатывается серверной частью клиент-серверной модели, а затем предоставляется ответ в виде новой веб-страницы.
5. Браузер загружает сайт (страницу) с нуля. На ней уже есть все необходимые пользователю данные, но возникает ощущение «вспышки»: когда человек был на одной странице, затем – экран побледнел, а после – пользователь оказался на новой странице.

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

По такому принципу работают формы обратной связи: клиент нажимает на кнопку, а браузер, для показа новых данных, начинает загружать полностью новую страницу. Этот прием не всегда удобен, поэтому разработчикам приходится иметь дело с асинхронными запросами.

Они работают так:

1. Посетитель нажимает в форме обратной связи на кнопку «Отправить».
2. Браузер осуществляет запуск скрипта, который был заранее привязан к кнопке.
3. Соответствующий скрипт отправляет запрос на сервер. В качестве ответа он получает новую порцию данных. Страница перезагружаться не будет. Все происходит непосредственно внутри скрипта.
4. Скрипт просматривает ответ от сервера в клиент-серверной модели и добавляет новые данные в старую страницу.

Результатом работы будет прежняя страница, которая не перезагружается. Пользователь остается на том же месте, только с новыми данными.

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

AJAX – особенности

AJAX – это асинхронный JavaScript и XML. Он представляет собой популярную и распространенную концепцию, которая используется для обновления страницы без ее непосредственной перезагрузки. Используется не только для импорта и экспорта данных, но и для передачи любого типа информации, включая JSON.

AJAX – это асинхронная работа запросов. Он функционирует по ответу и запросу. Это значит, что AJAX запрашивает у сервера что-либо, а сервер возвращает клиенту AJAX-ответа.

Для отправки ответов и получения запросов AJAX в JavaScript предусматривает отдельный объект. Он встроен в упомянутый язык программирования и носит название XMLHttpRequest.

Преимущества и недостатки

К преимуществам AJAX можно отнести:

1. Удобство для посетителя и быстрый интерфейс. Моментальное обновление данных на одной и той же странице видеть удобнее, чем загружать новые данные и новые страницы.
2. Рациональный расход трафика. Он расходуется намного меньше, чем при синхронных запросах. Если нужно отобразить новые данные, браузер получает с серверной части клиент-серверной модели не всю страницу целиком, а только то, чего нет на исходной страничке.
3. Возможность снижения нагрузки на сервер. Это актуально для ситуаций, при которых сайт формирует все страницы на лету. В качестве примера можно привести сервисы, написанные на PHP. В этом случае один раз можно загрузить все «базовые» элементы страницы (шапку, подвал, меню), а остальное – подгружать по мере необходимости. Меньше данных в исходном запросе – быстрее ответ от сервера и информационной базы.
4. Повышение отзывчивости и быстродействия. Это связано с предыдущим преимуществом. При использовании AJAX-запросов нет необходимости в обновлении и перезагрузке всей страницы. Достаточно подгрузить дополнительное содержимое отдельно взятых блоков.

Недостатки рассматриваемого способа передачи данных тоже есть. К ним относят:

1. Необходимость включать JavaScript. Если его деактивировать в браузере, то ничего не произойдет. Данные с сервера приходить не будут. Интерактивности на странице добиться не получится.
2. Отсутствие поддержки у поисковых движков. Они просто не видят AJAX-контент. Если содержимое формируется на AJAX-запросах, то поисковые системы не смогут его увидеть. Это связано с тем, что поисковики изначально просматривают исходный код веб-сервиса. То, что приходит с сервера, им не доступно. Для поисковой оптимизации сервисы, написанные с AJAX, подойдут не лучшим образом.
3. Рост сложности исходного проекта. Работа с AJAX-запросами требует определенных навыков в области программирования. Это нужно для предупреждения нештатных ситуаций и их заблаговременной обработки. Новичкам с AJAX-запросами работать бывает проблематично.
4. Сбои и неполадки при нестабильной связи. Если Интернет работает с перебоями, AJAX может не дождаться ответа от серверной части. Также допустимо, что в подобной ситуации AJAX-запрос может быть так и не отправлен. Логика работы страницы в этом случае может нарушиться. Соответствующая ситуация приведет к необходимости полностью перезагружать страницу и начинать работу с нуля.

Теперь можно более подробно изучить AJAX. Этот вариант обработки запросов пользуется огромной популярностью, несмотря на свои недостатки.

Основные свойства и методы

Для работы с AJAX-запросами у JS есть объект XMLHttpRequest. Он поддерживает свойства и методы для формирования и функционирования асинхронных запросов:

1. New XMLHttpRequest. Используется для создания нового объекта. С его помощью можно отправлять запросы и получать ответы в клиент-серверных моделях.
2. Open(). Метод, который указывает на запрос. Принимает разнообразные параметры. К ним относят GET и POST, а также расположение файла сервера и другие.
3. Send(). Используется для непосредственной отправки запроса на сервер. Включает в себя строку в качестве параметра, если для запросов используется POST.
4. Onload. Свойство XMLHttpRequest, которое используется для определения функции, вызываемой при полной загрузке данных.
5. Onreadystatechange. Свойство, используемое для определения функции, вызываемой при изменении состояния готовности.
6. Readystate. Используется для представления статуса запроса. Может включать в себя одно из 5 значений (от 0 до 4 включительно). Каждое из них имеет разную интерпретацию. 0 используется для отображения неинициализированного запроса, 1 – для установки соединения с сервером, 2 – для получения запроса, 3 – для отображения обработки запроса, 4 – для завершения запроса.
7. Status. Свойство, которое используется для представления номера состояния любого запроса.
8. responseText. Свойство, помогающее вернуть данные ответа от сервера в виде строки.

Все это поможет лучше понять AJAX send data.

Примеры запросов

Изученные свойства и методы AJAX помогут лучше разобраться с формированием запросов в клиент-серверных моделях. Вот код, который поможет получить данные из файла сервера при помощи AJAX. Файл сервера здесь в JSON-формате:

Тут JS-объект будет преобразован в JSON, а потом соответствующие данные передадутся на серверную часть. На стороне сервера они преобразуются в язык серверной части.

А вот пример, показывающий использование JSON.stringify() для преобразования объектов JS в JSON-формат:

Лучше изучить работу с AJAX send JSON помогут дистанционные компьютерные курсы. На них могут научить веб-программированию с нуля, а также дать более глубокие знания по тем или иным вопросам разработки.

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!