如何在 HTML5中调用 Web 服务

技术SOLO

2022-10-17

在本文中，我们将看到如何在 HTML5中调用 Web 服务，以及了解调用 Web 服务的不同方法并通过示例理解它们
HTML5中的 Web 服务是一组开放协议和标准，允许在不同的应用程序或系统之间交换数据。这有助于应用程序通过互联网与其他应用程序共享一些信息。
调用 Web 服务的程序: 调用 Web 服务可以使用内置的 Web API，浏览器提供两种不同的 API，它们是:

FetchAPI: FetchAPI 提供了在窗口对象上定义的 get ()方法。这是用来执行请求的。这个方法返回一个  件，它可以进一步用来检索对请求的响应。
XMLHttpRequest: XMLHTTPRequest 对象是一个 API，用于从服务器获取数据。它基本上用于 Ajax 编程。它检索任何类型的数据，如 JSON、 XML、文本等。它在后台请求数据并更新页面，而无需在客户端重新加载页面。

可以从 HTML 调用 web 服务的概念被称为 AJAX (异步 XML 和 Javascript) ，它是2005年由杰西·詹姆士·贾瑞特引入的。使用这个我们可以更新我们的 HTML 结构没有任何页面加载。这将向 Web 服务发出 HTTP 请求，而不会阻塞 DOM。

我们将通过使用 XMLHttpRequest 或 FetchAPI 来探索这两个调用 Web 服务的概念。
XMLHttpRequest 对象: 要向 Web 服务发出请求，我们需要通过以下步骤创建一个 XMLHttpRequest 实例:

创建 XMLHttpRequest 对象
使用 onload 事件侦听 Web 服务响应
使用 Open ()方法打开 http 请求
发送请求

示例1

在这个示例中，我们将向名为 JSONPlaceholder 的免费 Web 服务发出请求。现在，创建一个 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">技术SOLO</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>

FetchAPI: FetchAPI 提供了一个获取资源的接口。它类似于 XMLHTTPRequest，但是这个 API 提供了一个更强大、更灵活的特性。步骤如下:

使用 get ()方法创建一个获取请求
这将返回一个承诺，因此添加一个承诺处理程序，然后()
使用 catch ()可以处理失败

示例2

在这个示例中，我们将向名为 JSONPlaceholder 的免费 Web 服务发出请求。现在，创建一个 HTML 文件并复制下面的代码，然后在浏览器中用活动服务器打开该文件(URL 不应该以该文件开头://)。


<!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">技术SOLO</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>

阅读本站将被视为对免责声明的全部认可
标题：如何在 HTML5中调用 Web 服务
链接：https://www.jssolo.com/note/219832q8
本站原创文章，版权归本站所有，非商业转载或引用请标注来源，商业转载或引用请联系站长
部分文章内容可能来自互联网，如有侵权，请通过邮件联系

THE END

客户端 HTTP 参数污染攻击

<<上一篇

居家办公 VS 办公室办公 VS 混合模式: 哪个更好？

下一篇>>