В этой статье мы увидим, как вызывать веб-службы в HTML5, а также узнаем о различных методах вызова веб-служб и поймем их на примерах.
Веб-службы в HTML5 представляют собой набор открытых протоколов и стандартов, позволяющих обмениваться данными между различными приложениями или системами. Это помогает приложению обмениваться информацией с другими приложениями через Интернет.
Процедура вызова веб-служб. Вызов веб-служб можно выполнять с помощью встроенных веб-API, и браузер предоставляет вам два разных API, а именно:
- XMLHttpRequest: объект XMLHTTPRequest — это API, который используется для получения данных с сервера. Он в основном используется в программировании Ajax. Он извлекает данные любого типа, такие как JSON, XML, текст и т. д. Он запрашивает данные в фоновом режиме и обновляет страницу без перезагрузки страницы на стороне клиента.
- Fetch API: Fetch API предоставляет метод fetch(), определенный для объекта окна. Это используется для выполнения запросов. Этот метод возвращает обещание, которое в дальнейшем можно использовать для получения ответа на запрос.
Концепция вызова веб-сервисов из HTML называется AJAX (асинхронный XML и Javascript), которая была представлена в 2005 году Джесси Джеймсом Гарреттом. Используя это, мы можем обновить нашу структуру HTML без загрузки страницы. Это делает HTTP-запрос к веб-службе без блокировки DOM.
Мы рассмотрим обе эти концепции для вызова веб-сервисов с использованием API XMLHttpRequest или Fetch.
Объект XMLHttpRequest: чтобы сделать запрос к веб-службе, нам нужно создать экземпляр XMLHttpRequest, просто выполнив следующие шаги:
- Создать объект XMLHttpRequest
- Прослушайте ответ веб-службы, используя событие onload
- Откройте http-запрос с помощью метода open().
- Отправить запрос
Пример 1. В этом примере мы сделаем запрос к бесплатной веб-службе под названием JSONPlaceholder. Теперь создайте файл HTML и скопируйте приведенный ниже код, а затем откройте файл в браузере с работающим сервером.
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content='
width
=
device
-width,
initial-scale
=
1
.0'>
<
title
>Calling the Web Services in HTML5</
title
>
</
head
>
<
body
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeekforGeeks</
h1
>
<
h3
>Calling the Web Services in HTML5</
h3
>
<
script
>
var xhr = new XMLHttpRequest( );
xhr.onload = (res)=>{
if(res.target.status == 200){
document.body.innerHTML +=
(res.target.responseText);
}
}
xhr.open("GET",".../todos/1",true);
xhr.send();
</
script
>
</
body
>
</
html
>
Вывод: приведенный выше код отобразит ответ в документе. Здесь мы запускаем код с работающим сервером по URL-адресу 127.0.0.1:5501/fetch.html.
Fetch API: Fetch API предоставляет интерфейс для получения ресурсов. Он похож на XMLHTTPRequest, но этот API предоставляет более мощную и гибкую функцию. Шаги приведены ниже:
- Создайте запрос на выборку с помощью метода fetch().
- Это возвращает обещание, поэтому добавьте обработчик обещания then()
- Используя функцию catch(), вы можете справиться с ошибкой
Пример 2. В этом примере мы сделаем запрос к бесплатной веб-службе под названием JSONPlaceholder. Теперь создайте файл HTML и скопируйте приведенный ниже код, а затем откройте файл в браузере с работающим сервером (URL-адрес не должен начинаться с файла://).
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content='
width
=
device
-width,
initial-scale
=
1
.0'>
<
title
>Calling the Web Services in HTML5</
title
>
</
head
>
<
body
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeekforGeeks</
h1
>
<
h3
>Calling the Web Services in HTML5</
h3
>
<
script
>
fetch('.../todos/1')
.then((res) => {
return res.text()
}).then((data) => {
document.body.innerHTML +=
(data)
})
.catch((err) => console.debug(err));
</
script
>
</
body
>
</
html
>
Выход:
Примечание. Это работает только для безопасного URL-адреса, который поддерживается политикой CORS, и не работает для протокола file://.