11. diel - Ajaxu v JavaScripte - Základné otázky

Dnes nás čaká populárne technológie AJAX!

Motivácia

Už vieme meniť obsah webovej stránky pomocou JavaScriptu aj ukladať dáta do úložiska. Niečo nám ale stále chýba. Je to získať dáta z internetu.

Zatiaľ sme si museli vystačiť s dátami, ktoré zadal užívateľ do input boxov a ktorá sme dostali s webovou stránkou, teda DOM a obrázky. Od webové aplikácie ale častejšie očakávame iný prístup - dáta sa často nenachádza v našom počítači, ale získavame je zo serverov, teda počítačov niekde v internete. Dáta tak potom máme prístupná všade, kde sa do aplikácie prihlásime, čo so localStorage neplatí. Pre komunikáciu so servermi slúži práve technológie AJAX, s ktorou sa dnes zoznámime.

Ajaxu

AJAX (A synchronous J avascript A nd X ML) je označenie technológie, pomocou ktorej môžeme z JavaScriptu vykonávať HTTP požiadavky. Je to akoby sme do adresného riadku prehliadača zadali nejakú webovú adresu. Prehliadač odošle HTTP požiadavku a stiahne dáta na danej adrese (napr. HTML kód webovej stránky). AJAX nám umožňuje toto vykonať priamo v javascriptové kódu a hlavne na pozadí, bez toho aby sa stránka, na ktorej sa nachádzame, musela přenačíst.

X ML v skratke AJA X môže byť zavádzajúce, pretože Ajax môžeme sťahovať aj posielať ľubovoľné typy dát, nielen XML. Teda napr. Nám už známy JSON, text, HTML, obrázky, videá a ďalšie ...

Dôležité je, že AJAX nezasekne užívateľské rozhranie našej stránky na dobu, než server na požiadavku odpovie, ako by to urobil potrebné dialóg confirm(), kedy čakáme na reakciu užívateľa. Požiadavka je totiž asynchrónny. Môžeme teda sťahovať väčšie kusy dát na pozadí a používateľ môže stále stránku používať.

Použitia v praxi

Kedy sa teda AJAX bežne používa? Máme tu 2 praktická využitie:

• Tvorba SPA (S Ingle P age A plication) - Bežný web, na ktorý sme zvyknutí, sa skladá z niekoľkých HTML stránok, na ktoré vedú odkazy. Pri kliknutí na odkaz prehliadač zmaže všetko, čo na stránke vidíme, a načíta novú stránku. V single page aplikácii však takéto odkazy nie sú. Namiesto toho sa spúšťa AJAX, ktorý sťahuje nové stránky a dáta na pozadí. Potom JavaScript do časti stránky, ktorá má byť menená, vloží nový obsah. Sme teda stále na tej istej stránke. To môže pôsobiť príjemnejšie ako refreshování celého okna, a podobá sa to viac užívateľskému rozhraniu desktopových aplikácií. Príkladom SPA je napr. Gmail. Všimnite si, že nech tam klikáte na čokoľvek, tak sa nikdy stránka neobnoví kompletne, aj keď sa trebárs zmení jej adresa.
• Tvorba doplnkov do stránky - Nie je ťažké vymyslieť príklad stránky, ktorá pracuje s cudzím alebo naším serverom - napríklad počasie, chat, hodnotenie príspevkov, dynamické načítanie komentárov pri scrollovanie ... AJAX sa tiež veľmi hodia pri webových hier, kde chceme niečo ukladať, napríklad rekordy vo skóre pre tvorbu rebríčku.

Na diagrame nižšie vidíme hlavný rozdiel medzi klasickým webom a webom založeným na AJAXu:

Klasický web

Ako vidíme, na klasickom webe prehliadač jednoducho sťahuje celej stránky zo servera a potom je užívateľovi zobrazuje tak, ako medzi nimi odkazy prechádza. Celá stránka je vždy zobrazená úplne znovu.

SpA

Na webe s Ajaxom naopak prehliadač stiahne stránku a tá si môže následne doťahovať ďalšie dáta alebo ich aj niekam odosielať, bez toho aby došlo k prechodu na inú stránku.

Kombinácie - Web s Ajaxom

Tieto 2 spôsoby sa v praxi často kombinujú. Napr. ITnetwork má pre každý článok samostatnú webovú stránku, ale napríklad hodnotenie článkov hviezdičkami odošle dáta na server pomocou AJAX požiadavky. Užívateľ by v dnešnej dobe snáď ani nepredpokladal, že by ho ohodnotenie článku malo niekam presmerovať. Rovnako tak by ale ITnetwork mohol fungovať ako SPA a tváriť sa ako jedna strana.

V praxi sa obvykle weby s veľa článkami robia ako samostatné stránky, ale menšie informačné stránky (napr. Webové stránky nejakej firmy) alebo weby čo nezobrazujú vyslovene text (napr. Spotify, Netflix, ...) ako SPA. AJAX potrebujeme pre obe riešenia.

Na tvorbu SPA zvyčajne nepoužívame čistý JavaScript, ale ešte nejaký framework ako Angular alebo React. JavaScript kódu je v podobných aplikáciách totiž viac a tieto frameworky nám ho uľahčia lepšie štruktúrovať. Na to ale ešte máme dosť času:)

