Как вызывать веб-сервисы в HTML5?
В этой статье мы увидим, как вызывать веб-службы в 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:// .