MDN-Web APIs

参考资料

简介

Web APIs（Application Programming Interfaces）是用于与浏览器环境中的 Web 功能进行交互的一组接口和方法集合。通过 Web APIs，开发人员可以访问浏览器提供的功能，如操作 DOM、发送网络请求、处理用户输入等。这些 APIs 是用来构建交互性、动态性和丰富性的 Web 应用程序的重要工具。

以下是一些常见的 Web APIs：

• DOM API：Document Object Model（DOM） API 允许开发人员操作 HTML 和 XML
  文档的结构和内容。通过 DOM，可以增删修改文档中的元素、属性和文本内容。
• Fetch API：用于发送和接收网络请求的 Fetch API。它提供了一种现代化的方式来执行网络请求，取代了传统的XMLHttpRequest。
• XMLHttpRequest：虽然被 Fetch API 取代，但仍然可以用来发送异步网络请求。
• Web Storage API：用于在客户端浏览器中存储数据，包括 localStorage（持久性存储）和
  sessionStorage（会话级存储）。
• IndexedDB API：提供了一个客户端数据库，用于在浏览器中存储大量结构化数据。
• Geolocation API：用于获取用户设备的地理位置信息。
• Canvas API：允许通过 JavaScript 绘制图形和图像，创建各种图形效果和动画。
• Web Audio API：用于操作和控制音频，实现音频处理、合成和分析等功能。
• Web Speech API：提供了语音识别和合成功能，使得浏览器可以进行语音交互。
• Web Notifications API：用于在用户的操作系统中显示通知，用于向用户显示信息和提醒。
• Web Workers API：允许在后台线程中执行 JavaScript 代码，提高了多线程处理的能力，从而不影响主 UI
  线程的响应性。
• Websockets API：提供了在浏览器和服务器之间建立双向通信的方式，用于实时数据传输。

这些只是众多 Web APIs 中的一部分。使用这些 APIs，开发人员可以创建出各种各样功能丰富的 Web 应用程序，提供更好的用户体验和交互性。不同的 Web APIs 针对不同的场景和需求，开发人员可以根据自己的项目选择适合的 API 进行开发。

DOM API

DOM API（Document Object Model API）是用于操作网页文档结构和内容的一组接口和方法。通过 DOM API，开发人员可以使用 JavaScript 动态地修改、添加、删除网页元素和内容，实现交互性和动态性的网页效果。

DOM 将整个网页文档表示为一个树状结构，每个节点代表文档中的一个元素、属性、文本等。DOM API 允许开发人员访问和操作这些节点，从而实现各种操作。

以下是一些常见的 DOM API 操作示例：

1. 选择元素

const element = document.getElementById("myElement"); // 通过 ID 获取元素
const elements = document.querySelectorAll(".myClass"); // 通过类名获取元素集合
const element = document.querySelector("p"); // 通过标签名获取第一个元素

2. 修改内容和属性

element.textContent = "New text content"; // 修改文本内容
element.innerHTML = "<strong>Strong text</strong>"; // 修改 HTML 内容
element.setAttribute("data-id", 123); // 设置属性

3. 创建和插入元素

const newElement = document.createElement("div"); // 创建新元素
element.appendChild(newElement); // 将新元素插入到父元素末尾
element.insertBefore(newElement, referenceElement); // 在指定元素之前插入新元素

4. 删除元素

element.parentNode.removeChild(element); // 从父元素中移除

5. 事件处理

element.addEventListener("click", function() {
  // 处理点击事件
});

6. 样式操作

element.style.color = "red"; // 修改元素样式
element.classList.add("highlight"); // 添加 CSS 类名

XMLHttpRequest

XMLHttpRequest（XHR）是一种用于发送 HTTP 请求和接收服务器响应的 Web API。它是早期 Web 开发中主要用于进行异步通信的工具，虽然现在已被 Fetch API 替代，但了解它仍然是有益的。

使用 XMLHttpRequest，您可以在不刷新页面的情况下从服务器获取数据并更新网页内容。以下是一个简单的使用 XMLHttpRequest 发送 GET 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // 创建一个 GET 请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) { // 请求完成
    if (xhr.status === 200) { // 响应成功
      var responseData = JSON.parse(xhr.responseText);
      console.log(responseData);
    } else {
      console.error("Request failed with status:", xhr.status);
    }
  }
};
xhr.send(); // 发送请求