Api

Čo že to vlastne je to API? Skratka označuje A pplication P rogramming Aj nterface, v preklade niečo ako "rozhranie pre programovanie aplikácií". Iste všetci poznáme grafické užívateľské rozhranie (GUI), čo sú potrebné tlačidlá a textové polia. Definujú, ako s programom komunikuje človek. API definuje, ako s programom komunikuje iný program. Toto rozhranie sa už ale neskladá z tlačidiel, ale napríklad zo sád funkcií, ich URL adries a dátových štruktúr, ktoré posielame a prijímame.

My budeme pracovať s webovým API, budeme teda riešiť hlavne URL adresy, na ktoré posielať AJAX požiadavky. Nie je v tom treba hľadať nič zložité - môžete si na serveri s PHP vytvoriť súbor time.php s kódom echo time(); a máte API pre získanie času:) My ale programovať svoje API nebudeme, namiesto toho použijeme už hotové - budeme získavať dáta o Pokemon:)

Pokémon API

Dáta budeme sťahovať zo servera pokeapi.co. Na tomto odkaze si môžeme API priamo vyskúšať zadávaním rôznych URL adries do textového poľa a vypisovaním výsledkov.

Samotné API sa nachádza na adrese https://pokeapi.co/api/v2/. To je naša štartové URL adresa, ktorá bude v každom AJAX požiadavke rovnaká. Pripisovaním ďalších parametrov na koniec tejto URL budeme špecifikovať, čo nám má API vracať.

Bez parametrov API vracia zoznam objektov, ktoré vedia vracať:

Nie sú to len pokémoni, ale napríklad aj schopnosti alebo bobuľky. Nás bude samozrejme zaujímať parameter pokemon, čím získame zoznam pokemonov. Môžete si skúsiť zadať do prehliadača adresu https://pokeapi.co/api/v2/pokemon/:

Vidíme, že API server odpovedal zoznamom pokemonov. Ak ste si všimli, že ich je len prvých 20, ste majstri pokemonov. A ak, že je výsledok vo formáte JSON, tak aj majstri JavaScriptu:)

Implementácia AJAX v JavaScripte

JavaScript nám ponúka v zásade 2 implementácie AJAXu. Prvý a staršie spôsob je pomocou triedy XMLHttpRequest. Druhý spôsob, volanie fetch(), je modernejší a priamočiarejšie, však používa pokročilé konštrukcie JavaScriptu a je výrazne ťažšie na pochopenie. Preto sa fetch() budeme venovať až ku koncu nášho OOP kurzu a teraz si predstavíme objekt XMLHttpRequest.

XMLHttpRequest, volím si teba!

Objekt vytvorený z tejto triedy je nositeľom nášho HTTP požiadavky, ktorým komunikujeme so serverom. Ukážeme si, ako pomocou tohto objektu stiahnuť informácie o Pokémoni.

Vytvorenie požiadavke

Najprv vytvoríme inštanciu triedy XMLHttpRequest, konštruktor neberie žiadne parametre:

let xhr = new XMLHttpRequest();

Callback

To bolo jednoduché. Teraz musíme nastaviť callback, pretože požiadavka je asynchrónny, čo znamená, že vykonávanie JS kódu nečaká na výsledok a ihneď pokračuje ďalším príkazom. Toto je veľká výhoda, pretože sa nezasekne okno. Rovnako ako napríklad document objekt má aj XMLHttpRequest udalosť onload. Tá je automaticky zavolaná vo chvíli, keď nám dáta prišla, a môžeme ich použiť. Do onload priradíme callback ako anonymný funkciu:

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

Zatiaľ si dáta iba vypíšeme do stránky, či vieme, čo nám prišlo a ako s tým naložiť.

Predtým sa používala udalosť onreadystatechange, kde sa muselo ešte riešiť, či sa požiadavka nachádza v dokončenom stave. Toto je už našťastie minulosťou, ale je možné sa s tým stretnúť v starších zdrojových kódoch.

Odoslania požiadavky na API server

Požiadavka ešte ale nebol odoslaný. Zatiaľ sme len definovali, čo sa bude diať s výsledkom. Pred odoslaním požiadavky ho musíme najskôr "otvoriť":

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();

Pri otvorení požiadavke mu nastavujeme zásadné parametre:

• Prvé, "GET", je typ (HTTP metóda) požiadavke. Ak dáta iba čítame, ale žiadna neposielame, používame metódu GET. Ak by sme chceli na nejaký server odoslať dáta, aby ich uložil, použili by sme metódu POST, čo si ukážeme ďalej v kurze.
• Druhým parametrom je konečne adresa zdroja, ktorý žiadame. Ako vidíme, pravdepodobne sa nejedná o súbor. URL sú spravidla na serveroch smerovaná a dáta sa pre nás vytvára dynamicky. Preto používame pojem zdroj miesto súbor. Ak chceme iba zistiť, čo daný zdroj obsahuje, nemusíme programovať AJAX, ale stačí zadať URL do prehliadača, ako sme si už vyskúšali.

Po spustení kódu dostaneme nasledujúce výsledok: