🔥نحوه واکشی HTML از سرور

Summarize this content to 400 words in Persian Lang
با توسعه توسعه سرور محور، زمانی که نیاز به گرفتن قالب از سرور باشد، نیاز به ارسال کد HTML برای مشتری وجود دارد. در این مقاله راه های اصلی انجام این کار را بررسی خواهیم کرد. همه این راه ها از جاوا اسکریپت استفاده می کنند، اما ماهیت آنها می تواند در زبان های برنامه نویسی دیگر منعکس شود.

بیایید مستقیماً به کد حرکت کنیم و ببینیم چگونه می توان این را در پروژه ها پیاده سازی کرد.

Backend

با در نظر گرفتن باطن، شایان ذکر است که در مشتری باید قالب ها را از جایی دریافت کنیم. برای این کار می توانیم یک مسیر API ایجاد کنیم که از طریق آن HTML را از سرور می گیریم. ابتدا بیایید کد HTML را ایجاد کنیم که باید برای مشتری ارسال شود:

form.html

Contact Us

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این یک فرم تماس ساده است. اگر بتوان آن را روی سرور و سپس روی کلاینت ویرایش کرد و نه تنها در یک سایت، بلکه مثلاً در چندین سایت مرتبط نیز قابل ویرایش بود.

برای این کار یک مسیر API ایجاد می کنیم که از طریق آن HTML را از سرور دریافت می کنیم. برای قسمت Backend، از 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 یک نقطه ورود برنامه وجود دارد که در آن همه چیز مقداردهی اولیه می شود. اینجاست که باید کنترلر خود را وارد کنیم:

app.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 را دریافت خواهیم کرد.

سمت مشتری

در اینجا می‌توانیم چندین روش برای دریافت HTML از سرور برجسته کنیم. همه آنها بر اساس ارسال یک درخواست به سرور خواهد بود. در جاوا اسکریپت یک وجود دارد 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>” method=”…</template>,
status: 200
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا، ما یک را دریافت می کنیم template، جایی که فرم ما ذخیره می شود. شما همچنین می توانید یک را اضافه کنید div به رشته، سپس شما بدون a دریافت خواهید کرد template، اما به طور مستقیم در div.

import { compile } from “hmpl-js”;

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

const form = templateFn();

/*
form = {
response: ,
status: 200
}
*/

Enter fullscreen mode

Exit fullscreen mode

In this case, we immediately get an element that we can add to the DOM.

Features (Advantages):

Reusability:You will be able to reuse a template created once as many times as you want, just like, for example, making instances of a class.
Simple and clear syntax:The HTML introduces a request object, which is completely similar in syntax to vanilla, so when working in js you can easily copy the code and not worry, since the module works on JSON5.
Customizable:The template language offers a wide range of request customization. Unlike similar projects like HTMX, you can almost completely control the flow.
Lightweight:It weighs a little, about 15+ kilobytes, which will have almost no impact on the project.
Browser Compatibility:Modern JavaScript APIs like fetch() are widely supported in browsers, ensuring compatibility without extra polyfills for most use cases.

Drawbacks:

Dependencies:By connecting a module, you connect additional code to the project, which weighs a certain number of bytes.
Modern API Limitation in Older Browsers:Although widely supported, features like fetch() may require polyfills for older browsers, unlike some libraries that handle backward compatibility.

2. Using default js

First, you need to create a script file and make a request to the server there. The code in the file will be approximately as follows:

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 اطلاعات بیشتری کسب کنید.

ویژگی ها (مزایا):

سبک وزن و بدون وابستگی:استفاده از جاوا اسکریپت ساده نیاز به کتابخانه ها یا فریم ورک های اضافی را از بین می برد و حجم کلی پروژه و وابستگی ها را کاهش می دهد.
کنترل کامل:جاوا اسکریپت ساده به شما کنترل کاملی بر جزئیات پیاده سازی می دهد و به شما امکان می دهد درخواست های شبکه، پاسخ ها و دستکاری های DOM را دقیقاً در صورت نیاز انجام دهید.
سازگاری مرورگر:APIهای جاوا اسکریپت مدرن مانند fetch() به طور گسترده ای در مرورگرها پشتیبانی می شوند و از سازگاری بدون پلی پر اضافی برای اکثر موارد استفاده اطمینان می دهند.
فرصت یادگیری:کار با جاوا اسکریپت خام به توسعه دهندگان کمک می کند تا مفاهیم اساسی مانند درخواست های HTTP، پاسخ ها و DOM را درک کنند و مهارت های برنامه نویسی آنها را بهبود بخشد.

معایب:

کد مفصل:جاوا اسکریپت ساده معمولاً در مقایسه با کتابخانه‌هایی مانند Axios یا فریم‌ورک‌هایی مانند React که می‌توانند درخواست‌ها و به‌روزرسانی‌ها را به‌طور خلاصه‌تر انجام دهند، به کد boilerplate بیشتری نیاز دارند.
رسیدگی به خطا:مدیریت خطاها (به عنوان مثال، مشکلات شبکه، پاسخ های نامعتبر) می تواند بدون انتزاعات ارائه شده توسط کتابخانه های سطح بالاتر پیچیده و تکراری شود.
عدم انتزاع:کارهایی مانند رسیدگی به مهلت زمانی، تلاش های مجدد یا درخواست های همزمان باید به صورت دستی اجرا شوند، که می تواند خسته کننده و مستعد خطا باشد.
قابلیت نگهداری:ممکن است نگهداری کدهایی که صرفاً در جاوا اسکریپت نوشته شده است در پروژه های بزرگتر به دلیل پرحرفی و عدم وجود الگوهای استاندارد دشوارتر باشد.
محدودیت API مدرن در مرورگرهای قدیمی:اگرچه به طور گسترده پشتیبانی می شود، ویژگی هایی مانند fetch() ممکن است برای مرورگرهای قدیمی‌تر نیاز به polyfill داشته باشد، برخلاف برخی از کتابخانه‌ها که سازگاری با عقب را مدیریت می‌کنند.

