XHR (XMLHttpRequest)

Co je XMLHttpRequest (XHR)?

XMLHttpRequest neboli XHR je JavaScript API, které umožňuje webovým stránkám komunikovat se serverem asynchronně – tedy posílat a přijímat data bez nutnosti obnovit celou stránku. Jednoduše řečeno, XHR je technologie, díky které můžete na webu provést akci (například odeslat formulář, načíst nový obsah, aktualizovat komentáře) a web zareaguje okamžitě, aniž by se celá stránka musela znovu načíst. Před vznikem XHR v roce 2000 každá interakce s serverem znamenala kompletní reload stránky – kliknete na tlačítko, stránka se celá znovu načte. To bylo pomalé a nepohodlné.

XHR revolucionizoval webový vývoj a umožnil vznik moderních interaktivních webových aplikací jako Gmail, Google Maps nebo Facebook. Když na Facebooku přidáte komentář, stránka se neobnoví – XHR pošle komentář na server na pozadí a server odpoví potvrzením. JavaScript pak zobrazí komentář bez reloadu. XHR je základ technologie AJAX (Asynchronous JavaScript and XML), která definovala moderní web. I když dnes existují modernější API jako Fetch, XHR je stále široce používaný a podporovaný ve všech prohlížečích.

Jak XHR funguje - základní princip

XHR funguje na principu asynchronní komunikace mezi prohlížečem a serverem. Představte si to jako dialog dvou lidí, kde jeden může mluvit, zatímco druhý dělá něco jiného (asynchronně), místo aby čekal na odpověď (synchronně). Klasický web fungoval synchronně – kliknete na odkaz, prohlížeč čeká, server odpovídá, prohlížeč vykresluje novou stránku. Celá doba čekání je stránka zmrzlá. XHR pracuje asynchronně – JavaScript pošle požadavek na server, ale stránka zůstává funkční. Uživatel může scrollovat, číst obsah, interagovat s jinými prvky. Když server odpoví, JavaScript zpracuje odpověď a aktualizuje jen tu část stránky, která se má změnit.

Základní životní cyklus XHR požadavku: 1) Vytvoříte nový XHR objekt: const xhr = new XMLHttpRequest(); 2) Definujete, co se má stát, když server odpoví (event listener na onload). 3) Otevřete spojení a specifikujete metodu (GET, POST) a URL: xhr.open('GET', '/api/data'); 4) Odešlete požadavek: xhr.send(); 5) Server zpracuje požadavek a vrátí odpověď. 6) Event listener onload se spustí, JavaScript zpracuje data a aktualizuje DOM.

XHR vs Fetch API - rozdíly a kdy co použít

• XHR: Starší, ale robustní

XMLHttpRequest existuje od roku 2000 a má 100% podporu ve všech prohlížečích včetně Internet Exploreru. Syntaxe je složitější a verbózní – musíte vytvořit objekt, nastavit event listenery, ručně kontrolovat status kódy. Výhodou je pokročilá kontrola nad požadavkem – můžete sledovat progress uploadu/downloadu pomocí onprogress eventu, což je užitečné pro nahrávání velkých souborů s progress barem. XHR také umožňuje zrušit požadavek metodou abort().

• Fetch API: Moderní a elegantní

Fetch API je moderní alternativa zavedená v roce 2015, která používá Promises místo callbacků. Syntaxe je čistší a čitelnější: fetch('/api/data').then(response => response.json()).then(data => console.log(data)). Fetch je založen na Promises, což umožňuje použití async/await pro ještě lepší čitelnost kódu. Nevýhodou je absence sledování progress eventu (částečně řešitelné pomocí Streams API) a chybějící podpora starších prohlížečů jako IE11.

• Kdy použít XHR

Pokud potřebujete podporu Internet Exploreru nebo starších prohlížečů, XHR je jistá volba. Také pokud potřebujete sledovat progress nahrávání/stahování souborů – například upload form s progress barem ukazujícím „Nahráno 45% ze 100 MB". Pro tyto use cases je XHR stále nejlepší řešení. Mnoho starších knihoven jako jQuery AJAX interně používá XHR.

• Kdy použít Fetch

Pro moderní webové aplikace targetující aktuální prohlížeče je Fetch lepší volba. Čistší syntaxe, nativní podpora Promises a async/await, lepší integrace s moderním JavaScriptem. Pokud nepotřebujete progress tracking nebo podporu IE11, Fetch je doporučená volba. Kombinace s async/await vytváří velmi čitelný kód: const data = await fetch('/api').then(res => res.json()).

• Axios: Best of both worlds

Axios je populární JavaScript knihovna, která kombinuje výhody obou přístupů. Interně používá XHR (podpora starších prohlížečů), ale nabízí Promise-based API jako Fetch. Přidává automatickou transformaci JSON, lepší error handling, podporu pro interceptory (middleware) a progress tracking. Pro komplexní aplikace je Axios často nejlepší volbou.

Zpracování odpovědi serveru (JSON, XML, text)

• JSON – nejběžnější formát

