Co je to JSONP?

JSONP je jedním ze způsobů jak komunikovat asynchronně se serverem na pozadí klientské aplikace. Takové to aplikace se obecně označují za AJAX. JSONP představuje alternativu k použití XmlHttpRequest objektu pro vlastní asynchronní komunikaci.

JSONP je zkratka z JSON in Padding. Česky by se to dalo přeložit nejspíš jako JSON v závorce. JSONP není všeobecně zavedená zkratka. Například společnost Google tuto metodu ve svých API označuje za json-in-script, což vcelku vystihuje podstatu této metody.

Pokud nejste zatím seznámeni s tím, co je to JSON, doporučuji tak udělat dříve, než budete číst dál. Například na oficiální dokumentaci k JSON http://json.or­g/json-cz.html

Jak to funguje?

Podstatou je dynamické vkládání tagu <script>. Adresa API, která poskytuje nějaká data, se vloží do stránky jako běžný javascript. Z toho nutně plyne, že to co vám poskytne API musí být spustitelný JS kód. A tak tomu i skutečně je.

zpracujData({ ... JSON data ... });

Takto by vypadal JSONP výstup smyšleného API. Pokud takovýto skript vložíte do stránky, dojde k zavolání funkce zpracujData a jako parametr dostane JSON data. Funkce zpracujData je umístěna někde v klientském skriptu. Je to tzv. callback funkce, kterou zavolá načtený skript od API.

Ukázka

Řekněme, že máte nějaké API pro adresář lidí. A vás zajímá např. telefonní číslo kolegy Nováka. API by mělo takovouto adresu

http://adresar.cz/api/telefon.php?jmeno=Novak&output=json&callback=telefon

API předáte celkem 3 parametry. V prvé řadě je to jméno, které vás zajímá. Dále je to způsob komunikace. Většina API totiž v reálu umožňuje více datových formátů. Standardem je dnes nějaká podoba XML a volitelně pak například JSON nebo právě JSONP. Pokud hodláte použít právě JSON/P, je obvykle třeba o to specificky požádat. V tomto příkladě je to parametr output. Třetím parametrem je pak název callback funkce (tím pak lze rozlišit čistý JSON a JSONP).

API vám pak vrátí toto:

telefon({jmeno: 'Novák', tel: '+420 123 456 789'});

Použití na stránce by mohlo vypadat takto:

<script type="text/javascript">
  function telefon(osoba)
  {
    alert('Pan ' + osoba.jmeno + ' má telefon ' + osoba.tel);
  }
</script>
<script type="text/javascript"
        src="http://adresar.cz/api/telefon.php?jmeno=Novak&output=json&callback=telefon">
</script>

Po nahrání druhého skriptu, se vám zobrazí okénko s textem „Pan Novák má telefon +420 123 456 789“

Praktické použití

Při praktické realizaci, pak máte připravenou knihovnu, která umí přidat dynamicky skript do hlavičky stránky a tím zavolat dané API. Zároveň se postará i o zpracování callback funkce a tím vás oprostí od těch problémů. Použití takové knihovny by mohlo vypadat takto jednoduše:

JSONP.call("http://adresar.cz/api/get.php?jmeno=Novak", function(data){

  ... zpracovani dat ...

})

Pokud projevíte zájem, můžu v dalším článku ukázat jak takovou knihovnu napsat.

Podobnou funkčnost nabízí i některé frameworky, např. jQuery.

Výhody vs. nevýhody

JSONP má jednu vlastnost, kterou není možné v podstatě jinou komunikační metodou zajistit. Tím je skutečnost, že takto můžete volat API i na jiném serveru (jiné doméně) než je vaše vlastní aplikace. Tímto pak můžete získávat data od mnoha zdrojů přímo na straně klienta, aniž by bylo třeba zajišťovat jejich zpracováni vaším serverem.

Na druhou stranu je třeba upozornit na jednu ohromnou nevýhodu této metody a to bezpečnost. Protože přijmete JS kód a ten přímo spouští prohlížeč. Nemůžete žádným způsobem zkontrolovat, zdali vám API neposkytuje vadná data, která způsobí chybu ve zpracování JS a nebo dokonce zdali vám neposílá nějaký svůj kód, který od vás zjišťuje citlivá data, nebo vkládá na vaše stránky nechtěnou reklamu.

Nevýhodou může být také to, že je možné posílat jen GET požadavky, s tím musíte počítat, pokud budete vytvářet nějaké své API.

Závěr

V tomto článku jsem chtěl nastínit princip komunikace pomocí JSONP. Mým cílem nebylo poskytnout hotové řešení, které můžete rovnou použít, ale ukázat jak na to.

I přes některé nevýhody má JSONP velké možnosti uplatnění. To dokládá i to, že společnosti jako Google nebo Yahoo tuto komunikační metodu podporují u velké části svých Data API. Google toto označuje za json-in-script a Yahoo čistě za json. I na českém internetu se pomalu objevují služby, které toto podporují. Např. český validator.w3.cz nebo nově Blueboard Počítadlo umožňuje JSONP export.