JSONP

JavaScript

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

Už se vám někdy stalo, že jste potřebovali z JavaScriptu zavolat skript na úplně jiném serveru? Zkusili jste zavolat URL přes XMLHttpRequest a v konzoli na vás vyskočila hláška:

XMLHttpRequest cannot load http://www.ciziweb.cz/. Origin http://www.vasweb.cz is not allowed by Access-Control-Allow-Origin.

K vyřešení toho problému jsou dva způsoby. Buď použijete Cross-site HTTP požadavky, aby jste povolit přistup, ale v takovém případě musíte mít k oněm cizím stránkám přístup, aby jste pozměnili HTTP hlavičku „Access-Control-Allow-Origin“. Například v PHP:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

Dále je pak tady ale JSONP (JSON with padding). Což je alternativa k XMLHttpRequestu. Požadavek vypadá takto:

<script type="application/javascript"
        src="http://www.ciziweb.cz/">
</script>

Pochopitelně musí stránka http://www.ciziweb.cz/ vracet JavaScript kód, který se spustí. Podle standadu od Douglase Crockforda (oficiální stránky JSONP) by měla stránka vracet volání funkce (jejiž název by se měl přenášet v URL požadavku) s jedním parametrem, který bude obsahovat data v JSON a funkce by měla být definovaná ještě před požadavkem, tedy né v odpovědi od serveru http://www.ciziweb.cz/.

<script type="application/javascript">
function handle_data(data) {
   alert(data.data_1);
}
</script>
<script type="application/javascript"
        src="http://www.ciziweb.cz/?callback=handle_data">
  // Skript vrátí: handle_data({"data_1": "hello world"});
</script>

Problémem může být, že lze odeslat date pouze přes parametry v URL (GET) a nikoli přes POST.

Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)

Komentáře