Quelles sont les différences entre JSON et JSONP?

Formatage, type de fichier et utilisation pratique?

JSONP est JSON avec rembourrage. Autrement dit, vous mettez une chaîne au début et une paire de parenthèses autour d'elle. Par exemple:

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

Le résultat est que vous pouvez charger le JSON en tant que fichier de script. Si vous avez précédemment configuré une fonction appelée func, cette fonction sera appelée avec un argument, qui est les données JSON, lorsque le chargement du fichier de script est terminé. Ceci est généralement utilisé pour permettre un AJAX intersite avec des données JSON. Si vous savez que example.com sert des fichiers JSON qui ressemblent à l'exemple JSONP donné ci-dessus, vous pouvez utiliser du code comme celui-ci pour le récupérer, même si vous n'êtes pas sur le domaine example.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);

Fondamentalement, vous n'êtes pas autorisé à demander des données JSON à partir d'un autre domaine via AJAX en raison de la même politique d'origine. AJAX vous permet de récupérer des données après qu'une page a déjà été chargée, puis d'exécuter du code / d'appeler une fonction une fois qu'elle est revenue. Nous ne pouvons pas utiliser AJAX mais nous sommes autorisés à injecter des <script>balises dans notre propre page et celles-ci sont autorisées à référencer des scripts hébergés sur d'autres domaines.

Habituellement, vous utiliseriez cela pour inclure des bibliothèques à partir d'un CDN tel que jQuery . Cependant, nous pouvons abuser de cela et l'utiliser à la place pour récupérer des données! JSON est déjà du JavaScript valide ( pour la plupart ), mais nous ne pouvons pas simplement renvoyer JSON dans notre fichier de script, car nous n'avons aucun moyen de savoir quand le script / les données ont 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 de dire au service Web d'appeler une fonction en notre nom lorsqu'elle est prête.

Par exemple, nous pouvons demander certaines données à une API de bourse, et avec nos paramètres d'API habituels, nous lui donnons un rappel, comme ?callback=callThisWhenReady. Le service Web enveloppe alors les données avec notre fonction et il revient à 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 alimente les données que nous voulions.

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

jQuery prend en charge cela de manière transparente pour vous en créant une fonction au nom unique pour vous et en la faisant passer, qui exécutera à son tour le code que vous vouliez.

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

JSONP signifie «JSON with Padding» et c'est une solution de contournement pour charger des données de différents domaines. Il charge le script dans la 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 interdomaine.

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);

Maintenant, nous pouvons demander le JSON via AJAX en utilisant JSONP et la fonction de rappel que nous avons créée autour du contenu JSON. La sortie doit être le JSON en tant qu'objet que nous pouvons ensuite utiliser les données pour tout ce que nous voulons sans restrictions.

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

JSON

JSON (JavaScript Object Notation) est un moyen pratique de transporter des données entre applications, en particulier lorsque la destination est une application JavaScript.

Exemple:

Voici un exemple minimal qui utilise JSON comme transport pour la réponse du serveur. Le client fait une requête Ajax avec la fonction sténographie jQuery $ .getJSON. Le serveur génère un hachage, le formate en JSON et le renvoie au client. Le client formate cela et le place dans un élément de page.

Serveur:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

Client:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

Production:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (JSON avec rembourrage)

JSONP est un moyen simple de surmonter les restrictions du navigateur lors de l'envoi de réponses JSON à partir de différents domaines à partir du client.

La seule modification du côté client avec JSONP consiste à ajouter un paramètre de rappel à l'URL

Serveur:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

Client:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

Production:

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

Lien: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

«JSONP est JSON avec du code supplémentaire» serait trop facile pour le monde réel. Non, tu dois avoir de petites différences. Quel est le plaisir de la programmation si tout fonctionne ?

Il s'avère que JSON n'est pas un sous-ensemble de JavaScript . Si tout ce que vous faites est de prendre un objet JSON et de l'envelopper dans un appel de fonction, un jour vous serez mordu par d'étranges erreurs de syntaxe, comme je l'étais aujourd'hui.

JSONP est un moyen simple de surmonter les restrictions du navigateur lors de l'envoi de réponses JSON à partir de différents domaines à partir du client.

Mais la mise en œuvre pratique de l'approche implique des différences subtiles qui ne sont souvent pas expliquées clairement.

Voici un didacticiel simple qui montre JSON et JSONP côte à côte.

Tout le code est disponible gratuitement sur Github et une version live peut être trouvée sur http://json-jsonp-tutorial.craic.com