資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 HTML5 中呼叫 Web 服務？
簡介
呼叫 Web 服務是網路上最常用的服務之一。它指的是與軟體系統通訊的方式。這種通訊可以發生在客戶端與伺服器之間、對等之間等等。HTML5 作為 HTML 的最新版本，提供了許多方法，例如 XMLHttpRequest 物件、Axios 和 fetch 等 API 以及 WebSockets 等。此 API 允許使用者根據需要獲取靜態的、即時的或動態的內容。
在本文中，我們將學習如何使用不同的方法（例如呼叫 API、WebSockets 等）來呼叫 Web 服務。
XMLHttpRequest
由於其廣泛的靈活性和優勢，它是開發人員的熱門選擇。它允許在不重新載入頁面的情況下更新頁面，這廣泛用於聊天、新聞等應用程式中。它允許客戶端計算機在載入特定頁面後請求資料。這使得網頁具有高度的動態性。此外，客戶端計算機還可以在顯示頁面的同時在後臺向伺服器傳送資料。
示例
<!DOCTYPE html>
<html lang="en">
<body>
<div id="data"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqres.in/api/users?page=2", true);
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
var response = JSON.parse(this.responseText);
var dataDiv = document.getElementById("data");
dataDiv.innerHTML = JSON.stringify(response);
}
};
xhr.send();
</script>
</body>
</html>
解釋
這段 HTML 程式碼從位於 "https://reqres.in/api/users?page=2" 的 Web 服務 API 獲取資料。JavaScript 程式碼向此 API 傳送 XMLHttpRequest 並等待響應。
如果響應成功（即狀態為 200），則將其解析為 JSON 並透過設定 ID 為“data”的 <div> 元素的 innerHTML 在 HTML 文件中顯示。這會導致資料顯示在網頁上。
Fetch API
Fetch API 是 XMLHttpRequest 物件的現代替代品。它提供了一種更簡單、更強大的呼叫 Web 服務的方法。Fetch API 基於 Promise，並支援 REST 和 SOAP Web 服務。
示例
<!DOCTYPE html>
<html lang="en">
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Avatar</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
fetch("https://reqres.in/api/users?page=2")
.then((response) => response.json())
.then((data) => {
var dataTable = document.getElementById("data-table");
var tbody = dataTable.getElementsByTagName("tbody")[0];
data.data.forEach((user) => {
var row = document.createElement("tr");
var idCell = document.createElement("td");
idCell.innerHTML = user.id;
var emailCell = document.createElement("td");
emailCell.innerHTML = user.email;
var firstNameCell = document.createElement("td");
firstNameCell.innerHTML = user.first_name;
var lastNameCell = document.createElement("td");
lastNameCell.innerHTML = user.last_name;
var avatarCell = document.createElement("td");
avatarCell.innerHTML = "<img src='" + user.avatar + "' />";
row.appendChild(idCell);
row.appendChild(emailCell);
row.appendChild(firstNameCell);
row.appendChild(lastNameCell);
row.appendChild(avatarCell);
tbody.appendChild(row);
});
});
</script>
</body>
</html>
解釋
這段程式碼使用 fetch API 從 Web 服務 URL "https://reqres.in/api/users?page=2" 獲取資料。然後，它建立一個包含 ID、電子郵件、名字、姓氏和頭像列的表格，並使用 DOM 操作方法使用從 URL 獲取的資料填充表格。最後，它在網頁上顯示錶格。
WebSockets API
WebSockets API 是一種雙向通訊協議，它使客戶端和伺服器之間能夠進行即時通訊。WebSockets API 適用於需要即時更新的應用程式，例如聊天應用程式和線上遊戲。
在 VS Code 中開啟一個資料夾，並在終端中執行以下命令：
yarn add ws or npm install ws
現在建立一個 JavaScript 檔案，例如 index.js
在其中新增以下程式碼：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('WebSocket connection established.');
ws.on('message', function incoming(message) {
console.log(`Received message: ${message}`);
ws.send(`You said: ${message}`);
});
ws.on('close', function close() {
console.log('WebSocket connection closed.');
});
ws.on('error', function error(err) {
console.error('WebSocket error:', err);
});
});
執行程式碼。
建立一個名為“index.html”的 HTML 檔案，並在其中新增以下程式碼：
<!DOCTYPE html>
<html lang="en">
<body>
<script>
const socket = new WebSocket("ws://:8080");
socket.addEventListener("open", (event) => {
console.log("WebSocket connection established.");
socket.send("Hello, server!");
const body = document.querySelector("body");
const message = document.createElement("p");
message.textContent = "WebSocket connection established!";
body.appendChild(message);
});
socket.addEventListener("message", (event) => {
console.log(`Received message: ${event.data}`);
});
socket.addEventListener("close", (event) => {
console.log("WebSocket connection closed.");
});
socket.addEventListener("error", (event) => {
console.error("WebSocket error:", event.error);
});
</script>
</body>
</html>
如果連線成功，您將收到以下訊息：
WebSocket 連線已建立！
解釋
此處的 JavaScript 程式碼用於與伺服器互動。它在埠號 8080 上建立連線。我們定義了四個函式，即連線、傳入、關閉和錯誤，具體取決於生命週期方法。
接下來，我們建立了 HTML 檔案，首先在 localhost 埠 8080 上建立連線。如果我們成功建立了連線，我們就在前端顯示了成功訊息。
結論
在 HTML5 中，可以使用 JavaScript API（例如 XMLHttpRequest 或 Fetch API）來呼叫 Web 服務，允許開發人員發出 HTTP 請求以檢索和處理各種格式的資料。這使得能夠建立可以與外部服務和資料庫互動的動態網頁。但是，開發人員應根據具體需求選擇合適的方法。
1K+ 次瀏覽
