Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Определение формата и его устройство</a><ul><li><a>Синтаксис</a></li>

2 </ul></li>

3 <li><a>Как работать с JSON</a><ul><li><a>Где объявлять Content-Type</a><ul><li><a>Типы носителей</a></li>

4 <li><a>Браузеры и информация Content-Type</a></li>

5 </ul></li>

6 <li><a>Грамотный выбор Content-Type</a><ul><li><a>MIME application/json - особенности</a></li>

7 <li><a>MIME application/javascript</a></li>

8 </ul></li>

9 </ul></li>

10 <li><a>Принцип работы Content-Type в HTML</a></li>

11 </ul><p>JSON - текстовый формат обмена данными. Элемент, который широко используется в клиент-серверных моделях и различных запросах. Он базируется на JavaScript. JSON - формат, который легко читается и понимается людьми. Он был разработан Дугласом Крокфордом.</p>

12 <p>JSON - это независимый язык, несмотря на то, что он произошел от JavaScript. Может широко использоваться практически любым языком программирования. Для большинства из них поддерживаются готовые кодовые фрагменты для создания и обработки информации в JSON-формате.</p>

13 <p>Далее предстоит изучить этот элемент более подробно. Необходимо поближе познакомиться с упомянутым форматом, а также разобраться с его ключевыми особенностями и синтаксисом. Отдельное внимание предстоит уделить заголовкам JSON и определению типа контента для соответствующего формата. Представленная далее информация пригодится как разработчикам-новичкам, так и их более опытным коллегам.</p>

14 <h2>Определение формата и его устройство</h2>

15 <p>JSON - это формат передачи данных на сервер и обратно. Чтобы лучше понимать его формат, необходимо рассмотреть наглядный пример: пусть имеется магазин с бонусной программой. Бонусы начисляются пользователю (покупателю) при помощи специальной скидочной карты. Когда продавец считывает его, он получает от сервера следующую информацию:</p>

16 <ul><li>фамилию;</li>

17 <li>имя;</li>

18 <li>отчество;</li>

19 <li>телефон;</li>

20 <li>город;</li>

21 <li>возраст;</li>

22 <li>количество накопленных баллов;</li>

23 <li>три предыдущие покупки (чтобы можно было предложить к ним что-нибудь дополнительно).</li>

24 </ul><p>Вот соответствующий ответ в JSON-формате:</p>

25 <p>Общим правилом формирования ответа является следующий принцип: сначала пишется название того или иного поля, а через двоеточие - его значение. Названия необходимо оформлять в двойных кавычках, как и строковые значения.</p>

26 <p>Также необходимо помнить, что:</p>

27 <ul><li>вложенные объекты оформляются в фигурных скобках;</li>

28 <li>прямоугольные скобки используются для оформления массивов;</li>

29 <li>после каждой пары "свойство: значение" необходимо ставить запятую (в самом конце она не ставится).</li>

30 </ul><p>JSON - это универсальный формат передачи данных. Он используется большим количеством современных популярных языков программирования.</p>

31 <h3>Синтаксис</h3>

32 <p>JSON - это одна из двух структур, представленных в закодированной форме:</p>

33 <ol><li>Набор "ключ: значение". Разные языки программирования реализовывают соответствующую пару различными способами: как записи, словари, хеш-таблицы, списки с ключами, ассоциативные массивы, а также различные структуры. В виде ключа допустимо использовать только строки, а значение - любая форма. Повторение ключей разрешены, но не рекомендуются стандартом. Обработка таких ситуаций непредсказуема и осуществляется на усмотрение каждого отдельно взятого программного обеспечения.</li>

34 <li>Упорядоченный набор значений. У большинства языков программирования он представлен последовательностями, списками, векторами и массивами.</li>

35 </ol><p>Структуры данных, используемые JSON-форматом, поддерживаются любым современным языком разработки. Это позволяет задействовать формат для информационного обмена между различными языками программирования и программными системами.</p>

36 <p>В качестве значений JSON-допускает использование:</p>

37 <ol><li>Записей. Они представляют собой неупорядоченное множество пар "ключ: значение", заключенное в фигурные скобки. Ключ описывается при помощи строки, между ним и значением ставится символ двоеточия. Отделяются соответствующие пары друг от друга при помощи запятых.</li>

