Lekce 11 - AJAX v JavaScriptu - Základní dotazy

V minulé lekci, Dokončení objektového diáře v JavaScriptu, jsme do našeho diáře přidali tlačítko na splnění úkolu, validaci data a jednoduché CSS styly

V dnešním tutoriálu OOP v JavaScriptu nás čeká populární technologie AJAX!

Motivace

Již umíme měnit obsah webové stránky pomocí JavaScriptu i ukládat data do úložiště. Něco nám ale stále chybí. Je to vědomost, jak získat data z internetu.

Zatím jsme si museli vystačit s daty, která zadal uživatel do input boxů a která jsme dostali s webovou stránkou, tedy DOM a obrázky. Od webové aplikace ale častěji očekáváme jiný přístup – data se často nenachází v našem počítači, ale získáváme je ze serverů, tedy z počítačů někde na internetu. Data tak pak máme přístupná všude, kde se do aplikace přihlásíme, což s localStorage neplatí. Pro komunikaci se servery slouží právě technologie AJAX, se kterou se dnes seznámíme.

Pomocí ní si vytvoříme další malý projekt, kterým bude tento interaktivní prohlížeč pokémonů:

HTTP

Ještě než se podíváme na samotnou technologii AJAX, zmiňme si krátce význam zkratky HTTP, se kterou jsme se jistě již setkali. HTTP (Hypertext Transfer Protocol) je základní komunikační protokol pro přenos dat na internetu. Komunikace pomocí tohoto protokolu je založená na požadavcích (dotazech) a odpovědích na ně. HTTP přesně definuje jejich strukturu i způsob přenosu. Klient posílá požadavky na server, který mu vrací odpovědi s požadovanými daty.

Například když do adresního řádku prohlížeče zadáme nějakou webovou adresu, náš prohlížeč (klient) odešle HTTP požadavek na server a ten jako odpověď pošle data potřebná k zobrazení webové stránky (HTML kód):

Dnes je již standardem zabezpečená verze tohoto protokolu, označována HTTPS.

AJAX

AJAX (Asynchronous JavaScript And XML) je označení technologie, pomocí které můžeme z JavaScriptu provádět HTTP požadavky. Je to jako u výše uvedeného příkladu se zadáním webové adresy do adresního řádku prohlížeče, který odesílá HTTP požadavek a stáhuje data na dané adrese. AJAX nám umožňuje toto provést přímo v javascriptovém kódu a hlavně na pozadí, aniž by se stránka, na které se nacházíme, musela přenačíst.

XML ve zkratce AJAX může být zavádějící, protože AJAXem můžeme stahovat i posílat libovolné typy dat, nejen XML. Tedy například nám již známý JSON, text, HTML, obrázky, videa a další...

Důležité je, že AJAX nezasekne uživatelské rozhraní naší stránky na dobu, než server na požadavek odpoví, jako by to udělal třeba dialog confirm(), kdy čekáme na reakci uživatele. Požadavek je totiž asynchronní. Můžeme tedy stahovat větší kusy dat na pozadí a uživatel může stále stránku používat.

Užití v praxi

Kdy se tedy AJAX běžně používá? Máme zde 2 praktická využití:

• Tvorba SPA (Single Page Aplication) – Běžný web, na který jsme zvyklí, se skládá z několika HTML stránek, na které vedou odkazy. Při kliknutí na odkaz prohlížeč smaže vše, co na stránce vidíme, a načte novou stránku. V single page aplikaci však takové odkazy nejsou. Místo toho se spouští AJAX, který stahuje nové stránky a data na pozadí. Poté JavaScript do části stránky, která má být měněna, vloží nový obsah. Jsme tedy stále na té samé stránce. To může působit příjemněji než refreshování celého okna, a podobá se to více uživatelskému rozhraní desktopových aplikací. Příkladem SPA je například Gmail. Všimněme si, že ať tam klikáte na cokoliv, tak se nikdy stránka neobnoví kompletně, i když se třeba změní její adresa.
• Tvorba doplňků do stránky – Není těžké vymyslet příklad stránky, která pracuje s cizím nebo naším serverem – například počasí, chat, hodnocení příspěvků, dynamické načítání komentářů při scrollování... AJAX se také velmi hodí u webových her, kde chceme něco ukládat, například rekordy ve skóre pro tvorbu žebříčku.

