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>Асинхронная работа</a><ul><li><a>Особенности асинхронных "команд"</a></li>

4 </ul></li>

5 <li><a>AJAX - это…</a></li>

6 <li><a>Объект XHR</a></li>

7 <li><a>Что можно сделать при помощи XHR</a></li>

8 <li><a>Как получить данные</a><ul><li><a>Обработка ответа</a></li>

9 </ul></li>

10 <li><a>Отправка данных</a></li>

11 <li><a>Методы abort, send и open</a></li>

12 </ul>JavaScript - распространенный язык программирования. Он используется преимущественно для создания сайтов, а также веб-сервисов. Обладает простым и понятным синтаксисом, а также разнообразными инструментами и библиотеками.

13 Веб-разработку трудно представить без синхронных и асинхронных запросов. Далее предстоит изучить их более подробно. Особое внимание необходимо уделить такому объекту как XHR. Он позволит разрабатывать веб-сайты максимально эффективно. Данный объект имеет множество особенностей. Представленная ниже информация поможет увидеть разницу в синхронных и асинхронных "командах". Она также позволит понять, что собой представляет XHR и пояснить основные методы работы с соответствующим объектом.

14 <h2>Синхронный запрос</h2>

15 Работа в Интернете базируется на обработке разнообразных запросов - как от клиентской стороны, так и от серверной. При получении запроса от на сервер ведется их обработка системой с последующим выводом результатов (ответов) клиенту. Соответствующие "команды" могут работать несколькими способами: синхронно и асинхронно.

16 Синхронный запрос является наиболее распространенным. Он может называться обычным для веб-приложений и страниц в Интернете. Он работает по следующей схеме:

17 <ol><li>Человек заполняет на сайте форму обратной связи. Он нажимает на кнопку, отвечающую за отправку соответствующей анкеты на сервер.</li>

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

19 <li>Сервер получает запрос и обрабатывает его. Результатом станет новая веб-страница. Он направляется браузеру.</li>

20 <li>Интернет-обозреватель получает ответ с серверной стороны, а затем загружает веб-страницу с нуля. </li>

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

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

23 <h3>Особенности синхронного запроса</h3>

24 О синхронных запросах необходимо запомнить следующее:

25 <ul><li>подавляющая часть любого программного кода на JavaScript является синхронной;</li>

26 <li>выполнение синхронного кода осуществляется строчка за строчкой;</li>

27 <li>каждая строка кода будет ждать, пока завершится выполнение предыдущей строки;</li>

28 <li>длительные операции блокируют реализацию приложения/запроса.</li>

29 </ul>Несмотря на распространение данного принципа работы запросов, существует еще один вариант их функционирования. Для этого AJAX использует специальный объект - XHR (XMLHttpRequest). Далее он будет рассмотрен более подробно, как и еще один способ обработки запросов в клиент-серверных моделях.

30 <h2>Асинхронная работа</h2>

31 Второй вариант работы AJAX-requests - асинхронно. Они не загружают новую информацию с новой страницей полностью. Вместо этого после отправки той или иной команды на серверную сторону обновится только часть данных - недостающий информационный блок. Он будет добавлен на уже открытую страницу, после чего выведен на экран пользователю. Сайт при использовании асинхронных AJAX-запросов не перезагружается.

32 Чтобы лучше понимать принцип их функционирования, рекомендуется рассмотреть наглядный пример работы соответствующего типа "команд":

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

34 <li>Браузерная сторона запускает специальный скрипт. Он заранее привязывается разработчиком к кнопке.</li>

35 <li>Скрипт отправляет запрос на сторону сервера. Ответом будет новый блок информации. Страница, открытая у пользователя в браузере, перезагружаться не станет. Все операции происходят в пределах заданного скрипта.</li>

36 <li>Скрипт просмотрит ответ от сервера и внедрит новую информацию в старую страницу в Интернете.</li>

37 </ol>На сайте при использовании XHR появляются лишь обновленные данные. Сама страница обновлению не подлежит.

