3. diel - JSONP pre začiatočníkov

Úvod:

Väčšina JavaScript programátorov dobre pozná formát dát JSON - viete, že JSON je vlastne String, objekt, a že to môže byť aj súbor. Tieto informácie sú rozhodne zaujímavé, určite vám pomôžu v pochopení ako technika, ktorú dnes budem popisovať, dostala svoj názov. Pre prípad, že si nie problematikou JSON úplne istí, môžete, ale nemusíte vyhľadať dokumentáciu na internete - nebudete ju nijako zvlášť potrebovať.

Význam:

Čo teda to JSONP vlastne znamená? JavaScript Object Notation with Padding / Prefix - inými slovami je JSON formát dát a to 'P' navyše hovorí, že technika, ktorá je takto označovaná, má čo do činenia s JSON, ale prináša si nejaké vlastnosti navyše.

Čo JSONP vie a na čo slúži? Počuli ste o AJAXu a jeho schopnosti spracovávať pozadia požiadavky na server. Iste tiež viete, že sa AJAX musia riadiť SOP (Same Origin Policy), ktorá mu zakazuje volať serverové API na inom porte, či iné doméne, ako je samotný web / aplikácia umiestnená. To je značne obmedzujúce, napríklad nemôžeme AJAX zavolať na webovej API s aktuálnym počasím na cudzom portáli a zobraziť výsledok nášmu užívateľmi.

Predstavme si, že nemáme inú možnosť, než túto reštrikciu obísť. Prístup do PHP zdrojových kódov nám nebol umožnený a my si musíme vystačiť s tým čo dá JavaScript. Cestou je samozrejme práve JSONP technika, o ktorej je dnešný diel seriálu.

Ako to funguje?

Táto technika je založená na HTML tagu 'script' a faktu, že keď sťahujete JavaScript zobraz zdroj a načítate ho do stránky, nemusí byť tento súbor umiestnený na vašom webe. Pri jeho stiahnutie teda nedôjde k porušeniu SOP. Za behu vezmeme URL API, na ktoré budeme volať, vytvoríme si element typu 'script' a nastavíme mu atribút url na naše URL zmienené vyššie. Tento element potom už len umiestnime do HTML dokumentu. V ten moment browser zareaguje a vykoná štandardné operácie pre takýto element, napríklad zavolá URL z atribútu a pokúsi sa pomocou metódy GET získať späť dáta. Výhodou je, že toto volanie je asynchrónny rovnako ako AJAXové request.

Ako už sami pomaly rozoznávate, skôr než prirovnávať JSONP k AJAXu, je vhodné vidieť v ňom klasický 'script' tag a defaultná akcie prehliadača. Predstavte si, že sťahujete knižnicu jQuery z online úložisko (CDN), pomocou script tagu o nej požiadate server, ten vám vráti súbor a prehliadač ho načíta, skontroluje a spracuje. Kontrola je dôležitý krok. Táto kontrola formátu totiž overuje, či sa skutočne jedná o JavaScript zobraz zdroj so všetkými náležitosťami, v opačnom prípade dôjde k chybe a snaha o JSONP zlyhá. Čo teda môžeme poslať zo servera klientovi, tak aby to fungovalo?

Môžeme poslať script ako má byť - len premenné s ktorými sa treba ihneď potom začne pracovať, alebo celé knižnice funkcií. Pokiaľ toto robíme, dá sa povedať, že vlastne staviame celú webovú aplikáciu za behu. Doslova zasúvame premenné, objekty a funkcie do kontextu v priebehu vykonávania scriptu. Máme ale aj inú možnosť. V našom JavaScriptu, ktorý sa stiahne so stránkou už od začiatku, napíšeme funkciu nesúci meno treba 'serverDataRe­ciever'. Táto funkcia bude obsahovať základné príkazy pre prácu s dátami, ktoré prídu napríklad zo serveru o počasí. Keď potom vykonáme volania na server, nezabudneme k atribútu 'url' tagu 'script' pripojiť string "? Callback = serverDataReci­ever". Ako som už povedal, pre získavanie scriptov zo serverov používa browser metódu GET. Dôležité je, že používa iba ju a žiadnu inú. Server potom dostane 'callback' parameter a vie, ako sa volá funkcia, ktorú chceme na klientovi volať ako callback. Výsledné echo potom vyzerá asi takto: (v PHP)

