Guida Come funziona JSONP e quando utilizzarlo

Stato
Discussione chiusa ad ulteriori risposte.

SyncroIT

Utente Emerald
13 Gennaio 2014
674
94
208
523
AAEAAQAAAAAAAALIAAAAJGYwYTA2OTE2LTNmNDItNDY1Ny04ODZiLWNmODczZDc2NDgwZQ.jpg
Innanzitutto, cos'è JSON?
JSON è un formato utilizzato per lo scambio di dati.
Principalmente viene utilizzato sulle applicazioni web, in quanto di facile interpretazione in JavaScript.
Un esempio di codice JSON è il seguente:
Codice:
{ marca: "Fiat", modello: "Punto", targa: "AA123AA" }

Come funziona l'interscambio di dati su Web?
Su Web, l'interscambio di dati, viene principalmente gestito con AJAX, acronimo che sta per Asynchronous JavaScript and XML.
AJAX viene ormai usato da anni ed è implementato nella maggior parte dei browser sotto con l'oggetto JavaScript XmlHttpRequest, che viene solitamente utilizzato da librerie terze (es. jQuery), che ne ereditano le funzionalità rendendole di facile utilizzo al programmatore.

Infine, una richiesta AJAX, tornando al linguaggio dei comuni mortali, non è altro che una richiesta eseguita in maniera asincrona, che quindi non influisce sul caricamento della pagina. E' una richiesta che può essere effettuata in un secondo momento e può quindi essere istanziata in seguito ad un evento (click su un bottone o simili).

Dove nasce il problema?
Il problema nasce con la Same origin policy, che stabilisce il divieto per le applicazioni Web di accedere a risorse con protocollo, dominio, o porta, differenti da quelle del sito di origine.

Esempi:
Il browser, accedendo al sito http://inforgiani.test non potrà effettuare richieste AJAX a https://inforgiani.test perché il protocollo è differente.

Il browser, accedendo al sito http://inforgiani.test non potrà effettuare richieste AJAX a http://inforgiani.test:83 perché la porta è differente (la porta di comunicazione di default per il web è la 80, in questo caso utilizziamo la 83).

Il browser, accedendo al sito http://inforgiani.test potrà effettuare richieste AJAX a http://inforgiani.test perché sia protocollo che dominio che porta sono uguali al sito di origine.

Ciò che potrebbe sembrare follia, in realtà ha delle ragioni per esistere, infatti la Same origin policy è stata già implementata in una versione particolarmente differente da quella odierna nel 1995, da Netscape Navigator, il primo web browser con interfaccia grafica. I motivi dietro a ciò riguardano principalmente la sicurezza dei siti web che visitiamo quotidianamente, infatti un sito web, senza la Same origin policy, potrebbe essere considerato benevolo, pur includendo risorse esterne malevoli.

JSONP: principi di funzionamento
JSONP, che sta per JSON with Padding, ha dei principi di funzionamento fatti appositamente per oltrepassare i limiti imposti dalla Same origin policy.

Utilizzando JSONP, in realtà, non si effettuano richieste AJAX, perché a priori dal formato utilizzato per la ricezione e l'interpretazione dei dati, il browser bloccherebbe la richiesta. Istanziando una richiesta JSONP, in realtà si va ad aggiungere un tag <script> al DOM, sfruttando cosi il Lazy Loading.

Codice:
<script type="text/javascript" src="http://risorsa-esterna.test/addizione?valore1=10&valore2=20&callback=ottieniRisultatoAddizione"></script>

Appena il codice sarà aggiunto al documento, il browser lo interpreterà cercando di ottenere la risorsa JavaScript remota.

L'implementazione di JSONP server-side, farà in modo che la risposta a tale richiesta non sarà JSON, ma sarà JSONP, ovvero un codice JavaScript che richiamerà la nostra funzione callback con i parametri di risposta.

Esempio di risposta:
Codice:
ottieniRisultatoAddizione({risultato: 13});

A questo punto, potremmo gestire il risultato nella nostra funzione:
JavaScript:
function ottieniRisultatoAddizione(risposta) {
    aler("Il risultato è "+risposta.risultato);
}

Limitazioni
Essendo JSONP un work-around al metodo tradizionale, ci sono delle limitazioni e dei svantaggi, i principali sono:
  • E' possibile effettuare solo richieste di tipo GET
    Non è possibile, infatti, effettuare richieste di tipo diverso dal GET utilizzando il tag <script> di HTML.
  • E' necessaria un'implementazione server-side
    Non è possibile utilizzare JSONP laddove la risorsa da ottenere sia fornita esclusivamente in JSON. Molti servizi che forniscono API offrono il supporto a JSONP.

Alternative
Script di prova
E' possibile provare e concepire il funzionamento di JSONP attraverso questo script ideato e realizzato da me. Per il funzionamento, vista la necessita di API sulle quali effettuare la richiesta, è stato utilizzato: jsonplaceholder.typicode.com

Lo script contiene commenti che aiutano anche gli utenti meno esperti a capire il funzionamento del codice.

Prova lo script!


Vedi: https://jsfiddle.net/6qzoobe1/1/
 
Stato
Discussione chiusa ad ulteriori risposte.