Module 03 · JavaScript Programming for Web ApplicationsWeb 应用 JavaScript 编程
JavaScript APIsJavaScript 应用程序接口
Estimated Time: 15 mins
预计时间：15 分钟
Introduction 引言
In this section, you will explore JavaScript APIs and the REST architectural style.
在这一节中，您将探索 JavaScript API 和 REST 架构风格。
Objectives 目标
After completing this reading section you will be able to:
完成本阅读部分后，您将能够：
- Define an API and a JavaScript API
定义一个 API 和一个 JavaScript API - Describe REST architecture
描述 REST 架构 - Explain CRUD operations 解释 CRUD 操作
- Identify popular JavaScript APIs
识别流行的 JavaScript API
What are JavaScript APIs? 什么是 JavaScript API？
To understand what a JavaScript API is, it is important to first know what an API is. An API, or Application Programming Interface, is a way for two applications to communicate with each other. It delivers your request to another device, such as a database, and returns the response back to you.
要理解 JavaScript API 是什么，首先要知道 API 是什么。API，即应用程序编程接口，是两个应用程序之间进行通信的方式。它将您的请求发送到另一个设备，例如数据库，并将响应返回给您。
Imagine you are sitting in a restaurant and have selected your order. The menu outlines a list of food items, and the corresponding meals are prepared in the kitchen. Your waiter is the link between you and the kitchen, who communicates your order to the kitchen and returns the food back to you. This communication is similar to how APIs work. An API is analogous to a waiter, as it communicates a request from one device to another, and returns the response back to the first device.
想象你正坐在餐厅里，已经点好了你的餐点。菜单上列出了食物项目，相应的餐点在厨房里准备。你的服务员是你和厨房之间的联系人，他将你的订单传达给厨房，并将食物带回给你。这种沟通方式与 API 的工作原理相似。API 相当于服务员，因为它将一个设备到另一个设备的请求进行沟通，并将响应返回给第一个设备。
The menu in the example is the API documentation. In a restaurant, if you order a food item which does not exist on the menu, the waiter will inform you that it is an invalid choice, and will be incapable of delivering the food item. Similarly, each API has documentation that outlines the requests you are allowed to make, and the type of response you should expect to receive. If you try to make an invalid request, you will come across an error.
示例中的菜单是 API 文档。在餐厅里，如果你点了一道菜单上没有的菜品，服务员会告诉你这是一个无效的选择，并且无法提供这道菜品。同样，每个 API 都有文档，概述了你被允许发起的请求类型以及你应预期的响应类型。如果你尝试发起一个无效的请求，你会遇到错误。
JavaScript APIs are Application Programming Interfaces that use JavaScript scripting to dynamically access and modify content.
JavaScript API 是使用 JavaScript 脚本动态访问和修改内容的应用程序编程接口。
REST Architecture REST 架构
Most JavaScript APIs follow the Representational State Transfer (REST) architectural style. These are referred to as RESTful APIs, and follow the CRUD paradigm. CRUD stands for Create, Read, Update, and Delete, and model the four basic functionalities needed when communicating between services and with a database. In a REST environment, these CRUD operations are often aliased as follows:
大多数 JavaScript API 遵循表示状态转移（REST）架构风格。这些被称为 RESTful API，并遵循 CRUD 范式。CRUD 代表创建（Create）、读取（Read）、更新（Update）和删除（Delete），并模拟在服务之间以及与数据库通信时所需的基本功能。在 REST 环境中，这些 CRUD 操作通常被别称为：
- Create → POST 创建 → POST
- Read → GET 读取 → GET
- Update → PUT 更新 → PUT
- Delete → DELETE 删除 → 删除
As an example, imagine an API which communicates with a banking service to process online payments. It is possible to use all four CRUD operations for this API. An example of each is provided below.
例如，想象一个与银行服务通信以处理在线支付的 API。可以使用所有四个 CRUD 操作来处理此 API。下面提供了每个操作的示例。
| Method 方法 | URL | Description 描述 |
|---|---|---|
| POST | api/customer | Create a new banking customer 创建一个新的银行客户 |
| GET | api/customers/{id} | Retrieve the information of a customer 检索客户信息 |
| PUT | api/customers/{id} | Update information for a specific customer 更新特定客户的资料 |
| DELETE | api/customers/{id} | Delete a banking customer 删除银行客户 |
The URLs in each example are important, as they determine the specific item/customer that is being accessed.
每个示例中的 URL 都很重要，因为它们决定了正在访问的具体项目/客户。
In the POST request, you can see that a new customer is created with the API. Depending on the specifications of the API, this may include options to provide data for this customer, such as a name or credit card details. It may also automatically generate new information upon creation, such as an id.
在 POST 请求中，您可以看到使用 API 创建了一个新客户。根据 API 的规格，这可能包括提供客户数据的选项，例如姓名或信用卡详情。它也可能在创建时自动生成新信息，例如 ID。
The GET request allows you to retrieve all the information associated with a customer. The API assumes a unique id for each customer, that is used in the URL to specify which customer’s information you are searching. A response for this request can come in many different formats, such as JSON or XML, depending on the API.
GET 请求允许您检索与客户相关的所有信息。API 假设每个客户都有一个唯一的 ID，该 ID 用于 URL 中指定您正在搜索哪个客户的信息。对此请求的响应可以以多种不同的格式返回，例如 JSON 或 XML，具体取决于 API。
In the PUT request, you are able to update the information for a specific customer. This will overwrite the current data with new data. Similar to the GET request, you can specify a specific customer using the id. You can provide new data to be updated in different ways that are specific to the API. Some APIs allow you to include a “body” in which you can specify a load of data to be sent with the request. For example, you can attach the following body to the PUT request in order to update a customer’s first and last name:
在 PUT 请求中，您可以更新特定客户的信息。这将用新数据覆盖当前数据。类似于 GET 请求，您可以使用 id 指定特定客户。您可以通过 API 特定的方式提供要更新的新数据。一些 API 允许您在请求中包含一个“主体”，在其中您可以指定要随请求发送的大量数据。例如，您可以将以下主体附加到 PUT 请求中，以更新客户的姓名和姓氏：
{
"first_name": "Thomas",
"last_name": "Watson"
}
In the DELETE request given in the example, you can remove a customer entirely by once again providing the id.
在示例中的 DELETE 请求中，您可以通过再次提供 id 来完全删除一个客户。
Document Object Model (DOM) API 文档对象模型（DOM）API
The Document Object Model (DOM) API is one of the most basic JavaScript APIs available. It connects web pages to scripts by representing the structure of a document (e.g. an HTML web page) in memory, making it accessible for modification as required.
文档对象模型（DOM）API 是最基础的 JavaScript API 之一。它通过在内存中表示文档的结构（例如 HTML 网页）来连接网页和脚本，使其能够按需进行修改。
The DOM API is covered in more detail in the videos, and will not be reviewed here.
DOM API 在视频中进行了更详细的介绍，此处不再进行回顾。
XMLHttpRequest
A popular JavaScript API is XMLHttpRequest (XHR), which allows you to retrieve data without refreshing the entire page. This is important when you to want to update only a part of a page without disrupting what a user is currently doing on the page.
一个流行的 JavaScript API 是 XMLHttpRequest（XHR），它允许您在不刷新整个页面的情况下检索数据。这在您只想更新页面的一部分而不干扰用户当前在页面上的操作时非常重要。
XMLHttpRequest is used heavily in Asynchronous JavaScript And XML (AJAX) programming. Full documentation on its usage can be found on (this page)
XMLHttpRequest 在异步 JavaScript 和 XML（AJAX）编程中被广泛使用。关于其使用的完整文档可以在（本页）找到。
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Advanced APIs 高级 API
There are more advanced JavaScript APIs available, each with a different use and specification. Many of these APIs can be found on the official Mozilla Developer website or you can search the internet for the required API.
JavaScript API 更高级，每个都有不同的用途和规范。许多这些 API 可以在官方 Mozilla 开发者网站上找到，或者您可以在互联网上搜索所需的 API。