Как вызывать веб-сервисы в HTML 5?

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