38 Асинхронные "команды" используются повсеместно. К ним можно отнести: добавление новой продукции в Интернет-магазин, показ статуса заказа в службе доставки в режиме реального времени, сворачивание видео в небольшой плеер в углу веб-сайта, получение списка новых сообщений в онлайн-чате без его непосредственного обновления.

39 <h3>Особенности асинхронных "команд"</h3>

40 При изучении XHR request необходимо помнить следующее:

41 <ul><li>асинхронно - это значит "не одновременно";</li>

42 <li>асинхронный код будет запускаться только после того как выполняемая в "фоновом режиме" задача подойдет к концу (завершится);</li>

43 <li>асинхронный код - это неблокирующий код;</li>

44 <li>поток выполнения не будет ждать завершения асинхронной операции;</li>

45 <li>callback-функции не делают исходный код асинхронным.</li>

46 </ul>Асинхронная обработка "команд" дает возможность избежать задержки в процессе работы веб-портала. Пользователям не придется ожидать ответа от серверной стороны. Они смогут продолжать выполнение различных действий в пределах имеющейся веб-страницы.

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

48 <h2>AJAX - это…</h2>

49 При изучении XHR необходимо пользоваться AJAX-запросами (Asynchronous JavaScript and XML). Так называется подход к реализации интерактивных пользовательских интерфейсов веб-программ. Он включает в себя клиентский скрипт, который запускается в браузере и обменивается информацией с веб-сервером.

50 AJAX - это технология отправки запросов. Она встречается в большинстве современных приложений. AJAX-приложение может использовать XML для отправки данных. Он также предусматривает работу с JSON и простым текстом.

51 Чаще всего браузер при работе с соответствующей технологией использует объект XMLHttpRequest (XHR). Он отвечает за асинхронную отправку и получение информации на веб-сервер и с него в фоновом режиме. Страница, с которой взаимодействует пользователь, не блокируется. На работу с клиентской стороны также не оказывается никакого воздействия.

52 XMLHttpRequest (XHR) - это способ, которым веб-страница способна запрашивать данные с сервера без перезагрузки. С его помощью получается сделать сайты быстрыми и умными. Отправка и получение информации осуществляется без создания помех тому, что уже отображается на экране.

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

54 XHR - инструмент, делающий разработку более простой и эффективной. С его помощью получится создать веб-порталы, которые быстро реагируют на пользовательские действия. Он был изобретен корпорацией Microsoft в начале 90-х годов.

55 XHR, несмотря на слово XML в названии рассматриваемого объекта, способен работать с любыми данными текстового формата, включая бинарные. Далее этот инструмент разработки будет рассмотрен более подробно.

56 <h2>Что можно сделать при помощи XHR</h2>

57 Все современные Интернет-обозреватели поддерживают наличие встроенного объекта XHR. Он используется для запроса информации с серверной стороны. С XHR можно выполнять разнообразные операции:

58 <ul><li>обновлять веб-страницы, не перезагружая их полностью;</li>

59 <li>запрашивать данные с сервера после загрузки веб-портала;</li>

60 <li>получать информацию от сервера - тоже после загрузки соответствующей страницы;</li>

61 <li>отправлять данные на сервер в фоновом режиме.</li>

62 </ul>Использовать XHR-запросы не очень трудно. Далее предстоит познакомиться с ними на наглядных примерах. Они помогут быстрее разобраться в реализациях асинхронных "команд" в клиент-серверных моделях.

63 <h2>Как получить данные</h2>

64 Первая операция, с которой предстоит познакомиться - это получение данных. Для этого необходимо создать новый XHR-объект. Делается это через экземпляр XMLHttpRequest. Его синтаксическая форма выглядит так:

65 const xhr = new XMLHttpRequest();

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

67 Теперь необходимо подготовить запрос к отправке. Для этого задействуют два аргумента:

68 <ul><li>используемый HTTP-метод;</li>

