Как отправить http-запрос в браузере

Обновлено: 21.11.2024

Познакомьтесь с веб-запросами и Fetch API, чтобы упростить отправку и получение данных!

Для этого запроса сервер может вернуть следующее:

Это происходит много раз, и все это полностью поддерживается в JavaScript! Эта возможность асинхронно запрашивать и обрабатывать данные с сервера, не требуя навигации/перезагрузки страницы, имеет термин. Этот термин — Ajax (или AJAX, если хотите кричать). Эта аббревиатура означает асинхронный JavaScript и XML, и если несколько лет назад вы работали с веб-разработчиками, Ajax был модным словом, которое все использовали для описания того типа веб-приложений, которые мы считаем само собой разумеющимся сегодня — таких приложений, как Twitter, Facebook, Google Maps, Gmail и другие сервисы, которые постоянно извлекают данные по мере того, как вы взаимодействуете со страницей, не требуя полной перезагрузки страницы!

Пример

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

Познакомьтесь с Фетч

Погружение в код

Если вы хотите продолжить, создайте новый HTML-документ и добавьте в него следующую разметку:

Внутри тега script добавьте следующий код, составляющий наш веб-запрос:

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

Это что-то! Теперь, когда наш IP-адрес отображается на нашей консоли, давайте уделим немного времени и вернемся к коду и посмотрим, что именно он делает. В нашей первой строке кода мы вызываем fetch и указываем URL-адрес, на который мы хотим отправить запрос:

URL-адрес, на который мы отправляем запрос, — ipinfo.io/json. Как только эта строка будет запущена, служба, работающая на ipinfo.io, отправит нам некоторые данные. Мы должны обрабатывать эти данные, и за эту обработку отвечают следующие два блока then:

Одна очень важная деталь, на которую стоит обратить внимание, это то, что ответ, возвращаемый fetch, является Promise . Эти блоки then являются частью того, как промисы работают асинхронно, что позволяет нам обрабатывать результаты. Рассмотрение промисов выходит за рамки этой статьи, но документация MDN отлично объясняет, что они из себя представляют. На данный момент нужно знать, что у нас есть цепочка блоков then, где каждый блок вызывается автоматически после завершения предыдущего. Поскольку все это асинхронно, все это делается, пока остальная часть нашего приложения делает свое дело. Нам не нужно делать ничего лишнего, чтобы код, связанный с запросом, не блокировал и не зависал в нашем приложении в ожидании медленного результата в сети или при обработке большого объема данных.

Возвращаясь к нашему коду, в нашем первом блоке then мы указываем, что нам нужны необработанные данные JSON, которые возвращает наш вызов fetch:

В следующем блоке then, который вызывается после завершения предыдущего, мы дополнительно обрабатываем возвращенные данные, сосредотачиваясь на свойстве, которое даст нам IP-адрес, и выводя его на консоль:

Как мы узнаем, что IP-адрес будет сохранен свойством ip из наших возвращенных данных JSON? Самый простой способ — обратиться к документации разработчика ipinfo.io! Каждый веб-сервис будет иметь свой собственный формат для возврата данных по запросу. Нам нужно потратить несколько минут и выяснить, как будет выглядеть ответ, какие параметры нам могут понадобиться для передачи в качестве части запроса для настройки ответа и как нам нужно написать наш код, чтобы получить данные, которые мы хотим. В качестве альтернативы чтению документации разработчика вы всегда можете проверить ответ, возвращаемый запросом, с помощью инструментов разработчика. Используйте любой удобный для вас подход.

Мы еще не закончили с нашим кодом. Иногда обещание приводит к ошибке или неудачному ответу. Когда это произойдет, наше обещание перестанет спускаться по цепочке блоков then и вместо этого будет искать блок catch. Затем код в этом блоке catch будет выполнен. Наш блок catch выглядит следующим образом:

Мы не делаем ничего революционного в нашей обработке ошибок. Мы просто выводим сообщение об ошибке на консоль.

Завершение примера

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

Самые большие изменения здесь связаны с добавлением некоторых элементов HTML для придания визуальной структуры и CSS, чтобы все выглядело хорошо и правильно. Обратите внимание, что мы также изменили то, что делает наш второй блок then. Вместо того, чтобы выводить наш IP-адрес на консоль, мы отображаем IP-адрес внутри нашего элемента абзаца ipText.

Если вы сейчас просмотрите свою страницу, вы увидите, что ваш IP-адрес отображается со всем темным текстом и удивительным желтым фоном.