echo $_GET["callback"] . "(" . $dataProKlienta . ");";

Z tohto príkladu už je celkom zrejmé, o čo vlastne ide. Podobná technika sa dnes v JavaScripte bežne používa, teda volanie funkcie, odovzdanie dát a odovzdanie callbacku, ktorý dostane výsledné dáta z prvej funkcie a na konci je jej zavolaný. V našom prípade sa zostaví JavaScript 'zobraz zdroj', v skutočnosti to budú iba dáta odovzdávané ako parameter callbackové funkciu a volanie onej funkcie, ale v JavaScriptu môžeme ako parameter použiť expressions, čo nám dáva značné možnosti. Zo všetkých prípadov vyberiem tie najbežnejšie:

nejakaFunkce(23, "textovy retezec", 2 > 0 ? "ternarni" : "operator", (function(data) {return data * 23})(window.data), Kolekce.get(4));

Ako to celé vyzerá?

Ukážem a popíšem (pomocou komentárov) zdrojové kódy pre server i pre klienta.

HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>

<script type="text/javascript">
    function callTheJsonp() {
        // adresa serveru, na který voláme asynchronní požadavek
            var url = "jsonp.php?callback=recieveResponse";
            // vytvořím nový element script
            var script = document.createElement('script');
            // nastavím mu odpovídající adresu
            script.setAttribute('src', url);
            // a nakonec vložím element do stránky
            document.getElementsByTagName('head')[0].appendChild(script);
    }

    // tato funkce bude zavolána klientem na příkaz serveru a parametrem jí budou data ze serveru, ta data, o která jsme žádali, mohou být ve formátu JSON, XML, text, js, atd.
    function recieveResponse(response) {
        console.log(response);
    }
</script>

<span onclick="callTheJsonp()">Klikni, pro JSONP požadavek!</span>
</body>
</html>

PHP:

<?php
// získám jméno callback funkce
$callback = '';
if (isset($_GET['callback'])) {
    $callback = filter_var($_GET['callback'], FILTER_SANITIZE_STRING);
    }else {
    // pokud ho nezískám, použiju consoli
    $callback = "console.log";
    // echnu celý javascript jako textový řetězec
    echo $callback . "(" . "Klasický text." . ");";
?>

Motivácia?

Nebýva obvyklé uvádzať motiváciu na záver, avšak toto nie je motivácia k článku, ale k vášmu vlastnému tvoreniu. Predstavte si, čo všetko máte možnosť vďaka tomuto urobiť. Môžete napríklad doslova stavit "vzdušné zámky" užívateľovi pod rukami, ak máte aplikáciu, ktorá sa má (po javascriptové stránke) zakaždým správať trochu inak - stačí na začiatok overiť podmienky a stiahnuť tú správnu knižnicu. Tiež môžete dostahovávat scripty pre udalosti až v momente, keď sa používateľ preklikne do určitej časti aplikácie, čo sa môže hodiť pre OnePage aplikácie, netvrdím ale, že by som to tak robil.

Pravda je ale taká, že sa JSONP nepoužíva, ak to nie je naozaj nutné - ide o neštandardné techniku a navyše jej musí podporovať server. V zásade tak môžete naraziť na JSONP v rámci nejakého hacku alebo opravu, netvrdím ale, že je zle, keď sa vo vašom zdrojáky objavia - všetko záleží na okolnostiach.

Záver:

Ak sa na čokoľvek z tejto problematiky chcete opýtať, neváhajte. V jednom z chystaných dielov nás čaká aj použitie JSONP pomocou knižnice jQuery. A môžete sa tešiť aj na popis najznámejších spôsobov volanie, alebo zoznámenie s formátmi dát, ktoré sa na tento účel používajú.