Zkratka AJAX (Asynchronous Javascript And XML) zní těžkopádně, ale popisuje jednoduchý koncept: aktualizace částí webové stránky bez opětovného načtení celé stránky.
Dříve, pokud jste potřebovali nová data, museli jste čekat. Klikli jste na odkaz. Obrazovka zamrzla. Stránka zbělela. Pak se vše stáhlo znovu.
AJAX toto pravidlo změnil. To umožnilo prohlížečům komunikovat se servery na pozadí. Můžete zadat hledaný výraz a okamžitě vidět výsledky. Žádný restart. Žádná bílá obrazovka. Pouze data.
Nebyl to nový vynález. Jednalo se o kombinaci existujících nástrojů používaných novým způsobem.
Základní technologie asynchronního webdesignu
AJAX není jen jedna technologie. Toto je pracovní postup. Spoléhá na koordinaci standardních webových technologií.
Je založen na objektu XMLHttpRequest. Toto je vestavěná funkce JavaScriptu. Umožňuje klientským skriptům iniciovat požadavky HTTP (jako GET nebo POST) na server. Prohlížeč odešle požadavek a nečeká na odpověď, než bude pokračovat ve vykreslování stránky. Toto je „asynchronní“ část.
Když server odpoví, JavaScript přijme data. Analyzuje je. Aktualizuje model dokumentu (DOM). Uživatel vidí změny, aniž by opustil stránku.
„AJAX se vyznačuje architekturou, ve které klientský kód spravuje získávání dat, interpretaci a přizpůsobování zobrazení v reálném čase, bez celkového opětovného načítání nebo ztráty interaktivity.“
Po dlouhou dobu tato data přicházela ve formátu XML. Odtud název. XML je nadbytečné. Je těžký.
Později byl nahrazen JSON (JavaScript Object Notation). JSON je jednodušší. S JavaScriptem je to jednodušší. Moderní rámce, jako je jQuery a fetch API, ještě více usnadnily správu těchto požadavků. Základní princip ale zůstává stejný: oddělit uživatelské rozhraní a komunikaci se serverem.
Proč na kompatibilitě prohlížečů záleželo
Na začátku éry to bylo těžké.
Ne všechny prohlížeče podporovaly XMLHttpRequest. Nebo to zavedli jinak.
Internet Explorer 5 a vyšší nakonec dohnal konkurenci. Po něm následoval Mozilla Firefox. Safari a Chrome se k tomuto procesu připojily později. Tyto funkce dnes nativně podporuje každý moderní prohlížeč.
Tato konvergence umožnila vývojářům vytvářet složité interakce, které fungovaly všude. Dříve jste museli psát „berličky“, aby kód fungoval ve Firefoxu, ale ne v IE. Nebo naopak.
Dnes se pozornost přesunula spíše na logiku než na hacky na kompatibilitu.
Aplikace v reálném životě, které definují uživatelskou zkušenost
AJAX jste použili tisíckrát. Pravděpodobně vás to ani nenapadne.
Vezměme si Gmail. Když otevřete poštovní schránku, nemusíte znovu načítat stránku, abyste si mohli přečíst nový e-mail. Klientská strana stahuje nejnovější zprávy na pozadí. E-maily můžete přetahovat, mazat nebo archivovat. Stránka zůstane na svém místě. Data se aktualizují.
Windows Live Hotmail dělal něco podobného v prvních dnech. Mapy Google tuto technologii používají neustále. Posouváte mapu. Prohlížeč požaduje nové fragmenty mapy. Objevují se okamžitě. Nečekáte na úplné načtení stránky.
LiveSearch je klasický příklad. Když zadáte klíčová slova, vyhledávač se dotáže serveru. Výsledky se zobrazí v seznamu. Kliknete na jeden z nich. Stránka se posune na výsledek. To vše se děje prostřednictvím volání AJAX.
Oblasti použití jsou nekonečné.
- Dynamické sekce komentářů
- Formuláře s automatickým ukládáním
- Akcie v reálném čase
- Nekonečné zpravodajství
Tyto funkce vytvářejí pocit „jednostránkové aplikace“ (SPA). Stránka se chová spíše jako desktopová aplikace. Je citlivý. Vypadá jako živý.
Posun k jednostránkovým aplikacím (SPA)
AJAX vydláždil cestu SPA.
Na tradičním webu každé kliknutí znamená načtení nové stránky. Prohlížeč zahodí starý DOM a vytvoří nový.
Ve SPA se domovská stránka načte jednou. JavaScript se stará o veškerou následnou navigaci. Dynamicky mění obsah. Adresa URL se může změnit, ale stránka se znovu nenačte.
To vyžaduje složitější klientský kód. Musíme řídit stát. Je třeba řešit směrování. Ale uživatelská zkušenost je lepší než ta tradiční.
Sociální média na to spoléhají. Když odešlete aktualizaci stavu, zdroj se aktualizuje. Vaše profilová fotka se načítá. Zobrazí se upozornění. Žádný z těchto procesů nevyžaduje tvrdý restart.
Dědictví asynchronní komunikace
Zkratka AJAX je trochu zastaralá. Vývojáři dnes tento termín používají jen zřídka. Jednoduše tomu říkáme „vývoj webu“.
Ale technologie žije dál. XMLHttpRequest byl z velké části nahrazen fetch API. JSON se stal standardním datovým formátem.
Vliv technologií nelze popřít. To zvýšilo očekávání uživatelů. Nyní očekáváme okamžitou zpětnou vazbu. Očekáváme plynulé přechody. Očekáváme, že webové aplikace budou vypadat jako nativní software.
Pokud se web znovu načte pokaždé, když kliknete na tlačítko, zdá se, že je poškozený. Zdá se to zastaralé.
AJAX dokázal, že web může být víc než jen statické dokumenty. Může se stát platformou pro komplexní, interaktivní aplikace.
Evoluce se tam nezastavila. Frameworky jako React, Angular a Vue postavily svá řešení na těchto základech. Automatizují aktualizaci DOM. Řídí stát.
Ale základní myšlenka zůstává stejná.
Komunikujte se serverem na pozadí. Obnovte obrazovku. Posuňte uživatele dále.
Tento přístup stále zdokonalujeme. Nekonečné rolování. Spolupráce v reálném čase. Náhled v reálném čase. Příležitosti zůstávají z velké části nevyužity.
co bude dál? Pravděpodobně méně kliknutí. Více streamování. Více bezprostřednosti.
Stránka zůstává. Data se pohybují.
AJAX není magie. Je to kompromis.
Získáte rychlost. Získáte plynulá rozhraní. Ale také vás bolí hlava.
Největší problém není v kódu. To je bezpečnost. Konkrétně – Zásady stejného původu (SOP). Ve výchozím nastavení prohlížeče blokují požadavky AJAX. Interagují pouze s doménou, ve které se uživatel aktuálně nachází. To zabrání škodlivému skriptu z evil.com ukrást data z webových stránek vaší banky. To je tvrdá bariéra.
Ale vývojáři potřebovali tuto zeď prolomit.
Do obrazu přichází CORS (Cross-Origin Resource Sharing). Je to mechanismus, který umožňuje různým doménám mezi sebou komunikovat. Nakonfigurujete to na serveru. Pokud to uděláte špatně, vystavíte svá data riziku. Pokud to uděláte správně, budete moci využívat moderní distribuované aplikace. Laťka je vysoko. Konfigurace musí být přísná.
Pak je tu problém historie prohlížeče.
Když stránku obnovíte bez opětovného načtení, adresa URL se nezmění. Nebo se změní, ale uživatel si toho nevšimne. Klikněte na “Zpět”. Nic se neděje. Nebo, což je ještě horší, stránka se znovu načte a ztratí veškerý stav. To narušuje mentální model uživatele.
To je potřeba opravit.
Explicitně spravujte zásobník historie. Použijte HTML5 History API. Přidejte státy. Poslouchejte popstate události. Je to únavné. To je nutné. Předtím lidé používali hashbang (#! ). Fungovalo to. Ale nebylo to hezké.
Dalším úskalím je dostupnost.
Dynamický obsah ne vždy upozorní čtečky obrazovky. Pokud nahradíte text pomocí AJAX, pomocné technologie si toho nemusí všimnout. Musíte aktualizovat atributy ARIA. Musíte spouštět události. V opačném případě vytváříte web, který funguje pouze pro uživatele myši.
Krajina se mění.
načíst načíst nezpracované požadavky XHR. Používá sliby. Je to čistší. Je to modernější. WebSockets přidávají obousměrnou komunikaci v reálném čase. Již nemusíte dotazovat server. Aktualizace obdržíte v režimu push.
Ale AJAX zůstává základem.
Zavedl tento vzorec. Asynchronní. Modulární. Neblokování.
Cloudové technologie se posunuly kupředu. Mobilní zařízení ovládla trh. Progresivní webové aplikace (PWA) vyžadovaly offline funkčnost a vysokou rychlost. Všichni spoléhají na tyto základní principy.
Je AJAX mrtvý? Ne.
Jednoduše se stala vrstvou, která je základem novějších nástrojů. Strojovna.
Vývojáři jej stále optimalizují. Stále jim záleží na zvládnutí stavu, který nás donutil řešit. Inovace v designu rozhraní? Jsou postaveny na tomto historickém základu.
Uživatelskou zkušenost neustále zlepšujeme. Cíl zůstává stejný.
Rychle. Responzivní. Nepovšimnutý.
Ale sázky jsou nyní vyšší. Bezpečnost se zpřísnila. Uživatelé očekávají chování podobné nativním. A kód by měl být dostupný všem.
Je to neustálá rovnováha. Proces, který nikdy doopravdy nedokončíte.
