Lấy HTML Từ Máy Chủ: Hướng Dẫn Chi Tiết Từ Backend Đến Frontend

Trong kỷ nguyên công nghệ hiện đại, việc cung cấp mã HTML từ server đến client thông qua các template là vô cùng quan trọng. Bài viết này sẽ hướng dẫn bạn những phương pháp chính để thực hiện điều này bằng JavaScript, đồng thời có thể áp dụng cho các ngôn ngữ lập trình khác.

Phần 1: Xây Dựng Backend và API Route

Để thực hiện việc này, trước tiên bạn cần xây dựng một API route trên backend nhằm phục vụ cho việc truyền tải HTML đến client. Hãy tạo một file HTML đơn giản cho form liên hệ mà bạn có thể chỉnh sửa và sử dụng cho nhiều trang web khác nhau:

File form.html

<h1>Liên Hệ Chúng Tôi</h1>
<form action="/submit" method="POST">
  <label for="name">Tên:</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">Tin Nhắn:</label><br>
  <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>

  <button type="submit">Gửi</button>
</form>

Tiếp theo, hãy tạo API route để nhận được HTML từ server. Dưới đây là cách thực hiện bằng Node.js với framework Express.js:

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);

Kết nối controller này tới /api trong file app.js để dễ dàng phân biệt với các route thông thường:

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.use(express.static(path.join(__dirname, "src")));
app.use("/api", routes);

app.listen(PORT);

Giờ đây, bạn đã có route /api/getForm để gửi request GET và nhận lại HTML.

Phần 2: Lấy HTML Từ Phía Client

Từ phía client, bạn có nhiều cách để lấy HTML từ server, tất cả đều dựa trên việc gửi yêu cầu. Trong JavaScript hiện đại, chúng ta có thể sử dụng phương thức fetch (không nên sử dụng XMLHTTPRequest vì tính lạc hậu của nó). Dưới đây là hai phương pháp chính:

1. Sử Dụng Thư Viện HMPL

HMPL là ngôn ngữ template giúp bạn hiển thị UI từ server sang client thông qua các yêu cầu tùy chỉnh gửi đến server và nhận về HTML. Để thực hiện điều này, bạn cần cài đặt thư viện hmpl-js:

npm i hmpl-js

Sau đó, bạn có thể import hàm compile từ thư viện này:

import { compile } from "hmpl-js";

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

const form = templateFn();

Kết quả bạn nhận được sẽ là:

form = {
  response: <template><h1>Liên Hệ Chúng Tôi</h1><form action="/submit" method="...</template>,
  status: 200
}

Bạn cũng có thể thêm một thẻ div vào chuỗi để dễ dàng nhận về phần tử div:

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

const form = templateFn();

Kết quả sẽ là:

form = {
  response: <div><h1>Liên Hệ Chúng Tôi</h1><form...</div>,
  status: 200
}

Ưu Điểm:

1. Khả năng tái sử dụng: Có thể sử dụng nhiều lần mẫu đã tạo.
2. Cú pháp đơn giản: Dễ dàng sử dụng trong các mã JavaScript.
3. Tùy chỉnh linh hoạt: Cung cấp khả năng điều chỉnh yêu cầu rất mạnh mẽ.
4. Khối lượng nhẹ: Chiếm khoảng 15 KB trong dự án.
5. Tương thích trình duyệt: Hỗ trợ tốt các API JavaScript hiện đại, không cần polyfill.

Nhược Điểm:

1. Phụ thuộc: Kết nối thêm mã vào dự án có thể tăng kích thước.
2. Hạn chế trên trình duyệt cũ: Cần polyfill cho một số tính năng bên trong.

2. Sử Dụng JavaScript Thuần

Việc tạo một file script và gửi request đến server cũng là một phương pháp hay:

fetch('/api/getForm') // URL tới HTML snippet
.then(response => {
  if (!response.ok) {
    throw new Error(`Lỗi HTTP! Trạng thái: ${response.status}`);
  }
  return response.text();
})
.then(html => {
  console.log(html);
})
.catch(error => {
  console.error('Lỗi khi lấy HTML:', error);
});

Đoạn mã này giúp bạn nhận response từ server một cách đơn giản. Nếu thành công, hàm text() sẽ được gọi để lấy dữ liệu. Hãy chú ý xử lý các mã HTTP cũng như các lỗi có thể xảy ra.

Ưu Điểm:

1. Nhẹ và không phụ thuộc: Không cần đến thư viện bổ sung nào.
2. Kiểm soát hoàn toàn: Bạn được toàn quyền quyết định mọi phần của quy trình.
3. Tương thích tốt với trình duyệt: Không cần lo lắng về việc thêm polyfill cho hầu hết các trường hợp.
4. Cơ hội học tập tốt: Giúp bạn hiểu rõ hơn về các khái niệm cơ bản trong lập trình web.

Nhược Điểm:

1. Mã dài dòng: Cần viết nhiều mã hơn mà không có trừu tượng hóa.
2. Xử lý lỗi khó khăn: Quản lý lỗi có thể trở nên phức tạp.
3. Thiếu tính trừu tượng: Một số tác vụ cần được thực hiện thủ công.
4. Khả năng bảo trì kém: Dễ gây khó khăn trong dự án lớn.

Kết Luận

Tùy theo nhu cầu và tình huống cụ thể, bạn có thể lựa chọn một trong hai phương pháp trên. Phương pháp sử dụng JavaScript thuần sẽ giúp bạn kiểm soát hoàn toàn, nhưng có thể tốn thời gian hơn nếu cần làm việc với nhiều thành phần khác nhau trong giao diện.
source: viblo