Отправить запрос на сервер
Проверка статуса запроса
Получить и проанализировать ответ на запрос
Прослушивайте событие onreadystatechange, которое помогает реагировать на статус вашего запроса.

Поскольку наш документ в хорошем состоянии, пришло время построить наш пример по одной строке за раз!

Создание запроса

Метод open принимает три аргумента:

Отправка запроса

Метод send отвечает за отправку запроса. Если вы настроите свой запрос как асинхронный (а почему бы и нет), метод send немедленно возвращается, а остальная часть вашего кода продолжает выполняться. Это то поведение, которое нам нужно.

Асинхронные материалы и события

Чтобы все это настроить, добавьте следующую выделенную строку, которая вызывает всемогущий addEventListener :

Эта строка выглядит как любой другой код прослушивания событий, который вы писали много раз. Мы прослушиваем событие readystatechange для нашего объекта xhr и вызываем обработчик события processRequest, когда событие прослушивается. Здесь происходят забавные вещи!

Обработка запроса

Это должно быть легко, верно? У нас есть готовый прослушиватель событий, и все, что нам нужно, это обработчик события processRequest, куда мы можем добавить некоторый код для чтения возвращаемого результата. Давайте продолжим и сначала добавим наш обработчик событий:

< /tr>

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

Что мы собираемся сделать, так это немного изменить наш предыдущий код, чтобы включить проверку кода состояния 200, а свойство состояния с соответствующим названием содержит значение, возвращаемое запросом:

Проще говоря, эта проверка проста. Этот оператор if проверяет, что запрос выполнен (readyState == 4) и выполнен успешно (status == 200). Только при соблюдении обоих этих условий мы можем объявить, что наш запрос выполнил то, что мы хотели.

Обработка запроса. за Реалз!

В предыдущем разделе мы рассмотрели множество слов для добавления простого оператора if. Я обещаю, что этот раздел будет более точным. Остается только прочитать тело возвращаемого ответа. Мы делаем это, считывая значение свойства responseText, возвращаемое нашим объектом xhr:

Здесь все становится менее общим. Когда мы делаем запрос на сервер ipinfo.io, данные возвращаются в формате JSON. в виде строки:

Чтобы преобразовать нашу JSON-подобную строку в фактический объект JSON, мы передаем результат xhr.responseText в метод JSON.parse. Это берет нашу строку данных JSON и превращает ее в фактический объект JSON, который хранится в переменной ответа. Оттуда отобразить IP так же просто, как показано в выделенной строке:

Заключение

Есть вопрос или просто хотите поболтать? Оставляйте комментарии ниже или заходите на наши форумы (на самом деле это одно и то же!), где самые дружелюбные люди, с которыми вы когда-либо сталкивались, будут рады вам помочь!

Когда Кирупа не пишет о себе от третьего лица, он практикует социальное дистанцирование… даже в своих профилях в Twitter, Facebook и LinkedIn.

Сервер, на котором размещен основной веб-сайт Reddit, обрабатывает ваш запрос и возвращает ответ вашему браузеру. Ваш браузер достаточно умен, чтобы обработать отправленный ответ и отобразить сайт, который вы видите на снимке экрана, со всеми его цветами, изображениями, текстом и презентацией.

Использование инспектора

Не закрывая инспектор, нажмите на вкладку Сеть:

Вложенная вкладка по умолчанию Заголовки показывает заголовки запросов, отправленных на сервер, а также заголовки ответов, полученные от сервера.

Нажмите на вложенную вкладку Ответ, чтобы просмотреть необработанные данные ответа.

Еще один момент, на который следует обратить внимание при использовании вкладки Сеть в инспекторе, это то, что помимо первого запроса возвращается множество других запросов:

Вы должны увидеть только один запрос и ответ, содержащий HTML, но никаких дополнительных запросов, автоматически выдаваемых, как вы видите в браузере.

Методы запроса

Вернемся к диаграмме из шага 3 выше, когда мы рассмотрели ответы на вкладке Сеть. Возможно, вы заметили два столбца с именами «Метод» и «Статус». Если столбец «Метод» не отображается, возможно, он скрыт по умолчанию. Чтобы отобразить столбец «Метод», щелкните правой кнопкой мыши «Статус» и выберите Метод. Столбец «Метод» теперь должен отображаться рядом со столбцом «Статус».

