Quelles sont les différences entre JSON et JSONP ?

Question

En termes de format, de type de fichier et d'utilisation pratique ?

Answer 1

JSONP est JSON avec remplissage. C'est-à-dire que vous mettez une chaîne de caractères au début et une paire de parenthèses autour. Par exemple :

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

Le résultat est que vous pouvez charger le JSON comme un fichier script. Si vous avez précédemment mis en place une fonction appelée func alors cette fonction sera appelée avec un seul argument, qui est les données JSON, lorsque le fichier script aura fini de se charger. Ceci est généralement utilisé pour permettre un AJAX intersite avec des données JSON. Si vous savez que exemple.com sert des fichiers JSON qui ressemblent à l'exemple JSONP donné ci-dessus, vous pouvez utiliser un code comme celui-ci pour le récupérer, même si vous n'êtes pas sur le domaine exemple.com :

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

Answer 2

Fondamentalement, vous n'êtes pas autorisé à demander des données JSON à partir d'un autre domaine via AJAX en raison de la politique de same-origin. AJAX vous permet d'aller chercher des données après le chargement d'une page, puis d'exécuter du code ou d'appeler une fonction après le retour. Nous ne pouvons pas utiliser AJAX, mais nous sommes autorisés à injecter du code ou une fonction dans la page. <script> dans notre propre page et ceux-ci sont autorisés à faire référence à des scripts hébergés dans d'autres domaines.

Habituellement, vous l'utiliserez pour inclure des bibliothèques provenant d'un CDN tel que jQuery . Cependant, nous pouvons en abuser et l'utiliser pour récupérer des données à la place ! JSON est déjà du JavaScript valide ( dans l'ensemble ), mais nous ne pouvons pas simplement retourner JSON dans notre fichier script, car nous n'avons aucun moyen de savoir quand le script/données a fini de se charger et nous n'avons aucun moyen d'y accéder à moins qu'il ne soit assigné à une variable ou passé à une fonction. Donc, ce que nous faisons à la place, c'est dire au service web d'appeler une fonction en notre nom quand il est prêt.

Par exemple, nous pouvons demander des données à l'API d'une bourse et, en plus des paramètres habituels de l'API, nous lui donnons une fonction de rappel, comme suit ?callback=callThisWhenReady . Le service web enveloppe ensuite les données avec notre fonction et les renvoie comme ceci : callThisWhenReady({...data...}) . Maintenant, dès que le script se charge, votre navigateur va essayer de l'exécuter (comme d'habitude), qui à son tour appelle notre fonction arbitraire et nous fournit les données que nous voulions.

Cela fonctionne comme une demande AJAX normale, sauf qu'au lieu d'appeler une fonction anonyme, nous devons utiliser des fonctions nommées.

jQuery prend en charge cette tâche de manière transparente en créant une fonction au nom unique pour vous et en la transmettant, qui exécutera à son tour le code souhaité.

Answer 3

JSONP vous permet de spécifier une fonction de rappel à laquelle est transmis votre objet JSON. Cela vous permet de contourner la politique de la même origine et de charger le JSON d'un serveur externe dans le JavaScript de votre page Web.

Answer 4

JSONP est l'abréviation de "JSON with Padding" (JSON avec remplissage) et constitue une solution de rechange pour le chargement de données provenant de différents domaines. Il charge le script dans l'en-tête du DOM et vous pouvez ainsi accéder aux informations comme si elles étaient chargées sur votre propre domaine, contournant ainsi le problème des domaines croisés.

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

Nous pouvons maintenant demander le JSON via AJAX en utilisant JSONP et la fonction de rappel que nous avons créée autour du contenu JSON. Le résultat devrait être le JSON sous forme d'objet, que nous pourrons ensuite utiliser comme bon nous semble, sans restriction.

Answer 5

JSONP est essentiellement du JSON avec du code supplémentaire, comme un appel de fonction enveloppé autour des données. Il permet d'agir sur les données pendant l'analyse syntaxique.