نتیجه گیری

بسته به شرایط، می توانید از روش اول یا دوم استفاده کنید. در مورد دوم، شما کنترل کاملی بر فرآیند دارید، اما هنوز زمانی که نیاز به کار با چندین مؤلفه دارید، مناسب نیست، زیرا باید منطق خود را ایجاد کنید و این زمان می برد.

از همه شما برای خواندن متشکرم! امیدوارم این مقاله برای شما مفید بوده باشد!

همچنین، خوشحال خواهم شد که از پروژه با ستاره خود حمایت کنید. متشکرم

ستاره HMPL ☆

Contact Us

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

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

npm i hmpl-js

import { compile } from "hmpl-js";

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

const form = templateFn();

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

import { compile } from "hmpl-js";

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

const form = templateFn();

/*
  form = {
    response: 
,
    status: 200
  }
*/



    

    







In this case, we immediately get an element that we can add to the DOM.


  
  
  Features (Advantages):



Reusability:
You will be able to reuse a template created once as many times as you want, just like, for example, making instances of a class.
Simple and clear syntax:
The HTML introduces a request object, which is completely similar in syntax to vanilla, so when working in js you can easily copy the code and not worry, since the module works on JSON5.
Customizable:
The template language offers a wide range of request customization. Unlike similar projects like HTMX, you can almost completely control the flow.
Lightweight:
It weighs a little, about 15+ kilobytes, which will have almost no impact on the project.
Browser Compatibility:
Modern JavaScript APIs like fetch() are widely supported in browsers, ensuring compatibility without extra polyfills for most use cases.



  
  
  Drawbacks:



Dependencies:
By connecting a module, you connect additional code to the project, which weighs a certain number of bytes.
Modern API Limitation in Older Browsers:
Although widely supported, features like fetch() may require polyfills for older browsers, unlike some libraries that handle backward compatibility.



  
  
  2. Using default js


First, you need to create a script file and make a request to the server there. The code in the file will be approximately as follows:

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 اطلاعات بیشتری کسب کنید.

  ویژگی ها (مزایا):




سبک وزن و بدون وابستگی:
استفاده از جاوا اسکریپت ساده نیاز به کتابخانه ها یا فریم ورک های اضافی را از بین می برد و حجم کلی پروژه و وابستگی ها را کاهش می دهد.


کنترل کامل:
جاوا اسکریپت ساده به شما کنترل کاملی بر جزئیات پیاده سازی می دهد و به شما امکان می دهد درخواست های شبکه، پاسخ ها و دستکاری های DOM را دقیقاً در صورت نیاز انجام دهید.


سازگاری مرورگر:
APIهای جاوا اسکریپت مدرن مانند fetch() به طور گسترده ای در مرورگرها پشتیبانی می شوند و از سازگاری بدون پلی پر اضافی برای اکثر موارد استفاده اطمینان می دهند.


فرصت یادگیری:
کار با جاوا اسکریپت خام به توسعه دهندگان کمک می کند تا مفاهیم اساسی مانند درخواست های HTTP، پاسخ ها و DOM را درک کنند و مهارت های برنامه نویسی آنها را بهبود بخشد.



  معایب:




کد مفصل:
جاوا اسکریپت ساده معمولاً در مقایسه با کتابخانه‌هایی مانند Axios یا فریم‌ورک‌هایی مانند React که می‌توانند درخواست‌ها و به‌روزرسانی‌ها را به‌طور خلاصه‌تر انجام دهند، به کد boilerplate بیشتری نیاز دارند.


رسیدگی به خطا:
مدیریت خطاها (به عنوان مثال، مشکلات شبکه، پاسخ های نامعتبر) می تواند بدون انتزاعات ارائه شده توسط کتابخانه های سطح بالاتر پیچیده و تکراری شود.


عدم انتزاع:
کارهایی مانند رسیدگی به مهلت زمانی، تلاش های مجدد یا درخواست های همزمان باید به صورت دستی اجرا شوند، که می تواند خسته کننده و مستعد خطا باشد.


قابلیت نگهداری:
ممکن است نگهداری کدهایی که صرفاً در جاوا اسکریپت نوشته شده است در پروژه های بزرگتر به دلیل پرحرفی و عدم وجود الگوهای استاندارد دشوارتر باشد.


محدودیت API مدرن در مرورگرهای قدیمی:
اگرچه به طور گسترده پشتیبانی می شود، ویژگی هایی مانند fetch() ممکن است برای مرورگرهای قدیمی‌تر نیاز به polyfill داشته باشد، برخلاف برخی از کتابخانه‌ها که سازگاری با عقب را مدیریت می‌کنند.



  نتیجه گیری


بسته به شرایط، می توانید از روش اول یا دوم استفاده کنید. در مورد دوم، شما کنترل کاملی بر فرآیند دارید، اما هنوز زمانی که نیاز به کار با چندین مؤلفه دارید، مناسب نیست، زیرا باید منطق خود را ایجاد کنید و این زمان می برد.
از همه شما برای خواندن متشکرم! امیدوارم این مقاله برای شما مفید بوده باشد!


همچنین، خوشحال خواهم شد که از پروژه با ستاره خود حمایت کنید. متشکرم
ستاره HMPL ☆