客户端 Web API

在为网站或应用程序编写客户端 JavaScript 时,您会很快遇到应用程序编程接口 (API)。API 是用于操纵网站运行的浏览器和操作系统的不同方面的编程功能,或操纵来自其他网站或服务的数据。在本模块中,我们将探讨什么是 API,以及如何使用您在开发工作中经常遇到的最常见 API。

先决条件

为了充分利用本模块,您应该已经完成了本系列中之前的 JavaScript 模块(入门构建模块JavaScript 对象)。这些模块通常涉及简单的 API 使用,因为在没有它们的情况下很难编写客户端 JavaScript 示例。在本教程中,我们将假设您熟悉核心 JavaScript 语言,并更详细地探讨常见的 Web API。

HTMLCSS 的基本了解也很有用。

注意:如果您正在使用无法创建自己文件的设备,可以在在线编码程序中尝试(大多数)代码示例,例如 JSBinGlitch

指南

Web API 简介

首先,我们将从高层级开始查看 API——它们是什么,它们如何工作,您如何在代码中使用它们,以及它们的结构如何?我们还将看一下不同主要 API 类别的种类以及它们的用途。

操作文档

在编写网页和应用程序时,您最常需要做的事情之一是以某种方式操纵网页文档。这通常是通过使用文档对象模型 (DOM) 来完成的,DOM 是用于控制 HTML 和样式信息的 API 集合,它大量使用 Document 对象。在本文中,我们将详细介绍如何使用 DOM,以及一些其他有趣的 API,这些 API 可以以有趣的方式改变您的环境。

从服务器获取数据

在现代网站和应用程序中,另一个非常常见的任务是检索来自服务器的单个数据项以更新网页的部分,而无需加载全新的页面。这个看似很小的细节对网站的性能和行为产生了巨大的影响。在本文中,我们将解释这个概念,并探讨使它成为可能的技术,例如 XMLHttpRequestFetch API

第三方 API

到目前为止,我们介绍的 API 是内置在浏览器中的,但并非所有 API 都是如此。许多大型网站和服务,例如 Google 地图、Facebook、PayPal 等,都提供 API,允许开发人员利用它们的数据或服务(例如,在您的网站上显示自定义 Google 地图,或使用 Facebook 登录来登录您的用户)。本文探讨了浏览器 API 和第三方 API 之间的区别,并展示了后者的典型用途。

绘制图形

浏览器包含一些非常强大的图形编程工具,从可缩放矢量图形 (SVG) 语言到用于在 HTML <canvas> 元素上绘制的 API(参见 Canvas APIWebGL)。本文介绍了 Canvas API,并提供了其他资源,让您了解更多信息。

视频和音频 API

HTML 带有用于在文档中嵌入富媒体的元素——<video><audio>——它们反过来又带有自己的 API,用于控制播放、搜索等。本文向您展示如何执行常见任务,例如创建自定义播放控件。

客户端存储

现代网络浏览器具有许多不同的技术,允许您存储与网站相关的数据并在需要时检索它,从而允许您长期保留数据,离线保存网站等等。本文解释了这些工作原理的基础知识。