JavaScript - Web API

Web API 是 Web 的应用程序编程接口 (API)。Web API 的概念不仅限于 JavaScript。它可以与任何编程语言一起使用。让我们首先了解什么是 Web API。

什么是 Web API？

API 是应用程序编程接口的首字母缩写词。它是两个软件组件或系统之间通信的标准协议或规则集。

Web API 是 Web 的应用程序编程接口。

API 提供了一种简单的语法来使用复杂的代码。例如，您可以使用 GeoLocation API 使用两行代码获取用户的坐标。您无需担心它在后端如何工作。

您可以举的另一个实时示例是您家中的电力系统。当您将电缆插入插座时，您会获得电力。您无需担心电力如何进入插座。

Web API 有不同类型，一些如下所示：

浏览器 API（客户端 JavaScript API）
服务器 API
第三方 API

让我们详细讨论上述每种类型的 Web API：

浏览器 API（客户端 JavaScript API）

浏览器 API 是浏览器提供的 Web API 集。

浏览器 API 在核心 JavaScript 之上开发，您可以使用它来操作网页的功能。

有多个可用的浏览器 API 可用于与网页交互。

以下是常见浏览器 API 的列表：

Storage API - 它允许您将数据存储在浏览器的本地存储中。
DOM API - 它允许您访问 DOM 元素并对其进行操作。
History API - 它允许您获取浏览器的历史记录。
Fetch API - 它允许您从 Web 服务器获取数据。
Forms API - 它允许您验证表单数据。

服务器 API

服务器 API 为 Web 服务器提供不同的功能。服务器 API 允许开发人员与服务器交互并访问数据和资源。

例如，REST API 是一个服务器 API，它允许我们创建和使用服务器上的资源。JSON API 是一个流行的 API，用于以 JSON 格式访问数据。XML API 是一个流行的 API，用于以 XML 格式访问数据。

第三方 API

第三方 API 允许您从其 Web 服务器获取数据。例如，YouTube API 允许您从 YouTube 的 Web 服务器获取数据。

以下是常见第三方 API 的列表。

YouTube API - 它允许您获取 YouTube 视频并在网站上显示它们。
Facebook API - 它允许您获取 Facebook 帖子并在网站上显示它们。
Telegram API - 它允许您获取和发送消息到 Telegram。
Twitter API - 它允许您从 Twitter 获取推文。
Pinterest API - 它允许您获取 Pinterest 帖子。

您还可以为自己的软件创建和公开 API 端点。因此，其他应用程序可以使用您的 API 端点从您的 Web 服务器获取数据。

Fetch API：Web API 示例

以下是如何使用 Fetch API 的示例。在下面的示例中，我们使用 Fetch API 从给定的 URL（'https://jsonplaceholder.typicode.com/todos/5'）访问数据。fetch() 方法返回一个 promise，我们使用“then”块处理它。首先，我们将数据转换为 JSON 格式。之后，我们将数据转换为字符串并在网页上打印它。

<html>
<body>
   <h3> Fetch API: An Example of Web API </h3>
   <div id = "output"> </div>
   <script>
      const URL = 'https://jsonplaceholder.typicode.com/todos/5';
      fetch(URL)
         .then(res => res.json())
         .then(data => {
            document.getElementById('output').innerHTML += 
		    "The data accessed from the API: " + "<br>" +
            JSON.stringify(data);
         });
   </script>
</body>
</html>

JavaScript Web API 列表

在这里，我们列出了最常见的 Web API。

API	描述
Console API	它用于与浏览器的控制台交互。
Fetch API	它用于从 Web 服务器获取数据。
FullScreen API	它包含各种方法来处理全屏模式下的 HTML 元素。
GeoLocation API	它包含获取用户当前位置的方法。
History API	它用于根据浏览器的历史记录在浏览器中导航。
MediaQueryList API	它包含查询媒体的方法。
Storage API	它用于访问本地存储和会话存储。
Forms API	它用于验证表单数据。

在接下来的章节中，我们将详细介绍上述 API

打印页面