Javascript 简明教程

JavaScript - Web API

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

A Web API is an application programming interface (API) for web. The concept of the Web API is not limited to JavaScript only. It can be used with any programming language. Let’s learn what web API is first.

What is Web API?

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

The API is an acronym for the Application Programming Interface. It is a standard protocol or set of rules to communicate between two software components or systems.

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

A web API is an application programming interface for web.

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

The API provides an easy syntax to use the complex code. For example, you can use the GeoLocation API to get the coordinates of the users with two lines of code. You don’t need to worry about how it works in the backend.

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

Another real-time example you can take is of a power system at your home. When you plug the cable into the socket, you get electricity. You don’t need to worry about how electricity comes into the socket.

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

There are different types of web APIs, some are as follow −

  1. Browser API (Client-Side JavaScript API)

  2. Server API

  3. Third Party APIs

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

Let’s discuss each of the above type of web APIs in detail −

Browser API (Client-side JavaScript API)

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

The browser APIs are set of Web APIs that are provided by the browsers.

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

The browser API is developed on top of the core JavaScript, which you can use to manipulate the web page’s functionality.

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

There are multiple browser APIs available which can be used to interact with the web page.

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

Following is a list of common browser APIs −

  1. Storage API − It allows you to store the data in the browser’s local storage.

  2. DOM API − It allows you to access DOM elements and manipulate them.

  3. History API − It allows you to get the browser’s history.

  4. Fetch API − It allows you to fetch data from web servers.

  5. Forms API − It allows you to validate the form data.

Server API

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

A server API provides different functionalities to the web server. Server APIs allow developers to interact with server and access data and resources.

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

For example, REST API is a server API that allows us to create and consume the resources on the server. A JSON API is popular API for accessing data in JSON format. The XML API is a popular API for accessing data in XML format.

Third-party APIs

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

The third-party API allows you to get the data from their web servers. For example, YouTube API allows you to get the data from YouTube’s web server.

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

Here is the list of common third-party APIs.

  1. YouTube API − It allows you to get YouTube videos and display them on the website.

  2. Facebook API − It allows you to get Facebook posts and display them on the website.

  3. Telegram API − It allows you to fetch and send messages to the telegram.

  4. Twitter API − It allows you to get tweets from Twitter.

  5. Pinterest API − It allows you to get Pinterest posts.

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

You can also create and expose API endpoints for your own software. So, other applications can use your API endpoints to get the data from your web server.

Fetch API: An Example of Web API

以下是使用获取 API 的示例。在下例中，我们将获取 API 用于访问给定 URL 中的数据（'https://jsonplaceholder.typicode.com/todos/5）。fetch() 方法返回一个 promesse，我们使用“then”代码块对其进行处理。首先，我们将数据转换为 JSON 格式。完成此操作后，我们将数据转换为字符串，并将其打印在网页上。

Here is an example of how to use the fetch API. In the below example, we Fetch API to access data from a given URL ('https://jsonplaceholder.typicode.com/todos/5). The fetch() method returns a promise that we handle using the “then” block. First, we convert the data into the JSON format. After that, we convert the data into the string and print it on the web page.

<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。

Here, we have listed the most common web APIs.

API

Description

Console API

It is used to interact with the browser’s console.

Fetch API

It is used to fetch data from web servers.

FullScreen API

It contains various methods to handle HTML elements in full-screen mode.

GeoLocation API

It contains the methods to get the user’s current location.

History API

It is used to navigate in the browser based on the browser’s history.

MediaQueryList API

It contains methods to query media.

Storage API

It is used to access the local and session storage.

Forms API

It is used to validate the form data.

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

In upcoming chapters, we will cover the above APIs in details