Quelles sont les différences entre JSON et JSONP?

393

Formatage, type de fichier et utilisation pratique?

Mohammad
la source
13
Voir Veuillez expliquer JSONP .
Matthew Flaschen
1
Merci pour le lien, il y a de très bonnes informations là-bas.
Mohammad
4
Une méthode est-elle plus rapide que l'autre? Par exemple, si vous utilisez XMLHttpRequest pour OBTENIR une demande (vers le même domaine évidemment car c'est ajax `` normal ''), ou si vous utilisez la méthode JSONP (qui n'utilisera pas XMLHTTPRequest) - l'une sera-t-elle plus rapide que l'autre? Je sais que cela dépend de plusieurs facteurs - mais est-ce que quelqu'un a fait des comparaisons de vitesse?
Yuval A.

Réponses:

405

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);
Marius
la source
3
Y a-t-il encore un point à JSONP en supposant que vous pouvez configurer CORS pour autoriser les demandes d'origine croisée?
y3sh
Peut-être un peu en retard, mais je tiens à répondre à votre question pour les autres.Non, si vous utilisez le JSONP, vous rejetez tous les avantages CORS (j'ai appelé avantage en raison du problème de sécurité.) Je vous recommande d'implémenter CORS correctement, ceci vous aidera sur les problèmes de sécurité et aussi une meilleure approche de l'architecture.
Dogan
101

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.

mpen
la source
2
Séparé de quoi? JSON n'est pas non plus une langue
nickf
6
@nickf: Ouais ... Je cherchais le bon mot ... comment l'appellerais-tu alors? "format d'échange de données" selon json.org.
mpen
ou plus lisible: JSON: un objet javascript en "notation texte". Comme vous feriez toString () un objet Java peut-être?
Sam Vloeberghs
FWIW: @SamVloeberghs - C'est un peu trompeur de dire que le JSON représente un objet javascript. Il peut s'agir de n'importe quelle donnée, de n'importe quelle langue ou base de données, représentable sous forme de paires nom-valeur et de tableaux. Et des conventions supplémentaires sont nécessaires pour effectuer un aller-retour précis avec tout objet JS - voir JSON: types de données natifs non pris en charge . Notamment, JS Date revient au fond comme une chaîne. weblog.west-wind.com/posts/2014/jan/06/...
ToolmakerSteve
66

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.

Alex Wayne
la source
30

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 &amp; 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.

Sankar
la source
18

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.

Delan Azabani
la source
13

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

Elangovan
la source
6

«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.

Vasiliy Faronov
la source
0

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

faridcs
la source