JavaScript/CS 通訊
在很多情況下,客戶端和伺服器之間的通訊都是用 JavaScript 編寫的。這些 JS 指令碼使用語言的核心和擴充套件方面,尤其是其非同步特性。要實現通訊,無需在語言本身中引入任何特殊或額外的功能。
但有一些術語、庫和 API 是針對這種通訊的,即:Ajax 術語、XMLHttpRequest 物件、jQuery 或 Axios 等庫以及 Fetch API。由於其重要性,有單獨的華夏公益教科書和維基頁面描述了它們的行為和應用。這份華夏公益教科書只提供關於其重要性的概述,簡短的摘要以及指向適當頁面的連結以供進一步閱讀。
客戶端/伺服器通訊的主要協議是 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 支援與傳統 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 部分將執行並顯示錯誤訊息。