JSON (JavaScript Object Notation) je dnes standard pro výměnu dat mezi klientem a serverem. Server vrátí data jako text v JSON formátu, například: {"name": "Produkt", "price": 999}. V JavaScriptu použijete JSON.parse(xhr.responseText) pro převod textu na JavaScript objekt, se kterým můžete dále pracovat. Nebo můžete nastavit xhr.responseType = 'json' a XHR automaticky parsuje odpověď – pak stačí xhr.response bez nutnosti parsování.

• XML – starší formát

XML (Extensible Markup Language) byl původní formát pro AJAX (odtud písmeno X v XHR). Dnes je méně používaný, ale některé starší API ho stále používají. Server vrací strukturovaná data v XML značkách. Pro zpracování použijete xhr.responseXML, které vrátí DOM Document objekt. Pak můžete používat metody jako querySelector pro navigaci v XML struktuře.

• Text – prostý text

Pro jednoduché odpovědi jako „OK", „Error" nebo HTML fragment použijete xhr.responseText, který vrátí odpověď jako prostý string. Pokud server vrací HTML, můžete ho vložit do DOMu pomocí element.innerHTML = xhr.responseText. To je častý use case pro načítání částí stránky dynamicky.

• Binární data – soubory, obrázky

XHR umožňuje stahovat i binární data jako obrázky nebo PDF soubory. Nastavte xhr.responseType = 'blob' a server vrátí binární data jako Blob objekt. Pak můžete vytvořit URL pomocí URL.createObjectURL(xhr.response) a zobrazit obrázek nebo nabídnout soubor ke stažení. Užitečné pro generování preview obrázků nebo stahování souborů pomocí JavaScriptu.

XHR a bezpečnost - CORS a zabezpečení

CORS (Cross-Origin Resource Sharing) je bezpečnostní mechanismus, který omezuje, které domény mohou komunikovat s vaším API. Představte si situaci: váš web běží na www.example.com a pokusíte se XHR požadavkem načíst data z api.jinadomena.com. Prohlížeč automaticky zablokuje tento požadavek kvůli Same-Origin Policy – bezpečnostní pravidlo, které zabraňuje škodlivým webům číst data z jiných domén bez povolení. To je ochrana proti útokům, kdy útočník na svém webu spustí JavaScript, který by četl data z vašeho bankovního účtu (pokud jste přihlášeni).

CORS řeší cross-domain požadavky pomocí HTTP hlaviček. Server, ze kterého chcete data číst (api.jinadomena.com), musí v odpovědi zahrnout hlavičku: Access-Control-Allow-Origin: https://www.example.com. To říká prohlížeči: „Tuto doménu povolujeme". Pro veřejná API se často používá Access-Control-Allow-Origin: * (povoleno pro všechny domény). Pokud vidíte v konzoli chybu „CORS policy: No 'Access-Control-Allow-Origin' header", znamená to, že server nepovolil vaši doménu. Řešení je na straně serveru – vývojář backendu musí přidat příslušné hlavičky.

Praktické využití XHR v moderních webech

• Formuláře bez reloadu stránky

Klasický use case – uživatel vyplní kontaktní formulář a klikne „Odeslat". Místo reloadu celé stránky XHR pošle data na server, server je zpracuje (např. pošle email) a vrátí potvrzení. JavaScript zobrazí zprávu „Děkujeme, brzy se ozveme" bez opuštění stránky. Výrazně lepší UX než klasický formulář s reloadem.

• Infinite scrolling

Weby jako Facebook, Instagram nebo Twitter načítají nový obsah, když scrollujete na konec stránky. JavaScript detekuje, že jste se přiblížili k bottom, pošle XHR požadavek na server pro dalších 10 příspěvků, server je vrátí jako JSON a JavaScript je přidá do DOMu. Nemusíte klikat na „Další strana" – obsah se načítá plynule.

• Autocomplete a search suggestions

Když začnete psát do vyhledávacího pole na Googlu, okamžitě vidíte návrhy. To funguje pomocí XHR – s každým napsaným písmenem se pošle požadavek na server, který vrátí seznam návrhů. Debouncing zajišťuje, že se nepošle požadavek při každém keystroke, ale až když uživatel přestane psát na 300ms.

• Real-time notifikace

Sociální sítě používají XHR polling – každých 30 sekund se pošle požadavek na server, který zkontroluje, jestli nejsou nové notifikace, zprávy nebo updates. Pokud ano, server je vrátí a JavaScript aktualizuje notifikační ikonku. Modernější přístup je WebSocket pro skutečný real-time, ale XHR polling je jednodušší implementace.

• Dynamické načítání obsahu

Single Page Applications (SPA) jako Gmail načítají různé sekce webu bez reloadu. Kliknete na „Sent" složku, XHR načte seznam odeslaných emailů ze serveru a JavaScript překreslí stránku. URL se změní pomocí History API, ale stránka se fyzicky nenačítá – vše běží na straně klienta s komunikací přes XHR/Fetch.

Související pojmy