Создание HTTP/Web-запросов на JavaScript

Javascript

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

Это выглядит примерно так: ваш браузер отправляет запрос, неловко ждет, пока сервер ответит на запрос, и (как только сервер ответит) обрабатывает запрос. Вся эта коммуникация стала возможной благодаря чему-то, известному как протокол HTTP.

Протокол HTTP обеспечивает общий язык, который позволяет вашему браузеру и множеству других вещей общаться со всеми серверами, составляющими Интернет. Запросы, которые ваш браузер делает от вашего имени, используя протокол HTTP, известны как HTTP-запросы, и эти запросы выходят далеко за рамки простой загрузки новой страницы во время навигации. Общий (и гораздо более захватывающий!) набор вариантов использования вращается вокруг обновления существующей страницы данными, полученными в результате HTTP-запроса.

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

Чтобы получить информацию о пользователе, вот наш HTTP-запрос:

GET /user
Accept: application/json

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

200 ОК
Content-Type: application/json

{
«name»: «Google»,
«url»: «https://www.google.com»
}

Это происходит несколько раз, и все это полностью поддерживается в JavaScript! Эта способность асинхронно запрашивать и обрабатывать данные с сервера, не требуя навигации по странице/перезагрузки, имеет определенный термин.

Этот термин — Аякс. Эта аббревиатура расшифровывается как Асинхронный JavaScript и XML, и если вы были рядом с веб — разработчиками несколько лет назад, Ajax был модным словом, которое все бросали вокруг для описания типа веб-приложений, которые мы принимаем как должное сегодня-приложения, такие как Twitter, Facebook, GoogleMaps, Gmail и многое другое, которые постоянно извлекают данные, когда вы взаимодействуете со страницей, не требуя полной перезагрузки страницы!

Знание того, как настроить Ajax и делать HTTP-запросы, является очень важным навыком, и в данной статье вы узнаете обо всём этом.

Пример

Читать (или даже думать) о HTTP и запросах скучно…чрезвычайно скучно! Чтобы помочь вам обоим оставаться бодрствующими, а также понять, что все это связано, мы собираемся построить небольшой пример вместе. Пример будет выглядеть следующим образом:

Создание HTTP/Web-запросов на JavaScript
На первый взгляд этот пример кажется таким же скучным, как и основные детали HTTP-запроса, которые я надеялся сделать более захватывающими. Например, что вы собираетесь делать с этими знаниями о вашем IP?

То, что скрывает этот пример, — это некоторые удивительные базовые детали, имеющие отношение к тому, что вы собираетесь узнать. Вот такой подлый взгляд. У нас есть некоторый JavaScript, который делает HTTP-запрос к сервису (ipinfo.io), который возвращает целую кучу данных о вашем соединении. Используя JavaScript, мы обрабатываем все возвращенные данные и хирургическим путем определяем IP-адрес, который мы так гордо показываем здесь.

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

Знакомство с Fetch

Самый новый в блоке для создания HTTP — запросов-это fetch API. Чтобы использовать fetch в его самой простой форме, все, что нам нужно сделать, это предоставить URL-адрес для отправки нашего запроса. Как только запрос будет сделан, будет возвращен ответ, который мы thenмы сможем его обработать. Чтобы привести все эти слова в действие, давайте напишем некоторый код и запустим наш предыдущий пример.

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

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

<!DOCTYPE html>
<html>

<head>
<title>Отображение IP-адреса</title>
</head>

<body>

<script>

</script>
</body>

</html>

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

