JavaScript – распространенный язык программирования. Он используется преимущественно для создания сайтов, а также веб-сервисов. Обладает простым и понятным синтаксисом, а также разнообразными инструментами и библиотеками.
Веб-разработку трудно представить без синхронных и асинхронных запросов. Далее предстоит изучить их более подробно. Особое внимание необходимо уделить такому объекту как XHR. Он позволит разрабатывать веб-сайты максимально эффективно. Данный объект имеет множество особенностей. Представленная ниже информация поможет увидеть разницу в синхронных и асинхронных «командах». Она также позволит понять, что собой представляет XHR и пояснить основные методы работы с соответствующим объектом.
Синхронный запрос
Работа в Интернете базируется на обработке разнообразных запросов – как от клиентской стороны, так и от серверной. При получении запроса от на сервер ведется их обработка системой с последующим выводом результатов (ответов) клиенту. Соответствующие «команды» могут работать несколькими способами: синхронно и асинхронно.
Синхронный запрос является наиболее распространенным. Он может называться обычным для веб-приложений и страниц в Интернете. Он работает по следующей схеме:
- Человек заполняет на сайте форму обратной связи. Он нажимает на кнопку, отвечающую за отправку соответствующей анкеты на сервер.
- Браузер определяет нажатие на кнопку «Отправить» и понимает, что этот управляющий элемент должен отправить запрос на серверную сторону. Он пакует «команду», а затем отправляет ее на сервер.
- Сервер получает запрос и обрабатывает его. Результатом станет новая веб-страница. Он направляется браузеру.
- Интернет-обозреватель получает ответ с серверной стороны, а затем загружает веб-страницу с нуля.
Синхронность здесь заключается в том, что все данные будут отправляться на сторону сервера массово. Страница, возвращаемая клиенту, тоже обновляется полностью.
Соответствующий принцип наблюдается при работе форм обратной связи: пользователь нажимает на кнопку, а браузер для демонстрации новых данных начинает грузить новую страницу. Синхронный запрос – всего лишь один из способов работы запросов в клиент-серверной модели.
Особенности синхронного запроса
О синхронных запросах необходимо запомнить следующее:
- подавляющая часть любого программного кода на JavaScript является синхронной;
- выполнение синхронного кода осуществляется строчка за строчкой;
- каждая строка кода будет ждать, пока завершится выполнение предыдущей строки;
- длительные операции блокируют реализацию приложения/запроса.
Несмотря на распространение данного принципа работы запросов, существует еще один вариант их функционирования. Для этого AJAX использует специальный объект – XHR (XMLHttpRequest). Далее он будет рассмотрен более подробно, как и еще один способ обработки запросов в клиент-серверных моделях.
Асинхронная работа
Второй вариант работы AJAX-requests – асинхронно. Они не загружают новую информацию с новой страницей полностью. Вместо этого после отправки той или иной команды на серверную сторону обновится только часть данных – недостающий информационный блок. Он будет добавлен на уже открытую страницу, после чего выведен на экран пользователю. Сайт при использовании асинхронных AJAX-запросов не перезагружается.
Чтобы лучше понимать принцип их функционирования, рекомендуется рассмотреть наглядный пример работы соответствующего типа «команд»:
- Пользователь заполняет электронную форму обратной связи. Он нажимает на кнопку «Отправить», чтобы сформировать запрос.
- Браузерная сторона запускает специальный скрипт. Он заранее привязывается разработчиком к кнопке.
- Скрипт отправляет запрос на сторону сервера. Ответом будет новый блок информации. Страница, открытая у пользователя в браузере, перезагружаться не станет. Все операции происходят в пределах заданного скрипта.
- Скрипт просмотрит ответ от сервера и внедрит новую информацию в старую страницу в Интернете.
На сайте при использовании XHR появляются лишь обновленные данные. Сама страница обновлению не подлежит.
Асинхронные «команды» используются повсеместно. К ним можно отнести: добавление новой продукции в Интернет-магазин, показ статуса заказа в службе доставки в режиме реального времени, сворачивание видео в небольшой плеер в углу веб-сайта, получение списка новых сообщений в онлайн-чате без его непосредственного обновления.
Особенности асинхронных «команд»
При изучении XHR request необходимо помнить следующее:
- асинхронно – это значит «не одновременно»;
- асинхронный код будет запускаться только после того как выполняемая в «фоновом режиме» задача подойдет к концу (завершится);
- асинхронный код – это неблокирующий код;
- поток выполнения не будет ждать завершения асинхронной операции;
- callback-функции не делают исходный код асинхронным.
Асинхронная обработка «команд» дает возможность избежать задержки в процессе работы веб-портала. Пользователям не придется ожидать ответа от серверной стороны. Они смогут продолжать выполнение различных действий в пределах имеющейся веб-страницы.
Запрошенная информация обрабатывается в фоновом режиме. Ответ от серверной части системы обновляет страницу после поступления соответствующих данных. При задержке ответа пользователи даже не заметят этого: они будут взаимодействовать с другой частью страницы.
AJAX – это…
При изучении XHR необходимо пользоваться AJAX-запросами (Asynchronous JavaScript and XML). Так называется подход к реализации интерактивных пользовательских интерфейсов веб-программ. Он включает в себя клиентский скрипт, который запускается в браузере и обменивается информацией с веб-сервером.
AJAX – это технология отправки запросов. Она встречается в большинстве современных приложений. AJAX-приложение может использовать XML для отправки данных. Он также предусматривает работу с JSON и простым текстом.
Чаще всего браузер при работе с соответствующей технологией использует объект XMLHttpRequest (XHR). Он отвечает за асинхронную отправку и получение информации на веб-сервер и с него в фоновом режиме. Страница, с которой взаимодействует пользователь, не блокируется. На работу с клиентской стороны также не оказывается никакого воздействия.
Объект XHR
XMLHttpRequest (XHR) – это способ, которым веб-страница способна запрашивать данные с сервера без перезагрузки. С его помощью получается сделать сайты быстрыми и умными. Отправка и получение информации осуществляется без создания помех тому, что уже отображается на экране.
Соответствующий инструмент способен решить одну большую проблему при работе в Интернете – он делает сайт креативным и живым. Пользователям на странице с XHR не придется все время ждать, пока загрузится страница. Эта особенность имеет высокий уровень значимости тогда, когда необходимо обновить только часть сайта, а не весь его целиком.
XHR – инструмент, делающий разработку более простой и эффективной. С его помощью получится создать веб-порталы, которые быстро реагируют на пользовательские действия. Он был изобретен корпорацией Microsoft в начале 90-х годов.
XHR, несмотря на слово XML в названии рассматриваемого объекта, способен работать с любыми данными текстового формата, включая бинарные. Далее этот инструмент разработки будет рассмотрен более подробно.
Что можно сделать при помощи XHR
Все современные Интернет-обозреватели поддерживают наличие встроенного объекта XHR. Он используется для запроса информации с серверной стороны. С XHR можно выполнять разнообразные операции:
- обновлять веб-страницы, не перезагружая их полностью;
- запрашивать данные с сервера после загрузки веб-портала;
- получать информацию от сервера – тоже после загрузки соответствующей страницы;
- отправлять данные на сервер в фоновом режиме.
Использовать XHR-запросы не очень трудно. Далее предстоит познакомиться с ними на наглядных примерах. Они помогут быстрее разобраться в реализациях асинхронных «команд» в клиент-серверных моделях.
Как получить данные
Первая операция, с которой предстоит познакомиться – это получение данных. Для этого необходимо создать новый XHR-объект. Делается это через экземпляр XMLHttpRequest. Его синтаксическая форма выглядит так:
const xhr = new XMLHttpRequest();
Это встроенная функция конструктора в любом современном браузере. За счет нее в процессе разработки программного обеспечения не требуется добавлять в исходный код какие-либо пакеты или библиотеки.
Теперь необходимо подготовить запрос к отправке. Для этого задействуют два аргумента:
- используемый HTTP-метод;
- URL, на который необходимо направить сформированный запрос.
В качестве адреса, получающего запрос, нужно воспользоваться следующей строкой:
xhr.open (‘GET’, ‘https: reqres.in/api/users’)
Теперь можно воспользоваться предварительно настроенным запросом и отправить его на обработку:
xhr.open
Ответ от серверной стороны получен – его требуется обработать.
Обработка ответа
XHR поддерживает несколько способов прослушивания onload-событий:
- xhr.addEventListener (“load”, reqListener);
- xhr.onload = () => { };
Далее работа будет осуществляться со вторым методом прослушивания событий. Это связано с тем, что он обладает большей поддержкой современных браузеров.
Onload в XHR сработает, когда пользователь получит ответ для дальнейшего получения данных. Зарегистрировать его предлагается при помощи следующей конструкции:
xhr.onload = () => { console.log(xhr.response);};
В соответствующем случае в журнале консоли будет распознано множество информации. Она печатается в виде строки, но на самом деле представляет собой JSON. Для преобразования этого ответа в объект JavaScript и дальнейшего управления им необходимо воспользоваться следующей конструкцией:
Еще один способ проанализировать ответ JSON – это установить для атрибута responseType значение «json»:
А вот пример полного блока кода, отвечающего за принятие ответа от сервера и его дальнейшую обработку:
Существуют и другие XHR-запросы. Кроме получения данных основной используемой командой в асинхронной работе клиент-серверной модели является отправка информации на серверную сторону.
Отправка данных
При создании нового пользователя на сайте необходимо отправлять данные. Эта операция помогает указывать:
- работу пользователя;
- пользовательское имя;
- иные данные о человеке.
Для отправки данных тоже используется new XMLHttpRequest. Вместо GET в формируемой «команде» при вызове xhr.open() необходимо задействовать метод POST. С его помощью получится установить URL-адрес для запроса и добавить информацию для пользователя, которого хочется создать в системе:
В ходе обработки соответствующей операции reqres.ini ответит на запрос со статусом 2xx. Далее он отправит дополнительную информацию об успешном создании пользователя. Выглядеть результат обработки XHR будет так:
Существуют и другие методы, используемые при управлении потоком запроса.
Методы abort, send и open
Open – основной метод, работающий с запросами new XMLHttpRequest. Он был приведен ранее. Общая форма его представления имеет следующий вид:
open(method, URL, async, user, password)
Здесь:
- Method – это HTTP-метод. Обычно для работы с XHR используется GET или POST. Реже – PUT, DELETE, TRACE.
- URL – адрес запроса. Тут допускается использование разнообразных протоколов, но помня об ограничениях безопасности. Они указывают на то, что запрос со страницы может быть отправлен только на тот же протокол://домен:порт, с которого он пришел.
- Async – тип запроса. Если этот параметр имеет значение false, работать код будет синхронно. True указывает на синхронную работу.
- User, password – логин и пароль для HTTP-авторизации. Может отсутствовать.
При использовании метода open обязательными выступают только первые два аргумента. А сама по себе эта операция не открывает соединение. За соответствующую операцию отвечает send().
Метод send() имеет простую структуру:
Send(body)
Используется этот метод для отправки запроса на сервер. Body – это тело формируемого запроса. Не у всякой отправляемой «команды» оно есть. Примером может послужить GET-запрос. Если у него отсутствует тело, осуществляется передача пустой строки или null. А в POST основная информация передается именно через body.
Еще один метод, который пригодится при работе с new XMLHttpRequest – это abort(). Данная операция позволяет прервать выполнение запроса.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