在上面的示例中，我们创建了一个 XMLHttpRequest 实例，指定了请求方法和 URL，然后设置了 onreadystatechange 事件处理程序来监听请求状态的变化。一旦请求状态变为 DONE，我们检查响应状态码以确定请求是否成功，并处理响应数据。

XMLHttpRequest 可以用于发送各种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等，并且可以设置请求头、处理响应数据等。然而，与 Fetch API 相比，XMLHttpRequest 在使用上更繁琐，需要手动处理状态和错误，而 Fetch API 基于 Promise 更加简洁和易于使用。如果您在现代 Web 开发中进行网络通信，建议使用 Fetch API。

Web Storage API

Web Storage API 是一组用于在客户端浏览器中存储数据的 Web API，它提供了一种在浏览器中持久性地存储键值对数据的方式，以便在不同页面和会话之间共享数据。

Web Storage API 分为两种存储方式：

• localStorage：提供了持久性的本地存储，数据会一直保存在客户端，即使浏览器关闭也不会丢失。适用于需要在多个页面之间共享数据的场景。
• sessionStorage：提供了会话级别的本地存储，数据仅在当前会话中有效，当浏览器窗口关闭时数据将被清除。适用于在同一页面的不同部分之间共享数据。

以下是 Web Storage API 的基本用法：

// 使用localStorage存储数据
localStorage.setItem("username", "john");
const storedUsername = localStorage.getItem("username");
console.log(storedUsername); // 输出：john

// 使用sessionStorage存储数据
sessionStorage.setItem("token", "abc123");
const storedToken = sessionStorage.getItem("token");
console.log(storedToken); // 输出：abc123

// 移除数据
localStorage.removeItem("username");
sessionStorage.clear(); // 清空所有sessionStorage数据

需要注意的是，Web Storage API 存储的数据是以字符串形式存储的，如果需要存储对象或其他数据类型，需要进行适当的序列化和反序列化操作。

虽然 Web Storage API 提供了方便的方式来存储数据，但也要注意存储容量限制（通常为几MB）以及可能的安全性问题。敏感信息不应存储在本地存储中，以免被恶意访问。

在现代 Web 开发中，随着更多高级的数据管理工具的出现，如== IndexedDB 和客户端数据库==，您可能会根据具体需求选择更适合的数据存储方式。

Websockets API

WebSocket API 是一种在 Web 应用程序中实现双向通信的技术，允许浏览器和服务器之间建立持久的、全双工的通信连接。与传统的 HTTP 请求-响应模型不同，WebSocket 允许实时交换数据，适用于实时聊天、实时数据更新和多人协作等应用场景。

WebSocket API 提供了一种在浏览器和服务器之间传递数据的方法，数据可以是文本或二进制格式。与 HTTP 请求不同，WebSocket 连接在初始握手后保持打开状态，使得服务器和客户端可以随时向对方发送数据。

以下是一个简单的使用 WebSocket API 的示例：

// 创建 WebSocket 连接
const socket = new WebSocket("wss://example.com/socket");

// 连接成功时触发
socket.onopen = function(event) {
  console.log("WebSocket connection opened.");
  socket.send("Hello, server!");
};

// 接收到消息时触发
socket.onmessage = function(event) {
  console.log("Received message from server:", event.data);
};

// 连接关闭时触发
socket.onclose = function(event) {
  if (event.wasClean) {
    console.log("WebSocket connection closed cleanly.");
  } else {
    console.error("WebSocket connection closed with error:", event.code, event.reason);
  }
};

// 发生错误时触发
socket.onerror = function(event) {
  console.error("WebSocket error:", event);
};

在上面的示例中，我们首先创建了一个 WebSocket 连接，然后监听不同的事件来处理连接的状态和数据交换。当连接建立后，我们通过 send 方法向服务器发送数据，通过 onmessage 处理接收到的数据。

WebSocket API 适用于需要实时通信的应用场景，它可以在不同浏览器和服务器之间实现实时的双向数据传输。与传统的轮询或长轮询相比，WebSocket 提供了更高效、实时和低延迟的通信方式。然而，您需要注意处理连接中断、错误和安全性等问题。