fetch(«https://www.google.ru/»)
.then(function (response) {
returnresponse.json();
})
.then(function(myJson) {
console.log(myJson.ip);
})
.catch(function(error) {
console.log(«Ошибка:» + error);
});

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

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

fetch(«https://ipinfo.io/json»)
.then(функция (ответ) {
returnresponse.json();
})
.then(function(myJson) {
console.log(myJson.ip);
})
.catch(функция (ошибка) {
console.log(«Error:» + error);
});

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

fetch(«https://ipinfo.io/json»)
.then(функция (ответ) {
returnresponse.json();
})
.then(function(myJson) {
console.log(myJson.ip);
})
.catch(function(error) {
console.log(«Error:» + error);
});

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

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

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

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

fetch(«https://ipinfo.io/json»)
.then((response) {
returnresponse.json();
})
.then( (myJson) {
console.log(myJson.ip);
})
.catch(function(error) {
console.log(«Error:» + error);
});

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

fetch(«https://www.google.ru/»)
.then(function (response) {
returnresponse.google();
})
.then(function(myGoogle) {
console.log(myGoogle.ip);
})
.catch(function(error) {
console.log(«Error:» + error);
});

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

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

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

fetch(«https://www.google.ru/»)
.then(function (response) {
returnresponse.google();
})
.then (function (myGoogle) {
console.log(myGoogle.ip);
})
.catch(function(error) {
console.log(«Error:» + error);
});

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

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

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

<!DOCTYPE html>
<html>

<head>
<title>Display IP Address</title>
<style>
body {
background-color: #FFCC00;
}

h1 {
font-family: sans-serif;
text-align: center;
padding-top: 140px;
font-size: 60px;
margin: -15px;
}

p {
font-family: sans-serif;
color: #907400;
text-align: center;
}
</style>
</head>

<body>
<h1 id=ipText></h1>
<p>( This is your IP address…probably 😛 )</p>
<script>
fetch(«https://www.google.ru/ «)
.then(function (response) {
returnresponse.google();
})
.then(function (myGoogle) {
document.querySelector(«#GoogleText»).innerHTML = myGoogle.ip;
})
.catch(function (error) {
console.log(«Ошибка: » + error);
});
</script>
</body>

</html>

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

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

Знакомство с XMLHttpRequest

Другой (более традиционный) объект, который отвечает за отправку и получение HTTP-запросов, — это странно названный XMLHttpRequest. Этот объект позволяет вам делать несколько вещей, которые важны для создания веб-запросов. Это позволяет вам:

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

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

<!DOCTYPE html>
<html>

<head>
<title>Display IP Address</title>
<style>
body {
background-color: #FFCC00;
}

h1 {
font-family: sans-serif;
text-align: center;
padding-top: 140px;
font-size: 60px;
margin: -15px;
}

p {
font-family: sans-serif;
color: #907400;
text-align: center;
}
</style>
</head>

<body>
<h1 id=ipText></h1>
<p>( This is your IP address…probably 😛 )</p>
<script>

</script>
</body>

</html>

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

Создание Request(запроса)

Первое, что мы собираемся сделать, это инициализировать наш объект XMLHttpRequest, поэтому добавьте следующую строку внутри тега скрипта:

letxhr = newXMLHttpRequest();

Переменная xhr теперь будет шлюзом ко всем различным свойствам и методам, которые предоставляет объект XMLHttpRequest, позволяя нам делать веб-запросы. Один из таких методов-открытый. Этот метод позволяет нам указать детали запроса, который мы хотели бы сделать, поэтому давайте добавим его далее:

letxhr = new XMLHttpRequest();
xhr.open(‘GET’, «https://www.google.ru/», true);

Открытый метод принимает три аргумента:

Первый аргумент указывает, какой метод HTTP следует использовать для обработки вашего запроса. Вы можете указать следующие значения: GET, PUT, POST и DELETE. В нашем случае мы заинтересованы в получении информации, поэтому первым аргументом, который мы указываем, будет GET.

Затем вы указываете URL-адрес для отправки вашего запроса. Эти URL-адреса являются четко определенными конечными точками, которые знают, что делать, когда HTTP-запрос пролетает мимо.

Последний аргумент указывает, хотите ли вы, чтобы ваш запрос выполнялся асинхронно или нет. Это значение должно быть установлено в true. Запуск запроса асинхронно гарантирует, что ваша страница реагирует, а остальная часть вашего кода продолжает работать, в то время как ваш HTTP-запрос тратит свое время на то, чтобы обойти его. На данный момент установка этого значения в false будет проигнорирована большинством браузеров, так что…да.

Часть-ish из трех аргументов, о которых я упоминал ранее, относится к аргументам для имени пользователя и пароля. Как правило, вы не хотите указывать свое имя пользователя и пароль в таком простом, как дневной свет, месте, как ваш файл JavaScript, поэтому вам, вероятно, никогда не понадобится устанавливать больше трех аргументов, которые вы уже видели.

Вывод

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

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

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

Оцените статью
Образовательный портал WELCOME4U.RU
Добавить комментарий

Adblock
detector