38 <li>Одномерных массивов. Это упорядоченное множество значений. Массивы заключаются в квадратные скобки, а их значения разделяются при помощи запятых. Соответствующие элементы могут быть пустыми. Значения в пределах одного и того же массива могут обладать разными типами.</li>

39 <li>Чисел - целых или вещественных.</li>

40 <li>Литералов - true, false или null.</li>

41 <li>Строк. Это упорядоченные множества из нуля или более символов в Unicode. Заключаются они в двойные кавычки. Символы могут быть указаны при помощи escape-последовательностей, которые начинаются с обратной косой черты. Они также записываются шестнадцатеричным кодом в кодировке Unicode в виде \uFFFF.</li>

42 </ol><p>Строки напоминают литералы одноименного типа в JavaScript. Числа - JavaScript-числа, за исключением того, что используется только десятичный формат (с точкой в виде разделителя). Пробелы ставятся только между любыми двумя синтаксическими компонентами.</p>

43 <p>Для работы с JSON-форматом поддерживаются две команды:</p>

44 <ul><li>JSON.stringify() - для перевода объекта в JSON-строку, которая может быть отправлена на сервер;</li>

45 <li>JSON.parse() - для разбора JSON-данных на составляющие и отправку в них необходимых объектов или переменных.</li>

46 </ul><p>Также необходимо помнить о том, что каждый Интернет-ресурс имеет свой собственный тип носителя. Браузер должен знать его. Это необходимо для правильной и эффективной обработки данных. То же самое касается серверной части модели. Сервер должен знать тип отправляемых ему ресурсов для точного анализа и дальнейшей их обработки. Далее Content-Type application JSON будет рассмотрен более подробно. Это один из наиболее важных моментов при работе с изучаемым текстовым форматом.</p>

47 <h3>Где объявлять Content-Type</h3>

48 <p>Content-Type используется для указания типа носителя любого ресурса. Эта информация прописывается в свойствах header запроса JSON - на клиентской стороне, при непосредственной отправке сформированного запроса. Также допускается указание Content-Type в заголовке ответа на серверной стороне - тогда, когда клиенту направляется ответ.</p>

49 <p>Если тип контента ресурса не определен, клиент (браузер) может попытаться автоматически определить его. Результат обычно непредсказуем и неточен. Именно поэтому разработчику необходимо всегда объявлять тип носителя ресурса.</p>

50 <h4><em>Типы носителей</em></h4>

51 <p>Носители могут быть представлены различными формами:</p>

52 <ul><li>приложениями (application);</li>

53 <li>аудиозаписями (audio);</li>

54 <li>текстом (text);</li>

55 <li>шрифтами (font);</li>

56 <li>"примерами" (example);</li>

57 <li>изображениями (image);</li>

58 <li>моделями (model);</li>

59 <li>смешанным типом (multipart);</li>

60 <li>сообщениями (message);</li>

61 <li>видео (video).</li>

62 </ul><p>Данные категории тоже предусматривают собственными типы. Пример - content-type application/json - это подтип application, а text/html - подтип text.</p>

63 <h4><em>Браузеры и информация Content-Type</em></h4>

64 <p>Браузеры (клиенты) должны знать, какой тип контента будет им получен. Вот пример, демонстрирующий соответствующую ситуацию. Этот фрагмент представляет собой Node-сервер. Он занимается обслуживанием HTML-файла:</p>

65 <p>Здесь необходимо обратить внимание на index.html, который обслуживается, а также на его Content-Type JSON с расширением text/css. Вот то, что содержится в index.html:</p>

66 <p>HTML-документ отличается от CSS-документа. При запуске сервера localhost:5000 на экране появится следующий результат:</p>

67 <p>Подтвердить полученный ответ можно при помощи проверки заголовков во вкладке сети в DevTools.</p>

68 <p>Браузер будет получать контент в виде CSS-типа, поэтому он попытается произвести соответствующую обработку. Нужно также помнить о том, что полное значение Content-Type, получаемого браузером, снижает уязвимости безопасности. Это связано с тем, что клиенты (Интернет-обозреватели) хорошо знают, какие стандарты безопасности использовать для тех или иных данных.</p>

