Javascript 简明教程

JavaScript - Web API

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

What is Web API?

API 是应用程序编程接口的首字母缩写。它是一种标准协议或一组规则，用于在两个软件组件或系统之间进行通信。

Web API 是网络的应用程序编程接口.

API 提供了一个使用复杂代码的简单语法. 举个例子, 您可以使用 GeoLocation API 用两行代码获得用户的坐标. 您无需担心它在后端如何运作.

另一个你可以举出的实时例子是一个你家中的 power system. 当你把电缆插入插座时, 你会得到电. 您无需担心电能如何进入插座.

有不同类型的 web API, 其中一些如下 −

  1. 浏览器 API (Client-Side JavaScript API)

  2. Server API

  3. Third Party APIs

让我们详细讨论上述每种类型的 web API −

Browser API (Client-side JavaScript API)

浏览器 API 是由浏览器提供的 Web API 集合.

浏览器 API 是在核心 JavaScript 的基础上开发的, 您可以使用它来处理 web 页面的功能.

有多种可以与 web 页面交互的浏览器 API.

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

  1. Storage API − 它使您能够将数据存储在浏览器本地存储中.

  2. DOM API − 它允许您访问 DOM 元素并对其进行操作.

  3. History API − 它允许您获取浏览器的历史记录.

  4. Fetch API − 它允许您从 web 服务器获取数据.

  5. Forms API − 它允许您验证表单数据.

Server API

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

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

Third-party APIs

第三方 API 允许您从其 web 服务器获取数据. 例如, YouTube API 允许您从 YouTube 的 web 服务器获得数据.

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

  1. YouTube API − 它允许你获取 YouTube 视频，并在网站上显示它们。

  2. Facebook API − 它允许你获取 Facebook 帖子，并在网站上显示它们。

  3. Telegram API − 它允许你获取消息，并发送消息至电报频道。

  4. Twitter API − 它允许你获取 Twitter 上的推文。

  5. Pinterest API − 它允许你获取 Pinterest 帖子。

你还可以创建并公开供你自己的软件使用的 API 终端点。这样，其他应用程序可以使用你的 API 终端点从你的网络服务器获取数据。

Fetch API: An Example of Web API

以下是使用获取 API 的示例。在下例中，我们将获取 API 用于访问给定 URL 中的数据（'https://jsonplaceholder.typicode.com/todos/5）。fetch() 方法返回一个 promesse，我们使用“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 List

此处，我们列出了最常用的网络 API。

API

Description

Console API

它用于与浏览器的控制台进行交互。

Fetch API

它用于从网络服务器获取数据。

FullScreen API

它包含用于以全屏模式处理 HTML 元素的各种方法。

GeoLocation API

它包含用于获取用户当前位置的方法。

History API

它用于根据浏览器的历史记录在浏览器中进行导航。

MediaQueryList API

它包含查询媒体的方法。

Storage API

它用于访问本地存储和会话存储。

Forms API

它用于验证表单数据。

在后续章节中，我们将详细介绍上述 API