В этом разделе мы рассмотрим, что означает информация, показанная в этих столбцах.

В столбце Статус отображается статус ответа на каждый запрос. Подробнее об ответах мы поговорим позже в этой книге. Важно понимать, что каждый запрос получает ответ, даже если ответ является ошибкой — это все равно ответ. (Технически это не на 100 % верно, так как время ожидания некоторых запросов может истечь, но мы пока отложим эти редкие случаи.)

GET-запросы

Пользователи curl могут ввести следующую команду на своем терминале:

перед отправкой запроса обязательно выберите ПОЛУЧИТЬ .

Команда curl для этого примера:

POST-запросы

Вот команда curl:

Давайте рассмотрим еще один пример выполнения запроса POST путем заполнения веб-формы. Наш образец формы выглядит в браузере следующим образом:

После заполнения формы вы будете перенаправлены на страницу, которая выглядит следующим образом:

Примечание. Убедитесь, что заголовок Content-Type имеет значение application/x-www-form-urlencoded . В противном случае ваш POST-запрос не будет правильно интерпретирован приложением.

Если вы используете Paw 3, выберите вкладку Form URL-Encoded вместо вкладки Text.
Если вы используете Insomnia, убедитесь, что вы выбрали "Form URL Encoded" в раскрывающемся меню Body.И если вы используете Postman, убедитесь, что переключатель для x-www-form-urlencoded выбран на вкладке Body.

Или вы можете использовать curl:

Обратите внимание, что на снимке экрана и в команде curl мы указываем дополнительный параметр player_name=albert . Это имеет тот же эффект, что и ввод имени в первое поле «Как тебя зовут?» форму и отправить ее.

Мы можем проверить содержимое с помощью инспектора (щелкните правой кнопкой мыши и выберите «Проверить» ). Вы увидите, что параметр player_name, который мы отправляем как часть POST-запроса, встроен в форму через атрибут name элемента ввода:

Запрос POST, сгенерированный инструментом HTTP или curl, аналогичен заполнению формы в браузере, отправке этой формы и последующему перенаправлению на следующую страницу. Внимательно посмотрите на необработанный ответ на снимке экрана инструмента HTTP. Ключевая информация, которая перенаправляет нас на следующую страницу, указана в поле Location: http://al-blackjack.herokuapp.com/bet. Расположение и связанные с ним данные являются частью того, что известно как заголовок ответа HTTP (да, запросы тоже имеют заголовки, но в данном случае это заголовок ответа). Пока не слишком беспокойтесь об этом, так как мы обсудим заголовки в следующем разделе. Ваш браузер видит заголовок ответа и автоматически отправляет новый запрос на URL-адрес, указанный в заголовке Location, тем самым инициируя новый, несвязанный запрос. Форма "Сделать ставку", которую вы видите, является ответом на этот второй запрос.

Примечание. Если вы используете какой-либо другой HTTP-инструмент, например Insomnia или Postman, вам, возможно, придется снять флажок "автоматически следовать перенаправлениям", чтобы увидеть заголовок ответа Location.

Если вы не поняли предыдущий абзац, прочитайте его еще раз. Очень важно понимать, что при использовании браузера браузер скрывает от вас большую часть лежащего в основе цикла HTTP-запроса/ответа. Ваш браузер выдал первоначальный запрос POST, получил ответ с заголовком Location, затем выдал другой запрос без каких-либо действий с вашей стороны, а затем отобразил ответ на этот второй запрос. Опять же, если бы вы использовали чистый HTTP-инструмент, вы бы увидели заголовок ответа Location из первого запроса POST, но инструмент не выдал бы вам второй запрос автоматически. (Некоторые инструменты HTTP имеют эту возможность, если вы отметите опцию «автоматически следовать перенаправлениям».)

Выше показаны различные заголовки, передаваемые во время цикла запроса/ответа. Кроме того, мы видим, что запрос и ответ содержат разные наборы заголовков в разделе «Заголовки запроса»:

Заголовки запроса

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

Обзор

Эта страница создана с помощью сети HTML, CSS и Javascript, отправленной вам Codecademy через Интернет. Интернет состоит из множества ресурсов, размещенных на разных серверах. Термин «ресурс» относится к любому объекту в Интернете, включая файлы HTML, таблицы стилей, изображения, видео и сценарии. Чтобы получить доступ к контенту в Интернете, ваш браузер должен запрашивать у этих серверов необходимые ему ресурсы, а затем отображать эти ресурсы для вас. Этот протокол запросов и ответов позволяет просматривать эту страницу в браузере.

