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

Dnes 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 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 počítačů někde v 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.

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 bychom do adresního řádku prohlížeče zadali nějakou webovou adresu. Prohlížeč odešle HTTP požadavek a stáhne data na dané adrese (např. HTML kód webové stránky). 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ř. 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ř. Gmail. Všimněte 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ř. 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ř. webové stránky nějaké firmy) nebo weby co nezobrazují vysloveně text (např. Spotify, Netflix, ...) 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é posílat AJAX požadavky. Není v tom třeba hledat nic složitého - můžete si na serveru s PHP vytvořit soubor time.php s kódem echo time(); a máte 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ůžete 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

Implementace AJAX 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.

XMLHttpRequest, volím si tebe!

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:

let 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 document objekt má i 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 onload přiřadíme callback jako anonymní funkci:

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":

let apiUrl = "https://pokeapi.co/api/v2/"; // Toto je naše URL, se kterou budeme pracovat.
xhr.open("GET", apiUrl + "pokemon"); // Připojíme k URL řetězec pokemon - pomocí této URL získáme názvy pokémonů dostupných v databázi serveru.
xhr.send();

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.

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ů