69 <h3>Грамотный выбор Content-Type</h3>

70 <p>JSON необходимо правильно интерпретировать в браузерах. Для этого требуется определить тип контента, обрабатываемого на клиентской стороне.</p>

71 <p>Text/plain обычно используется для JSON. Официальным типом MIME для рассматриваемого формата является Content-Type application/json. Это значит, что при отправке JSON на сервер или получении соответствующего ответа, нужно всегда объявлять заголовок Content-Type. Данная особенность связано с тем, что application/json является стандартом, который понимает как клиент, так и сервер в клиент-серверных моделях.</p>

72 <h4><em>MIME application/json - особенности</em></h4>

73 <p>Данный формат используется тогда, когда неизвестно, как планируется использовать имеющуюся информацию. Когда сведения необходимо просто извлечь с сервера в JSON-формате, они могут быть получены при помощи ссылок или из любого подходящего файла. Клиентская сторона получает информацию только в JSON-формате. Он может использоваться в виде ссылки на данные, а также форматироваться в режиме реального времени через внешнюю среду.</p>

74 <p>Выше можно увидеть пример с PHP, в котором MIME-типом выступает application/json. Он просто извлекает словарь из заданной переменной, а потом помещает его в JSON-формат и выводит его.</p>

75 <h4><em>MIME application/javascript</em></h4>

76 <p>Этот формат применяется тогда, когда использование информации предопределено. Он встречается в приложениях, в которых поддерживаются вызовы клиентских AJAX-программ. Application/javascript используется, если данные имеют тип JSON-P или JSONP.</p>

77 <p>Нотация JSONP-объектов или JavaScript с дополнением - то, что используется при заключении API в вызов функции. Функция будет определена в коде JS на клиентской стороне, а API - передаваться ей в качестве параметра. Это приводит к тому, что соответствующая операция действует подобно исполняемому JS-коду.</p>

78 <p>В этом примере MIME-тип - это application/javascript. Он извлекает словарь из имеющейся переменной, преобразовывает информацию в JSON-формат и отправляет его в виде параметра при вызове функции на клиентской стороне.</p>

79 <p>Эксперты рекомендуют использоваться именно type application/json вместо application/javascript, поскольку JSON-данные не рассматриваются как JS-код. Это универсальный стандарт.</p>

80 <h2>Принцип работы Content-Type в HTML</h2>

81 <p>С основами MIME удалось ознакомиться. Теперь можно рассмотреть принципы работы Content-Type в HTML простым языком.</p>

82 <p>Если клиент отправляет header Content-Type в запросе, он сообщит серверу, что данные в теле сформированного запроса были отформатированы определенным образом.</p>

83 <p>Если клиент хочет отправить на серверную сторону JSON-данные, необходимо запомнить следующий алгоритм:</p>

84 <ol><li>Необходимо установить Content-Type header application/json в запросе.</li>

85 <li>Когда сервер получит запрос, он сначала проверит, может ли он распознать соответствующий формат. Если да - получится прочитать получаемую информацию.</li>

86 <li>Точно также принцип работает тогда, когда сервер отправляет клиенту ответ - он устанавливает Content-Type, чтобы сообщить клиентской стороне принципы чтения тела ответа.</li>

87 <li>Если клиент может общаться только в одном формате данных, он выдаст ошибку при наличии в ответе от сервера "несовместимой" информации. Исправить ситуацию поможет второй HTTP-заголовок.</li>

88 <li>HTTP-заголовок Accept используется, чтобы сообщать серверу, какие форматы данных он сможет принимать.</li>

89 <li>Если установить для Accept значение "application/json", сервер будет отправлять ответы в JSON-формате.</li>

90 <li>Если сервер не поддерживает формат, который был ранее запрошен клиентом, он сможет направить на клиентскую сторону характерное сообщение об ошибке. Эта информация поможет понять, что присланная команда работать не будет.</li>

91 </ol><p>За счет заголовков Content-Type и Accept клиент и сервер способны обрабатывать различные форматы данных. А лучше понимать принципы функционирования клиент-серверных моделей помогут дистанционные компьютерные курсы.</p>

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