Na diagramu níže vidíme hlavní rozdíl mezi klasickým webem a webem založeným na AJAXu:

Klasický web

Jak vidíme, na klasickém webu prohlížeč jednoduše stahuje celé stránky ze serveru a pak je uživateli zobrazuje tak, jak mezi nimi odkazy přechází. Celá stránka je vždy zobrazena úplně znovu.

SPA

Na webu s AJAXem naopak prohlížeč stáhne stránku a ta si může následně dotahovat další data nebo je i někam odesílat, aniž by došlo k přechodu na jinou stránku.

Kombinace – Web s AJAXem

Tyto 2 způsoby se v praxi často kombinují. Například web ITnetwork má pro každý článek samostatnou webovou stránku, ale třeba hodnocení článků hvězdičkami odešle data na server pomocí AJAX požadavku. Uživatel by v dnešní době snad ani nepředpokládal, že by ho ohodnocení článku mělo někam přesměrovat. Stejně tak by ale ITnetwork mohl fungovat jako SPA a tvářit se jako jedna stránka.

V praxi se obvykle weby s hodně články dělají jako samostatné stránky, ale menší informační stránky (například webové stránky nějaké firmy) nebo weby co nezobrazují vysloveně text (například Spotify, Netflix a tak dále) se tvoří jako SPA. AJAX potřebujeme pro obě řešení.

Na tvorbu SPA obvykle nepoužíváme čistý JavaScript, ale ještě nějaký framework jako Angular nebo React. Javascriptového kódu je v podobných aplikacích totiž více a tyto frameworky nám jej usnadní lépe strukturovat. Na to ale ještě máme dost času

API

Co že to vlastně je to API? Zkratka označuje Application Programming Interface, v překladu něco jako "rozhraní pro programování aplikací". Jistě všichni známe grafické uživatelské rozhraní (GUI), což jsou třeba tlačítka a textová pole. Definují, jak s programem komunikuje člověk. API definuje, jak s programem komunikuje jiný program. Toto rozhraní se již ale neskládá z tlačítek, ale například ze sad funkcí, jejich URL adres a datových struktur, které posíláme a přijímáme.

My budeme pracovat s webovým API, budeme tedy řešit hlavně URL adresy, na které budeme posílat AJAX požadavky. Není v tom třeba hledat nic složitého – můžeme si na serveru s PHP vytvořit soubor time.php s kódem echo time(); a máme API pro získání času My ale programovat své API nebudeme, místo toho použijeme již hotové – budeme získávat data o pokémonech

Pokémon API

Data budeme stahovat ze serveru pokeapi.co. Na tomto odkazu si můžeme API přímo vyzkoušet zadáváním různých URL adres do textového pole a vypisováním výsledků.

Samotné API se nachází na adrese https://pokeapi.co/api/v2/. To je naše startovní URL adresa, která bude v každém AJAX požadavku stejná. Připisováním dalších parametrů na konec této URL budeme specifikovat, co nám má API vracet.

Bez parametrů API vrací seznam objektů, které umí vracet:

Nejsou to jen pokémoni, ale třeba i schopnosti nebo bobulky. Nás bude samozřejmě zajímat parametr pokemon, čímž získáme seznam pokémonů. Můžeme si zkusit zadat do prohlížeče adresu https://pokeapi.co/api/v2/pokemon/:

Vidíme, že API server odpověděl seznamem pokémonů. Pokud jste si všimli, že jich je jen prvních 20, jste mistři pokémonů. A pokud, že je výsledek ve formátu JSON, tak i mistři JavaScriptu

Pro pokročilejší a přívětivější zobrazení JSON můžeme použít rozšíření prohlížeče, jako je například "JSON Viewer" pro Chrome nebo Firefox. Tato rozšíření automaticky formátují a zvýrazňují JSON při prohlížení surových JSON dat.

