如何从服务器获取 HTML

随着面向服务器开发的发展，当需要从服务器获取模板时，需要将 HTML 代码发送到客户端。在本文中，我们将探讨实现此目的的主要方法。所有这些方法都将使用 JavaScript，但它们的本质也可以在其他编程语言中体现。

让我们直接转到代码，看看如何在项目中实现这一点。

🌌 客户端

这里我们可以重点介绍几种从服务器获取 HTML 的方法。所有这些方法都基于向服务器发送请求。JavaScript 中有一个fetch结构可以让你做类似的事情（XMLHTTPRequest这里就不考虑了，因为它已经过时了。如果你不需要支持旧版浏览器，我强烈建议不要使用它）。

1. 🔗 使用第三方库

为了从服务器加载 HTML，我们可以使用HMPL，这是一种用于从服务器向客户端显示 UI 的模板语言。它基于发送到服务器的可定制请求，并处理成现成的 HTML。

为了使用它，让我们将其安装hmpl-js为依赖项并创建一个脚本：

npm i hmpl-js

之后，我们导入compile函数：

import { compile } from "hmpl-js";

const templateFn = compile(
  `{{ src: "/api/getForm" }}`
);

const form = templateFn();

结果：

form = {
  response: <template><h1>Contact Us</h1><form action="/submit" method="...</template>,
  status: 200
}

这里，我们得到一个template，用于存储表单。你也可以div在字符串后面添加，这样就不会再有template，而是直接在中了div。

import { compile } from "hmpl-js";

const templateFn = compile(
  `<div>{{ src: "/api/getForm" }}</div>`
);

const form = templateFn();

/*
  form = {
    response: <div><h1>Contact Us</h1><form...</div>,
    status: 200
  }
*/

在这种情况下，我们立即获得一个可以添加到 DOM 的元素。

另外，如果你能点个星支持这个项目就更好了！谢谢❤️！

💎 明星 HMPL ★

✅优点：

可重用性：您可以根据需要多次重复使用一次创建的模板，就像创建的实例一样class。
简单清晰的语法： HTML 引入了一个请求对象，其语法与 vanilla 完全相似，因此在 js 中工作时您可以轻松复制代码而不必担心，因为该模块在 JSON5 上运行。
可定制：模板语言提供了广泛的请求定制功能。与 HTMX 等类似项目不同，您几乎可以完全控制流程。
轻量级：重量较轻，约15+千字节，几乎不会对项目产生影响。
浏览器兼容性：现代 JavaScript APIfetch()在浏览器中得到广泛支持，确保大多数用例无需额外 polyfill 即可实现兼容性。

❌缺点：

依赖项：通过连接模块，您可以将附加代码连接到项目，这会占用一定数量的字节。
旧版浏览器中的现代 API 限制：尽管受到广泛支持，但像某些功能fetch()可能需要针对旧版浏览器的 polyfill，这与处理向后兼容性的某些库不同。

2. 🌊 使用 vanilla js

首先，您需要创建一个脚本文件并向服务器发出请求。文件中的代码大致如下：

main.js

fetch('/api/getForm') // URL to the HTML snippet
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.text();
})
.then(html => {
  console.log(html);
})
.catch(error => {
  console.error('Error fetching HTML:', error);
});

这里我们从服务器获取响应，如果成功，则调用该text函数来接收它。值得注意的是，HTTP 代码 100 主要表示重定向，因此在处理它们时也需要更加小心，并添加错误处理。

您可以在此处了解有关 HTTP 代码的更多信息。

✅优点：

轻量级且无依赖性：使用纯 JavaScript 无需额外的库或框架，从而减少了项目的整体大小和依赖性。
完全控制：纯 JavaScript 让您完全控制实现细节，让您能够根据需要处理网络请求、响应和 DOM 操作。
浏览器兼容性：现代 JavaScript APIfetch()在浏览器中得到广泛支持，确保大多数用例无需额外 polyfill 即可实现兼容性。
学习机会：使用原始 JavaScript 有助于开发人员理解基本概念，例如 HTTP 请求、响应和 DOM，从而提高他们的编程技能。

❌缺点：

冗长的代码：
与 Axios 等库或 React 等框架相比，纯 JavaScript 通常需要更多的样板代码，而后者可以更简洁地处理请求和更新。
错误处理：
如果没有高级库提供的抽象，管理错误（例如网络问题、无效响应）可能会变得复杂且重复。
缺乏抽象：
处理超时、重试或并发请求等任务必须手动实现，这可能很繁琐且容易出错。
可维护性：
纯用 JavaScript 编写的代码在较大的项目中可能更难维护，因为它冗长且缺乏标准化模式。
旧版浏览器中的现代 API 限制：
尽管受到广泛支持，但像某些功能fetch()可能需要针对旧版浏览器的 polyfill，这与处理向后兼容性的某些库不同。

⚙️ 后端

考虑到后端，值得注意的是，我们必须在客户端从某个地方接收模板。为此，我们可以创建一个 API 路由，通过该路由从服务器获取 HTML。首先，让我们创建需要发送到客户端的 HTML 代码：

表单.html

<h1>Contact Us</h1>
<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>

  <button type="submit">Submit</button>
</form>

这是一个简单的联系表单。如果它可以在服务器上编辑，然后在客户端编辑，那就太棒了，而且不仅可以在一个网站上编辑，还可以在多个相关网站上编辑。

为此，让我们创建一个 API 路由，通过它接收来自服务器的 HTML。对于后端部分，我们将使用 Node.js。我们将使用的框架是Express.js。它是当今最流行的框架之一，非常适合我们正在解决的任务。首先，我们指定处理 HTML 的控制器：

const express = require("express");
const expressRouter = express.Router();
const path = require("path");

const formController = (req, res) => {
  res.sendFile(path.join(__dirname, "../form.html"));
};

expressRouter.use("/getForm", formController);

然后，您需要将控制器连接到/api，以免常规站点路由与后端路由混淆。在 express.js 中，有一个应用程序入口点，所有内容都在此初始化。我们需要在这里导入控制器：

应用程序.js

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const cors = require("cors");
const PORT = 8000;
const app = express();
const routes = require("./routes/formController");

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors({ origin: true, credentials: true }));

app.set(express.static(path.join(__dirname, "src")));

app.use("/api", routes);

app.listen(PORT);

之后，我们应该/api/getForm在网站上有一个路由，我们可以从那里发送GET请求。作为响应，我们将获得 HTML。

🖋️ 结论

根据具体情况，您可以使用第一种方法或第二种方法。第二种方法虽然可以完全控制流程，但当需要处理多个组件时，它仍然不适用，因为您必须创建自己的逻辑，这会耗费时间。

感谢大家的阅读！希望这篇文章对你有所帮助！

文章来源：https://dev.to/hmpljs/how-to-fetch-get-html-from-server-4mdg