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

Создание HTML Программирование и разработка

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

Читайте также:  Какой язык лучше для веб-разработки: PHP или Python?

приведенный выше код отобразит ответ в документе

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://.

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector