跳转到内容

JavaScript/CS 通信

来自维基教科书,开放世界中的开放书籍



在很多情况下,客户端和服务器之间的通信都是用 JavaScript 编写的。这些 JS 脚本使用语言的核心和扩展方面,尤其是其异步特性。要实现通信,无需在语言本身中引入任何特殊或额外的功能。

但有一些术语、库和 API 是针对这种通信的,即:Ajax 术语、XMLHttpRequest 对象、jQueryAxios 等库以及 Fetch API。由于其重要性,有单独的维基教科书和维基页面描述了它们的行為和应用。这份维基教科书只提供关于其重要性的概述,简短的摘要以及指向适当页面的链接以供进一步阅读。

XMLHttpRequest

[编辑 | 编辑源代码]

客户端/服务器通信的主要协议是 http(s)。它提供从服务器读取数据 (GET) 和更改服务器数据 (POST, PUT, PATCH, DELETE) 的命令。这些命令在一个名为 XMLHttpRequest 的对象中传输。它还包含两个方向的内容(数据):到服务器和从服务器。如今,数据主要以 JSON 格式化 - 尽管它的名字是 XMLHttpRequest,代表它最初使用的 XML 格式。

如何使用 XMLHttpRequest 对象,请参见以下内容

XMLHttpRequest 返回的响应 (数据) 可能包含 HTML 片段或其他用于在本地创建 HTML 片段的信息,例如,数据库中的数据,这些数据将显示在 HTML 表格中。因此,它(除其他外)是实现单页应用程序 (SPA) 的基石。

直接使用 XMLHttpRequest 并不是过时的方法,而是一种遗留技术,您需要考虑很多细节。基于 XMLHttpRequest 和其他 API 的库可以简化您的工作。

HTTP 协议的异步行为非常重要,以至于它成为核心术语之一:“异步 JavaScript 和 XML,或 Ajax,本身并不是一项技术,而是一种将多种现有技术组合使用的方法,包括 HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT,以及最重要的 XMLHttpRequest 对象。” [1].

您可以在以下网站找到简短的示例

jQuery 是一个 JavaScript 库,它简化了常用的活动,如 DOM 遍历和操作、事件处理和客户端/服务器通信。您可以在以下网站找到更多信息和示例

Axios 是一个 JavaScript 库。它实现了浏览器和 Web 服务器 node.js 的客户端。Axios 支持 promise

Fetch API

[编辑 | 编辑源代码]

fetch API 支持与传统 XMLHttpRequest 对象及其接口相同的特性。它是一个全新的实现(与 XMLHttpRequest 有一些细微的差异),并且在所有现代浏览器中可用;无需任何额外的库或框架。它是 Web API 家族(服务工作者、DOM API、缓存 API 等)的成员。

尽管它的名字是 fetch,但它不仅从服务器读取数据。它还支持 PUT、POST 或 DELETE 等 HTTP 命令。

您可以在以下网站找到更多信息

这份维基教科书中给出了一个 完整的示例。以下是脚本的结构

fetch('https://jsonplaceholder.typicode.com/users') // an example page
  .then((response) => { return response.json() })   // pick the json part
  .then((users) => { console.log(users) })          // show result
  .catch((err) => console.log('Some error occurred: ' + err.message));

fetch 命令请求一个示例页面。此页面始终以 json 格式返回十个地址的数组。第一个 then 从结果中提取 json 部分,第二个 then 在控制台中显示它。如果发生错误(网络、URL 键入错误等),catch 部分将执行并显示错误消息。

参考文献

[编辑 | 编辑源代码]
  1. MDN: Ajax
华夏公益教科书