Rivalry2

HTML Diff

2 added 2 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>JSON - определение</a><ul><li><a>Преимущества и недостатки</a></li>

2 <li><a>Синтаксис</a></li>

3 </ul></li>

4 <li><a>Асинхронные запросы - это…</a></li>

5 <li><a>AJAX - особенности</a><ul><li><a>Преимущества и недостатки</a></li>

6 <li><a>Основные свойства и методы</a></li>

7 </ul></li>

8 <li><a>Примеры запросов</a></li>

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

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

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

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

13 <h3>Преимущества и недостатки</h3>

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

15 <p>К преимуществам JSON можно отнести:</p>

16 <ul><li>простоту записи и чтения;</li>

17 <li>гибкие возможности описания информационной структуры;</li>

18 <li>удобство в плане передачи данных по сети;</li>

19 <li>поддержку огромным количеством языков программирования и платформ.</li>

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

21 <p>К недостаткам данного элемента можно отнести:</p>

22 <ul><li>сложности при сжатии информации;</li>

23 <li>отсутствие поддержки типов данных даты и времени;</li>

24 <li>отсутствие комментариев;</li>

25 <li>отсутствие возможности сообщения о кодировке текстовой строки - кодировать можно только в UTF-8, а также в UTF-16 и UTF-32, но с порядком следования байт BE и LE.</li>

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

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

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

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

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

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

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

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

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

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

36 <li>Литералы. К ним относят логическую истину (true) и ложь (false). Также сюда можно отнести null.</li>

37 <li>Строки. Так называется упорядоченное множество из нуля или более символов Юникода. Соответствующая запись заключается в двойные кавычки. Символы в строках могут указываться при помощи escape-последовательностей, которые начинаются с обратной косой черты, а также выражаться шестнадцатеричным кодом в кодировке Unicode в виде \uFFF.</li>

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

39 <h2>Асинхронные запросы - это…</h2>

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

41 <ol><li>Пользователь нажимает в форме обратной связи кнопку "Отправить".</li>

42 <li>Браузер распознает, что по кнопке требуется направить запрос на серверную часть модели. Он пакует соответствующую команду и отправляет ее.</li>

43 <li>Сервер получает запрос.</li>

44 <li>Запрос обрабатывается серверной частью клиент-серверной модели, а затем предоставляется ответ в виде новой веб-страницы.</li>

45 <li>Браузер загружает сайт (страницу) с нуля. На ней уже есть все необходимые пользователю данные, но возникает ощущение "вспышки": когда человек был на одной странице, затем - экран побледнел, а после - пользователь оказался на новой странице.</li>

46 </ol><p>Синхронность в приведенном примере заключается в том, что все имеющиеся данные "кучей" отправляются на серверную часть модели, а затем вся страница возвращается пользователю с тем же количеством данных.</p>

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

48 <p>Они работают так:</p>

49 <ol><li>Посетитель нажимает в форме обратной связи на кнопку "Отправить".</li>

50 <li>Браузер осуществляет запуск скрипта, который был заранее привязан к кнопке.</li>

51 <li>Соответствующий скрипт отправляет запрос на сервер. В качестве ответа он получает новую порцию данных. Страница перезагружаться не будет. Все происходит непосредственно внутри скрипта.</li>

52 <li>Скрипт просматривает ответ от сервера в клиент-серверной модели и добавляет новые данные в старую страницу.</li>

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

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

55 <h2>AJAX - особенности</h2>

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

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

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

59 <h3>Преимущества и недостатки</h3>

60 <p>К преимуществам AJAX можно отнести:</p>

61 <ol><li>Удобство для посетителя и быстрый интерфейс. Моментальное обновление данных на одной и той же странице видеть удобнее, чем загружать новые данные и новые страницы.</li>

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

63 <li>Возможность снижения нагрузки на сервер. Это актуально для ситуаций, при которых сайт формирует все страницы на лету. В качестве примера можно привести сервисы, написанные на PHP. В этом случае один раз можно загрузить все "базовые" элементы страницы (шапку, подвал, меню), а остальное - подгружать по мере необходимости. Меньше данных в исходном запросе - быстрее ответ от сервера и информационной базы.</li>

64 <li>Повышение отзывчивости и быстродействия. Это связано с предыдущим преимуществом. При использовании AJAX-запросов нет необходимости в обновлении и перезагрузке всей страницы. Достаточно подгрузить дополнительное содержимое отдельно взятых блоков.</li>

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

66 <ol><li>Необходимость включать JavaScript. Если его деактивировать в браузере, то ничего не произойдет. Данные с сервера приходить не будут. Интерактивности на странице добиться не получится.</li>

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

68 - <li>Рост сложности исходного проекта. Работа с AJAX-запросами требует определенных навыков в области программирования. Это нужно для предупреждения нештатных ситуаций и их заблаговременной обработки. Новичкам с AJAX-запросами работать бывает проблематично.</li>

68 + <li>Рост сложности исходного проекта. Работа с AJAX-запросами требует определенных навыков в области п��ограммирования. Это нужно для предупреждения нештатных ситуаций и их заблаговременной обработки. Новичкам с AJAX-запросами работать бывает проблематично.</li>

69 <li>Сбои и неполадки при нестабильной связи. Если Интернет работает с перебоями, AJAX может не дождаться ответа от серверной части. Также допустимо, что в подобной ситуации AJAX-запрос может быть так и не отправлен. Логика работы страницы в этом случае может нарушиться. Соответствующая ситуация приведет к необходимости полностью перезагружать страницу и начинать работу с нуля.</li>

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

71 <h3>Основные свойства и методы</h3>

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

73 <ol><li>New XMLHttpRequest. Используется для создания нового объекта. С его помощью можно отправлять запросы и получать ответы в клиент-серверных моделях.</li>

74 - <li>Open(). Метод, который ��казывает на запрос. Принимает разнообразные параметры. К ним относят GET и POST, а также расположение файла сервера и другие.</li>

74 + <li>Open(). Метод, который указывает на запрос. Принимает разнообразные параметры. К ним относят GET и POST, а также расположение файла сервера и другие.</li>

75 <li>Send(). Используется для непосредственной отправки запроса на сервер. Включает в себя строку в качестве параметра, если для запросов используется POST.</li>

76 <li>Onload. Свойство XMLHttpRequest, которое используется для определения функции, вызываемой при полной загрузке данных.</li>

77 <li>Onreadystatechange. Свойство, используемое для определения функции, вызываемой при изменении состояния готовности.</li>

78 <li>Readystate. Используется для представления статуса запроса. Может включать в себя одно из 5 значений (от 0 до 4 включительно). Каждое из них имеет разную интерпретацию. 0 используется для отображения неинициализированного запроса, 1 - для установки соединения с сервером, 2 - для получения запроса, 3 - для отображения обработки запроса, 4 - для завершения запроса.</li>

79 <li>Status. Свойство, которое используется для представления номера состояния любого запроса.</li>

80 <li>responseText. Свойство, помогающее вернуть данные ответа от сервера в виде строки.</li>

81 </ol><p>Все это поможет лучше понять AJAX send data.</p>

82 <h2>Примеры запросов</h2>

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

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

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

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

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