Technologie na klientu, AJAX

BI-WI.21-20
  • Základní postupy, technologie a standardy na straně klienta (uživatelského agenta – prohlížeče) webové aplikace.
  • Asynchronní zpracování požadavků webovým prohlížečem (AJAX), jeho výhody a nevýhody.

Základní technologie a standardy

  • Klientem (User Agentem) je v kontextu webu nejčastěji webový prohlížeč (Chrome, Firefox, Safari).

  • Jeho hlavním úkolem je přijmout kód ze serveru a přeměnit ho na interaktivní grafické rozhraní.

  • Jazyky

    • HTML - struktura a sémantický význam obsahu stránky.
    • CSS - odpovídá za vizuální prezentaci a stylování HTML prvků.
    • JS - skriptovací jazyk umožňující dynamickou manipulaci obsahu stránky po jejím načtení.

  • Webové standardy

    • W3C (World Wide Web Consortium): Historicky vydávalo standardy pro HTML a CSS.
    • WHATWG (Web Hypertext Application Technology Working Group): Dnes udržuje tzv. "Living Standard" pro HTML5 a DOM API (současný hlavní standard).
    • ECMA International: Stará se o standardizaci jazyka JavaScript (oficiálně ECMAScript).

Jak prohlížeč stránku zpracovává (Critical Rendering Path)

  1. Stáhne HTML a vybuduje DOM.
  2. Stáhne CSS a vybuduje CSSOM.
  3. Spojí DOM a CSSOM do tzv. Render Tree (obsahuje jen uzly, které budou reálně vidět - ignoruje např. <head> nebo prvky s display: none).
  4. Layout: Spočítá přesné rozměry a pozice prvků na obrazovce (kde co bude).
  5. Paint: Vykreslí pixely na monitor.

DOM (Document Object Model)

  • Model reprezentující HTML/XHTML/XML ve stromové struktuře
  • Platformově a jazykové nezávislé API pro HTML a XML dokumenty.
  • Používá reprezentace dokumentu jako strom objektů, kde každý uzel odpovídá části dokumentu.
  • Umožňuje manipulaci skriptovacími jazyky.
<html lang="cs">
  <head>
    <title>Můj Dokument</title>
  </head>
  <body>
    <h1>Nadpis</h1>
    <p>Odstavec.</p>
  </body>
</html>

Document
└── html
    ├── head
    │   └── title
    │       └── "Můj Dokument" (textový uzel)
    └── body
        ├── h1
        │   └── "Nadpis" (textový uzel)
        └── p
            └── "Odstavec." (textový uzel)

JavaScript

  • Implementuje standard skriptovacího jazyka pro Webové prohlížeče ECMAScript.

    • ECMAScript je standard (teoretická specifikace, pravidla)
    • JavaScript je konkrétní implementace tohoto standardu

  • Standard definuje syntaxi a vlastnosti jazyka, zajišťuje interoperabilitu

  • JavaScript vezme jádro definované ECMAScriptem a přidá k němu nástroje specifické pro prostředí, kde zrovna běží:

    • V prohlížeči přidá tzv. Web API (např. document.getElementById(), fetch(), window.alert()).
    • Na serveru (Node.js) přidá API pro práci se soubory, databázemi a sítí (např. fs.readFile()).

Charakteristika

  • Dynamicky typovaný
  • Prototypová dědičnost
  • Funkcionální prvky - closures, lambdy atd.

Propojení s HTML

  • Skript načítán spolu s HTML dokumentem pomocí sémantického tagu <script>.

  • JS implementuje DOM HTML API a umožňuje manipulovat obsah celého stromu.

  • JS reaguje na události od uživatele (kliknutí, stisk klávesy) nebo prohlížeče (načtení stránky)

  • Registrace EventListenerů

    • V HTML atributu onclick
    • Přiřazením funkce jako vlastnost DOM elementu element.onclick=mojeFunkce; - jeden listener na element
    • element.addEventListener('udalost', foo, useCapture) Více posluchačů, specifikace fáze.

  • Fáze zpracování eventu

    1. Capturing - od kořene DOMu k cílovému elementu
    2. Bubbling - od cílového elementu zpět ke kořeni DOMu.

