数据结构
网络
关系数据库管理系统 (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://127.0.0.1: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+ 次浏览
