如何在 HTML5 中调用 Web 服务?
简介
调用 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 基于承诺并支持 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 或 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://localhost: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 连接已建立!
说明
此处的 JavsScript 代码用于与服务器交互。它会在端口号 8080 上建立连接。我们根据生命周期方法定义了四个函数，分别是 connection、incoming、close 和 error。
接下来，我们创建了 HTML 文件，其中首先与本地主机端口 8080 建立了连接。如果连接成功建立，我们会在前端显示成功消息。
总结
在 HTML5 中，可以使用 JavaScript API(例如 XMLHttpRequest 或 Fetch API)调用 Web 服务，从而允许开发人员发出 HTTP 请求来检索和处理各种格式的数据。这使得创建能够与外部服务和数据库交互的动态网页成为可能。然而，选择哪种方法取决于开发人员的具体要求。