В этой ситуации ваш компьютер, который делает запрос, называется клиентом. Запрашиваемый вами URL-адрес принадлежит серверу.

Давайте рассмотрим пример того, как запросы GET (наиболее распространенный тип запросов) используются, чтобы помочь вашему компьютеру (клиенту) получить доступ к ресурсам в Интернете.

Вторая строка запроса содержит адрес сервера "www.codecademy.com" . Также могут быть дополнительные строки в зависимости от того, какие данные предпочитает отправлять ваш браузер.

Если серверу удается найти запрошенный путь, он может ответить заголовком:

Если сервер не может найти путь, запрошенный клиентом, он ответит заголовком:

Аналогия:

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

Доставщик почты возвращается на легком скоростном поезде, разрывая пути на обратном пути, и сообщает вам, что возникла проблема «404 Not Found». После проверки правописания того, что вы написали, вы понимаете, что ошиблись в названии газеты. Вы исправляете его и сообщаете исправленный заголовок доставщику почты.

На этот раз доставщик почты может забрать его из компании. Теперь вы можете спокойно читать свою газету, пока не решите, что хотите прочитать следующую страницу, после чего вы должны сделать еще один запрос и передать его доставщику почты.

Саид Хаяни

Если вы откроете консоль браузера, она вернет массив данных в формате JSON. Но как мы узнаем, выполнен ли запрос? Другими словами, как мы можем обрабатывать ответы с помощью Ajax?

Свойство onreadystatechange имеет два метода, readyState и status, которые позволяют нам проверять состояние нашего запроса.

Если readyState равно 4, это означает, что запрос выполнен. Свойство readyState имеет 5 ответов. Узнайте больше об этом здесь.

Методы jQuery

Метод $.ajax принимает множество параметров, некоторые из которых являются обязательными, а другие необязательными. Он содержит два параметра обратного вызова: успех и ошибка для обработки полученного ответа.

Метод $.get

Метод $.get используется для выполнения запросов GET. Он принимает два параметра: конечную точку и функцию обратного вызова.

Метод $.post — это еще один способ отправки данных на сервер. Он принимает три параметра: URL-адрес, данные, которые вы хотите опубликовать, и функцию обратного вызова.

$.getJSON

Метод $.getJSON извлекает только данные в формате JSON. Он принимает два параметра: URL-адрес и функцию обратного вызова.

В jQuery есть все эти методы для запроса или отправки данных на удаленный сервер. Но на самом деле вы можете объединить все эти методы в один: метод $.ajax, как показано в примере ниже:

получить

Функция выборки принимает один обязательный параметр: URL конечной точки. У него также есть другие необязательные параметры, как в примере ниже:

Аксиос

Использование:

Во-первых, вам необходимо подключить Axios. Есть два способа включить Axios в свой проект.

Во-первых, вы можете использовать npm:

Тогда вам нужно импортировать его

Во-вторых, вы можете включать аксиомы с помощью CDN.

Выполнение запроса с помощью аксиом:

С помощью Axios вы можете использовать GET и POST для получения и отправки данных с сервера.

axios принимает один обязательный параметр и может также принимать второй необязательный параметр. Некоторые данные принимаются в виде простого запроса.

Axios возвращает «обещание». Если вы знакомы с промисами, вы, вероятно, знаете, что промис может выполнять несколько запросов. Вы можете сделать то же самое с axios и запустить несколько запросов одновременно.

Axios поддерживает множество других методов и параметров. Вы можете ознакомиться с ними здесь.

Затем нам нужно создать службу для обработки запросов. Вы можете легко создать сервис с помощью Angular CLI.

Наконец, вызовите службу и запустите ее.

Вы можете посмотреть демонстрационный пример на Stackblitz.

Подведение итогов

Спасибо за ваше время. Если вам это нравится, хлопайте в ладоши до 50, нажмите «Подписаться» и свяжитесь со мной в Твиттере.

Читайте также:

Значение	Состояние	Описание
0	НЕ ОТПРАВЛЕНО	Метод open не был вызван еще
1	OPENED	Метод отправки был вызван< /td>
2	HEADERS_RECEIVED	Вызван метод отправки, и HTTP-запрос вернул статус и заголовки
3	ЗАГРУЗКА	Ответ HTTP-запроса загружается
4	ГОТОВО	Все выполнено