Formát JSON (JavaScript Object Notation) je jistě každému webovému vývojáři důvěrně známý. I na Zdrojáku jsme před časem přinesli seriál o JSON. JSON má proti XML některé neoddiskutovatelné výhody – není tak „ukecaný“ jako XML a jeho zpracování na klientské straně je velmi jednoduché a rychlé.

Připomeňme si stručně, jak formát JSON vypadá. Jde o zápis objektů (lépe řečeno objektových dat) a polí ve formátu, v němž jsou zapisovány v JavaScriptu. Tedy například: 

{"uzivatel": {"jmeno": "Martin", "vek": 36}, "prihlasen": false, "opravneni": [1,2,4,8]}

Na straně JS klienta pak teoreticky stačí prostá funkce eval() k převedení takto zapsaných dat na objekty či pole. (V praxi se doporučuje z bezpečnostních důvodů eval() nepoužívat a namísto toho data parsovat.)

JSON-P

Pokud chceme ve skriptu načíst data z jiné domény, narazíme na problém. Prohlížeče totiž z bezpečnostních důvodů neumožňují XHR (XMLHttpRequest) do jiné domény, než je ta, z níž byla načtena původní stránka. Řešení nabízí JSON-P (JSON with Padding), což je JSON „zabalené“ do volání callback funkce:

pridej_uzivatele({"uzivatel": {"jmeno": "Martin", "vek": 36}, "prihlasen": false, "opravneni": [1,2,4,8]})

Ve skriptu hlavní stránky nadefinujeme funkci pridej_uzivatele(), která se postará o převzetí dat a jejich zpracování. Pak vložíme tag <script>, který načte ze vzdálené adresy potřebná data, zabalená do volání patřičné callback funkce (v tagu <script> nejsme omezeni na stejnou doménu).

Google nazývá tento postup ve svých API „JSON-in-script“. Jako příklad udává volání API funkce kalendáře:

<script src="http://www.google.com/calendar/feeds/developer-calendar
@google.com/public/full?alt=json-in-script&callback=listEvents">
</script>

Jak vidíme, v parametrech URL je předán i název callback funkce. API pak data zabalí tak, že načtený JavaScript rovnou zavolá požadovanou funkci.

JSONP-X

JSON-P není příliš vhodný v případech, kdy je potřeba předat zpátky klientovi z cizího serveru nějaký HTML kód.V JavaScriptu musíme pak procházet předaná data a vytvářet DOM elementy. JSONP-X tento krok dělá za vás. V podstatě jde o HTML (XML) kód, předaný jako řetězec v JSON objektu.

Představme si, že chceme předat odkaz na Twitter kanál Zdrojáku. V XML to půjde snadno:

<results>
  <div id="twitter">
      <a href="http://twitter.com/zdrojak">zdroják</a>
  </div>
</results>

V JSON bude stejná část kódu vypadat třeba takto:

{"results":[
  "div":{
    "id":"twitter",
     "a":{
       "href":"http://twitter.com/zdrojak",
       "text":"Zdroják"
     }
  }
]}

Pokud mají být tato data načtena z cizí domény, zabalíme je do JSON-P:

callback({"results":[
  "div":{
    "id":"twitter",
     "a":{
       "href":"http://twitter.com/zdrojak",
       "text":"Zdroják"
     }
  }
]});

Převést takto popsaný kód zpátky do HTML je nejen pracné, ale i pomalé. JSONP-X, tedy HTML kód zabalený do JSON formátu, by mohl vypadat nějak takto:

callback({"results":[
"<div id="twitter"><a href="http://twitter.com/zdrojak">Zdroják</a></div>"
]})

Takto lze načíst data i ze vzdálené domény. Vložení výsledného HTML kódu je pak snadné. Snadnost práce s JSONP-X lze demonstrovat např. na následující ukázce, která používá YQL.

<script type="text/javascript" charset="utf-8">
function callback(o){
  var element = document.getElementById('kontejner');
  var obsah = o.results[0]
  element.innerHTML = obsah.replace(/href="//g,'href="http://twitter.com/');
}
</script>   
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ftwitter.com%2Fzdrojak8%22%20and%20xpath%20%3D%20%22%2F%2Fdiv[%40id%3D%27following_list%27]%22&format=xml&callback=callback">
</script>

BISON

Před několika lety představil Kai Jäger variantu JSON, nazvanou BISON (Binary Interchange Standard and Object Notation). BISON před přenosem data změní na binární podobu, čímž dojde k výraznému zkrácení přenášených dat. BISON se nerozšířil tak výrazně jako JSON, pravděpodobně i kvůli objevenému bezpečnostnímu riziku. Přesto je na místě jeho existenci zmínit.

Závěr

Načítání dat z cizích domén není v prohlížečích zakázané bezdůvodně, a pokud můžeme, měli bychom se mu vyhnout. Přesto jsou situace, kdy se podobným operacím vyhnout nelze (každopádně při jakémkoli vkládání kódu či dat ze serveru třetí strany je třeba být obezřetný). Pak je na místě zvážit použití výše zmíněných variant formátu JSON, stejně jako při návrhu API pro webovou službu.