SPA (Single Page Application)

  • Webová aplikace, která načte většinu obsahu a logiky najednou při prvotním požadavku a následně přepisuje aktuální stránku namísto načítání celých nových stránek ze serveru.

  • Klient obdrží téměř celou aplikaci při prvním načtení.

  • Často řešeno hotovými frameworky typu Angular, React, Vue atd.

  • Výhody

    • Nižší přenos dat - celá aplikace a HTML jednou, následně pouze dotazy na data
    • Rychlejší stránka - není potřeba překreslovat celou stránku, aplikace reaguje rychleji na akce uživatele
    • Přívětivé pro uživatele - poskytuje plynulejší zážitek obdobný desktopovým aplikacím, bez přenačítání stránek

  • Nevýhody

    • Komplikovanější správa historie prohlížeče (od HTML5 History API - pushState, replaceState)
    • SEO - vyhledávače měly dříve problém s indexací obsahu generovaného JS. Některé moderní crawlers už umí interpretovat JS.
    • JavaScript

PWA (Progressive Web Application)

  • Využití webové aplikace na PC jako “nainstalované” aplikace, ačkoliv jde stále pouze o prohlížeč, který spouští SPAčko.

Web App Manifest

  • JSON soubor, který poskytuje metadata o aplikaci

  • Název, ikonu, počáteční URL, preferovaný režim zobrazení atd.

  • Umožňuje prohlížeči “nainstalovat” PWA a definuje, jak se aplikace bude chovat při spuštění

  • Minimální obsah manifestu: name (nebo short_name), start_url, display (s hodnotou standalone, fullscreen nebo minimal-ui) a icons (s verzemi minimálně 192x192px a 512x512px).

  • Výhody

    • Offline režim aplikace
    • Vylepšený výkon a rychlost, pomocí Service Workers, které cachují požadavky.
    • Instalovatelnost jako u nativních aplikací
    • Automatické aktualizace na pozadí
    • Funkce podobné nativním aplikacím
    • Cenově efektivní vývoj pro různé platformy.

  • Nevýhody

    • Omezený přístup k HW (např. Bluetooth, NFC, ARKit, Touch ID/Face ID, zejména na iOS)
    • Nekompletní podpora napříč platformami - zejména iOS a push notif.
    • Nekonzistentní UX napříč platformami
    • JavaScript

Postupy

RAD (Rapid Application Development)

  • Rapidní vývoj s vynaložením minimálního úsilí

  • Věnovat čas logice, ne kódu

  • Příklady

    • Class-less CSS frameworky
    • JS supports
    • Hotwire

Class-less CSS frameworky

  • Zaměření na HTML-first
  • Příklady
    • Obecné (Bootstrap, Bulma)
    • Utility (Tailwind, Materialize)
    • Lightweight (Pure, Skeleton)

JS supports

  • Promítání JS uvnitř HTML
  • Usnadňují typické problémy v HTML
  • Příklad
    • Alpine.js
<div x-data={ open: false }>
	<button @click="open = true">Expand</button>
	<span x-show="open">
		... obsah ...
	</span>
</div>

Hotwire

  • Prakticky JS supports
  • Lze použít např. v Symfony

AJAX

Asynchronous JavaScript and XML

  • Není samostatná technologie, ale množina technologií

  • Popisuje schopnost stránky komunikovat se serverem asynchronně bez nutnosti znovunačtení celé stránky.

    • Načítá se pouze změněná část
    • Část aplikační logiky je u klienta a server funguje dále jako API poskytující data

  • Klasická webová aplikace:

    • Prohlížeč pošle požadavek
    • Server zpracuje a pošle celou novou HTML stránku.
    • Každá akce = nové načtení.

  • AJAX aplikace:

    • Prohlížeč načte úvodní HTML.
    • Interakce uživatele mohou vyvolat JS kód
    • AJAX engine (např. XMLHttpRequest) pošle požadavek na server na pozadí.
    • Server vrátí jen potřebná data (JSON, XML).
    • JS data zpracuje a aktualizuje jen část DOMu.

../../Attachments/Pasted image 20260620202329.png

  • Výhody

    • Zkrácení odezvy aplikace
    • Menší množství přenášených dat v jednom požadavku
    • Úspora zdrojů na serveru

  • Nevýhody

    • Komplikovanější práce s historií (oznámit prohlížeči pomocí History Push API)
    • Problematičtější bookmarky
    • Klient/crawleři nemusejí vykonávat JS
    • Vyšší počet požadavků
    • Komplexnější kód

Vytvořeno: 20. 6. 2026, 22:38
Poslední aktualizace: 20. 6. 2026, 23:45