web-dev-qa-db-fra.com

Quelles sont les différences entre JSON et JSONP?

Format sage, type de fichier sage et utilisation pratique sage?

jsonjsonpjavascript
369
Mohammad

JSONP est JSON avec padding, c'est-à-dire que vous mettez une chaîne 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 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, à savoir les données JSON, lorsque le chargement du fichier de script est terminé. Ceci est généralement utilisé pour autoriser les données JSON intersite AJAX. Si vous savez que example.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 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);
387
Marius

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

Habituellement, vous utiliseriez ceci pour inclure des bibliothèques à partir d'un CDN tel que jQuery . Cependant, nous pouvons en abuser et l'utiliser pour récupérer des données! JSON est déjà JavaScript (pour la plupart) valide, mais nous ne pouvons pas simplement renvoyer JSON dans notre fichier script, car nous n'avons aucun moyen de savoir quand le script/les données ont été chargés et nous n'avons aucun moyen d'y accéder, à moins que ce soit assigné à une variable ou passé à une fonction. Nous demandons donc au service Web d’appeler une fonction en notre nom quand elle est prête.

Par exemple, nous pouvons demander des données à une API boursière et, avec nos paramètres API habituels, nous lui donnons un rappel, comme callThisWhenReady. Le service Web encapsule ensuite les données avec notre fonction et les renvoie comme suit: callThisWhenReady({...data...}). Désormais, dès que le script sera chargé, votre navigateur tentera de l'exécuter (comme d'habitude), ce qui appelle notre fonction arbitraire et nous fournit les données souhaitées.

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 cela en charge de manière transparente pour vous en créant une fonction nommée de manière unique et en la transmettant, qui exécutera à son tour le code souhaité.

84
mpen

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

62
Alex Wayne

JSONP signifie «JSON avec Padding» et constitue 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 permet ainsi d'accéder aux informations comme si elles étaient chargées sur votre propre domaine, ce qui permet d'éviter le problème de domaine croisé.

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 sous forme d'objet dont nous pouvons ensuite utiliser les données pour ce que nous voulons sans restrictions .

30
Sankar

JSONP est essentiellement, JSON avec du code supplémentaire, comme un appel de fonction encapsulé dans les données. Il permet d’agir sur les données lors de l’analyse.

18
Delan Azabani

JSON

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

Exemple:

Voici un exemple minimal qui utilise JSON comme moyen de transport pour la réponse du serveur. Le client effectue une demande Ajax avec la fonction abrégée jQuery $ .getJSON. Le serveur génère un hachage, le formate en tant que JSON et le renvoie au client. Le client le formate 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));
});

Sortie:

  {
   "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.

Le seul changement 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));
});

Sortie: 

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

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

13
Elangovan

"JSONP est JSON avec du code supplémentaire" serait trop facile pour le monde réel. Non, tu dois avoir de petites anomalies. Quel est le plaisir dans la programmation si tout fonctionne seulement _?

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, vous serez un jour mordu par d'étranges erreurs de syntaxe, comme ce fut le cas aujourd'hui.

6
Vasiliy Faronov

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

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

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

Tout le code est disponible gratuitement sur Github et une version en direct est disponible sur http://json-jsonp-tutorial.craic.com

0
faridcs