69 <li>URL, на который необходимо направить сформированный запрос.</li>

70 </ul>В качестве адреса, получающего запрос, нужно воспользоваться следующей строкой:

71 xhr.open (‘GET’, ‘https: reqres.in/api/users’)

72 Теперь можно воспользоваться предварительно настроенным запросом и отправить его на обработку:

73 xhr.open

74 Ответ от серверной стороны получен - его требуется обработать.

75 <h3>Обработка ответа</h3>

76 XHR поддерживает несколько способов прослушивания onload-событий:

77 <ul><li>xhr.addEventListener (“load”, reqListener);</li>

78 <li>xhr.onload = () => { };</li>

79 </ul>Далее работа будет осуществляться со вторым методом прослушивания событий. Это связано с тем, что он обладает большей поддержкой современных браузеров.

80 Onload в XHR сработает, когда пользователь получит ответ для дальнейшего получения данных. Зарегистрировать его предлагается при помощи следующей конструкции:

81 xhr.onload = () => { console.log(xhr.response);};

82 В соответствующем случае в журнале консоли будет распознано множество информации. Она печатается в виде строки, но на самом деле представляет собой JSON. Для преобразования этого ответа в объект JavaScript и дальнейшего управления им необходимо воспользоваться следующей конструкцией:

83 Еще один способ проанализировать ответ JSON - это установить для атрибута responseType значение "json":

84 А вот пример полного блока кода, отвечающего за принятие ответа от сервера и его дальнейшую обработку:

85 Существуют и другие XHR-запросы. Кроме получения данных основной используемой командой в асинхронной работе клиент-серверной модели является отправка информации на серверную сторону.

86 <h2>Отправка данных</h2>

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

88 <ul><li>работу пользователя;</li>

89 <li>пользовательское имя;</li>

90 <li>иные данные о человеке.</li>

91 </ul>Для отправки данных тоже используется new XMLHttpRequest. Вместо GET в формируемой "команде" при вызове xhr.open() необходимо задействовать метод POST. С его помощью получится установить URL-адрес для запроса и добавить информацию для пользователя, которого хочется создать в системе:

92 В ходе обработки соответствующей операции reqres.ini ответит на запрос со статусом 2xx. Далее он отправит дополнительную информацию об успешном создании пользователя. Выглядеть результат обработки XHR будет так:

93 Существуют и другие методы, используемые при управлении потоком запроса.

94 <h2>Методы abort, send и open</h2>

95 Open - основной метод, работающий с запросами new XMLHttpRequest. Он был приведен ранее. Общая форма его представления имеет следующий вид:

96 open(method, URL, async, user, password)

97 Здесь:

98 <ol><li>Method - это HTTP-метод. Обычно для работы с XHR используется GET или POST. Реже - PUT, DELETE, TRACE.</li>

99 <li>URL - адрес запроса. Тут допускается использование разнообразных протоколов, но помня об ограничениях безопасности. Они указывают на то, что запрос со страницы может быть отправлен только на тот же протокол://домен:порт, с которого он пришел.</li>

100 <li>Async - тип запроса. Если этот параметр имеет значение false, работать код будет синхронно. True указывает на синхронную работу.</li>

101 <li>User, password - логин и пароль для HTTP-авторизации. Может отсутствовать.</li>

102 </ol>При использовании метода open обязательными выступают только первые два аргумента. А сама по себе эта операция не открывает соединение. За соответствующую операцию отвечает send().

103 Метод send() имеет простую структуру:

104 Send(body)

105 Используется этот метод для отправки запроса на сервер. Body - это тело формируемого запроса. Не у всякой отправляемой "команды" оно есть. Примером может послужить GET-запрос. Если у него отсутствует тело, осуществляется передача пустой строки или null. А в POST основная информация передается именно через body.

106 Еще один метод, который пригодится при работе с new XMLHttpRequest - это abort(). Данная операция позволяет прервать выполнение запроса.

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

108