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

列印頁面