Implementace AJAXu v JavaScriptu

JavaScript nám nabízí v zásadě 2 implementace AJAXu. První a starší způsob je pomocí třídy XMLHttpRequest. Druhý způsob, volání fetch(), je modernější a přímočařejší, nicméně používá pokročilé konstrukce JavaScriptu a je výrazně těžší na pochopení. Proto se fetch() budeme věnovat až ke konci našeho OOP kurzu a nyní si představíme objekt XMLHttpRequest.

Jak jsem již zvyklí, vytvoříme si novou složku pro náš další projekt, která bude obsahovat soubor index.html a složku js/ pro javascriptové soubory. V soubor index.html si nalinkujeme skript s názvem obsluha.js:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="UTF-8">
    <title>Pokémoni</title>
</head>
<body>
    <script src="js/obsluha.js"></script>
</body>
</html>

Do souboru obsluha.js budeme psát všechen následující kód.

Objekt XMLHttpRequest

Objekt vytvořený z této třídy je nositelem našeho HTTP požadavku, kterým komunikujeme se serverem. Ukážeme si, jak pomocí tohoto objektu stáhnout informace o pokémonech.

Vytvoření požadavku

Nejprve vytvoříme instanci třídy XMLHttpRequest, konstruktor nebere žádné parametry:

const xhr = new XMLHttpRequest();

Callback

To bylo jednoduché. Nyní musíme nastavit callback, protože požadavek je asynchronní, což znamená, že vykonávání JS kódu nečeká na výsledek a ihned pokračuje dalším příkazem. Toto je velká výhoda, protože se nezasekne okno. Stejně jako třeba objekt document má i objekt XMLHttpRequest událost onload. Ta je automaticky zavolána ve chvíli, když nám data přišla a můžeme je použít. Do události onload přiřadíme callback jako anonymní funkci. Do našeho souboru tak připíšeme na další řádky:

xhr.onload = () => {
    document.write(xhr.response);
}

Prozatím si data pouze vypíšeme do stránky, ať víme, co nám přišlo a jak s tím naložit.

Dříve se používala událost onreadystatechange, kde se muselo ještě řešit, jestli se požadavek nachází v dokončeném stavu. Toto je již naštěstí minulostí, ale je možné se s tím setkat ve starších zdrojových kódech.

Odeslání požadavku na API server

Požadavek ještě ale nebyl odeslán. Zatím jsme pouze definovali, co se bude dít s výsledkem. Před odesláním požadavku jej musíme nejdříve "otevřít":

const apiUrl = "https://pokeapi.co/api/v2/";
xhr.open("GET", apiUrl + "pokemon");
xhr.send();

Do proměnné apiUrl jsme si uložili základní adresu API, se kterým budeme pracovat. Při otevření požadavku mu nastavujeme zásadní parametry:

• První, "GET", je typ (HTTP metoda) požadavku. Pokud data pouze čteme, ale žádná neposíláme, používáme metodu GET. Pokud bychom chtěli na nějaký server odeslat data, aby je uložil, použili bychom metodu POST, což si ukážeme dále v kurzu.
• Druhým parametrem je konečně adresa zdroje, který žádáme. Jak vidíme, pravděpodobně se nejedná o soubor. URL jsou zpravidla na serverech směrovaná a data se pro nás vytváří dynamicky. Proto používáme pojem zdroj místo soubor. Pokud chceme pouze zjistit, co daný zdroj obsahuje, nemusíme programovat AJAX, ale stačí zadat URL do prohlížeče, jak jsme si již vyzkoušeli.

Celý náš kód nyní vypadá takto:

const xhr = new XMLHttpRequest();

xhr.onload = () => {
    document.write(xhr.response);
}

const apiUrl = "https://pokeapi.co/api/v2/";
xhr.open("GET", apiUrl + "pokemon");
xhr.send();

Po spuštění kódu dostaneme následující výsledek:

V příští lekci, AJAX v JavaScriptu - Prohlížeč pokémonů, si uděláme prohlížeč pokémonů

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.