JavaScript - Web API

上一页
下一页

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

什么是 Web API？

API 是 Application Programming Interface 的首字母缩写词。它是在两个软件组件或系统之间进行通信的标准协议或规则集。

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

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

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

Web API 有多种类型，其中一些如下 -

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

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

浏览器 API（客户端 JavaScript API）

浏览器 API 是由浏览器提供的一组 Web API。

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

有多个浏览器 API 可用于与 Web 页面交互。

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

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

服务器 API

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

例如，REST API 是一个服务器 API，它允许我们在服务器上创建和使用资源。JSON API 是用于访问 JSON 格式数据的常用 API。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 的示例。在下面的示例中，我们获取 API 以访问来自给定 URL （'https://jsonplaceholder.typicode.com/todos/5） 的数据。fetch（） 方法返回一个 Promise，我们使用 “then” 块处理该 Promise。首先，我们将数据转换为 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 用于验证表单数据。
打印本页
上一页
下一页