Scribd
Încărcați
9 vizualizări2 pagini

HTMX

htmx este o bibliotecă care permite utilizarea funcționalităților moderne ale browserului direct din HTML, fără a necesita JavaScript. Aceasta extinde modelul hipertextului, permițând elementelor să facă request-uri HTTP și să actualizeze conținutul paginii. htmx suportă diverse atribute pentru gestionarea cererilor AJAX, integrarea cu browser-ul și oferă funcționalități suplimentare pentru îmbunătățirea interacțiunii utilizatorului.

Încărcat de

Daria Bobocea
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
9 vizualizări2 pagini

HTMX

htmx este o bibliotecă care permite utilizarea funcționalităților moderne ale browserului direct din HTML, fără a necesita JavaScript. Aceasta extinde modelul hipertextului, permițând elementelor să facă request-uri HTTP și să actualizeze conținutul paginii. htmx suportă diverse atribute pentru gestionarea cererilor AJAX, integrarea cu browser-ul și oferă funcționalități suplimentare pentru îmbunătățirea interacțiunii utilizatorului.

Încărcat de

Daria Bobocea
Drepturi de autor
© All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd

Ce este htmx

Este o bibliotecă care permite folosirea direct din HTML a funcționalităților moderne ale browserului, fără a
scrie JavaScript.. Extinde modelul hipertextului:

o orice element poate face request HTTP


o orice eveniment poate declanșa un request
o toate metodele HTTP sunt suportate (GET, POST, PUT, DELETE etc.)
o orice element poate fi țintă pentru update.
o Serverul răspunde de obicei cu HTML, nu JSON.

Atribute de bază (pentru AJAX din HTML)


Atribut Ce face

hx-get Trimite un request GET la URL


o Folosit când vrem să obținem date sau să încărcăm conținut nou.
hx-post Trimite un POST (date noi)
o Folosit pentru formulare, trimitere de date noi, acțiuni care modifică ceva.
hx-patch
Trimite un PATCH (modificare parțială)
hx-delete
Trimite un DELETE (ștergere resursă)
hx-trigger Definește evenimentul care pornește request-ul
o Implicit: click (pentru butoane) sau change (pentru input).
o Exemple: mouseenter, keyup, submit, every 2s (polling).
hx-target
Indică unde se inserează răspunsul
hx-swap Controlează cum se inserează răspunsul

o innerHTML (default) → înlocuiește conținutul interior

o outerHTML → înlocuiește întreg elementul

o beforebegin / afterend → inserează înainte sau după element

o beforeend / afterbegin → inserează la început sau sfârșit în interior

o none → ignoră conținutul răspunsului (dar procesează header-ele/trigger-ele)


hx-put
Trimite un PUT (înlocuire totală resursă)

Funcționalități suplimentare
o Trigger modifiers: once, delay, throttle, changed, from:<selector>
o Polling: hx-trigger="every 2s" ->face request periodic.
o Indicators: clasa .htmx-indicator arată progresul (ex: spinner).
o Out-of-band swaps (hx-swap-oob) -> înlocuiește direct elementul corespunzător din DOM.
o hx-include / hx-params -> includ sau exclud parametri suplimentari în request.
o hx-confirm -> confirmare simplă pentru acțiuni critice.
o hx-boost -> transformă link-urile și formularele în request-uri AJAX.

Integrare cu browser-ul
o History API -> hx-push-url permite navigație cu back/forward fără reîncărcare completă.
o Caching -> suportă ETag, Last-Modified, Vary.

Extensii
o SSE și WebSockets (prin extensii).
o Morph swaps (preservă focus, stare video etc.).
o Preload, response-targets, idiomorph etc.

Securitate
o Escape pentru conținut de la utilizatori (prevenirea XSS).
o hx-disable ->blochează procesarea atributelor htmx pe o secțiune.
o Config opționale: [Link], allowEval, allowScriptTags, etc.
o Suport pentru CSRF via hx-header.

S-ar putea să vă placă și