JSONP (JSON with Padding) ha la peculiare caratteristica di venire gestito da remoto con una funzione globale di callback. In JavaScript occorre seguire una procedura precisa per gestire questo formato di dati.
Di solito gli URL delle API che utilizzano questo formato si presentano come https://api/?action=value&callback=?. Il punto interrogativo nel parametro callback sta ad indicare che quel valore va sostituito con il nome di una funzione globale implementata dal client per il parsing dei valori di ritorno (un oggetto JSON).
Per globale si intende una funzione che risulta essere una proprietà dell'oggetto window. Se il server remoto lo consente, possiamo effettuare una richiesta AJAX diretta. In caso contrario (ad esempio Flickr), dobbiamo procedere come segue:
'use strict';
const parseData = json => {
console.log( json ); // Funzione globale
}
document.addEventListener( 'DOMContentLoaded', () => {
// Aggiungiamo il nome della nostra funzione al parametro callback
const url = 'http://api/?action=value&callback=parseData';
let script = document.createElement( 'script' );
script.src = url;
document.body.appendChild( script );
});
Il parsing dell'oggetto JSON restituito nella risposta viene quindi affidato alla funzione globale.