Je comprends JSON, mais pas JSONP. Le document de Wikipedia sur JSON est (était) le premier résultat de recherche pour JSONP. Il dit ceci:

JSONP ou "JSON with padding" est une extension JSON dans laquelle un préfixe est spécifié comme argument d'entrée de l'appel lui-même.

Hein? Quel appel? Cela n'a aucun sens pour moi. JSON est un format de données. Il n'y a pas d'appel.

Le deuxième résultat de recherche provient d'un gars nommé Remy , qui écrit ceci sur JSONP:

JSONP est une injection de balise de script, transmettant la réponse du serveur à une fonction spécifiée par l'utilisateur.

Je peux en quelque sorte comprendre cela, mais cela n'a toujours aucun sens.

Alors qu'est-ce que JSONP? Pourquoi a-t-il été créé (quel problème résout-il)? Et pourquoi devrais-je l'utiliser?

Addendum : je viens de créer une nouvelle page pour JSONP sur Wikipédia; il a maintenant une description claire et approfondie de JSONP, basée sur la réponse de jvenema .

Ce n'est en fait pas trop compliqué ...

Supposons que vous êtes sur le domaine example.comet que vous souhaitez faire une demande de domaine example.net. Pour ce faire, vous devez franchir les limites du domaine , un non-non dans la plupart des pays du navigateur.

Le seul élément qui contourne cette limitation est les <script>balises. Lorsque vous utilisez une balise de script, la limitation de domaine est ignorée, mais dans des circonstances normales, vous ne pouvez vraiment rien faire avec les résultats, le script est simplement évalué.

Entrez JSONP. Lorsque vous faites votre demande à un serveur qui est compatible JSONP, vous passez un paramètre spécial qui en dit un peu plus sur votre page au serveur. De cette façon, le serveur est en mesure de bien emballer sa réponse d'une manière que votre page peut gérer.

Par exemple, supposons que le serveur attend un paramètre appelé callbackpour activer ses capacités JSONP. Votre demande ressemblerait alors à:

http://www.example.net/sample.aspx?callback=mycallback

Sans JSONP, cela pourrait retourner un objet JavaScript de base, comme ceci:

{ foo: 'bar' }

Cependant, avec JSONP, lorsque le serveur reçoit le paramètre "callback", il termine le résultat un peu différemment, en retournant quelque chose comme ceci:

mycallback({ foo: 'bar' });

Comme vous pouvez le voir, il va maintenant invoquer la méthode que vous avez spécifiée. Ainsi, dans votre page, vous définissez la fonction de rappel:

mycallback = function(data){
  alert(data.foo);
};

Et maintenant, lorsque le script sera chargé, il sera évalué et votre fonction sera exécutée. Voila, demandes inter-domaines!

Il convient également de noter le seul problème majeur avec JSONP: vous perdez beaucoup de contrôle sur la demande. Par exemple, il n'y a pas de méthode "sympa" pour récupérer les codes d'erreur appropriés. En conséquence, vous finissez par utiliser des minuteries pour surveiller la demande, etc., ce qui est toujours un peu suspect. La proposition de JSONRequest est une excellente solution pour autoriser les scripts interdomaines , maintenir la sécurité et permettre un contrôle approprié de la demande.

De nos jours (2015), CORS est l'approche recommandée par rapport à JSONRequest. JSONP est toujours utile pour la prise en charge des anciens navigateurs, mais étant donné les implications en matière de sécurité, à moins que vous n'ayez pas le choix, CORS est le meilleur choix.

JSONP est vraiment une astuce simple pour surmonter la même politique de domaine XMLHttpRequest . (Comme vous le savez, on ne peut pas envoyer de demande AJAX (XMLHttpRequest) à un autre domaine.)

Donc - au lieu d'utiliser XMLHttpRequest, nous devons utiliser des balises HTML de script , celles que vous utilisez habituellement pour charger les fichiers js, afin que js obtienne des données d'un autre domaine. Ça a l'air bizarre?

La chose est - il s'avère que les balises de script peuvent être utilisées d'une manière similaire à XMLHttpRequest ! Regarde ça:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

Vous vous retrouverez avec un segment de script qui ressemble à ceci après avoir chargé les données:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

Cependant, cela est un peu gênant, car nous devons récupérer ce tableau à partir de la balise de script . Alors JSONP créateurs ont décidé que cela fonctionnera mieux (et il est):

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';

Remarquez la fonction my_callback là-bas? Ainsi - lorsque le serveur JSONP reçoit votre demande et trouve un paramètre de rappel - au lieu de renvoyer un tableau js ordinaire, il renvoie ceci:

my_callback({['some string 1', 'some data', 'whatever data']});

Voyez où est le profit: nous obtenons maintenant un rappel automatique (my_callback) qui sera déclenché une fois que nous aurons les données.
C'est tout ce qu'il y a à savoir sur JSONP : c'est un rappel et des balises de script.

REMARQUE: ce sont de simples exemples d'utilisation de JSONP, ce ne sont pas des scripts prêts pour la production.

Exemple JavaScript de base (flux Twitter simple utilisant JSONP)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

Exemple de base jQuery (flux Twitter simple utilisant JSONP)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>

JSONP signifie JSON with Padding . (technique très mal nommée car elle n'a vraiment rien à voir avec ce que la plupart des gens considéreraient comme du «rembourrage».)

JSONP fonctionne en construisant un élément «script» (soit dans le balisage HTML, soit inséré dans le DOM via JavaScript), qui demande à un emplacement de service de données distant. La réponse est un javascript chargé sur votre navigateur avec le nom de la fonction prédéfinie ainsi que le paramètre transmis qui est les données JSON demandées. Lorsque le script s'exécute, la fonction est appelée avec les données JSON, permettant à la page demandeuse de recevoir et de traiter les données.

Pour de plus amples informations, visitez: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

extrait de code côté client

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

Morceau de code PHP côté serveur

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

Parce que vous pouvez demander au serveur d'ajouter un préfixe à l'objet JSON renvoyé. Par exemple

function_prefix(json_object);

afin que le navigateur eval"inline" la chaîne JSON en tant qu'expression. Cette astuce permet au serveur «d'injecter» du code javascript directement dans le navigateur client et ceci en contournant les restrictions de «même origine».

En d'autres termes, vous pouvez réaliser un échange de données entre domaines .

Normalement, XMLHttpRequestne permet pas directement l'échange de données entre domaines (il faut passer par un serveur du même domaine) alors que:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `on peut accéder aux données d'un domaine différent de celui d'origine.

A noter également: même si le serveur doit être considéré comme "fiable" avant de tenter ce genre de "truc", les effets secondaires d'un éventuel changement de format d'objet, etc. peuvent être contenus. Si une function_prefix(c'est-à-dire une fonction js appropriée) est utilisée pour recevoir l'objet JSON, ladite fonction peut effectuer des vérifications avant d'accepter / de poursuivre le traitement des données renvoyées.

JSONP est un excellent moyen de contourner les erreurs de script inter-domaines. Vous pouvez consommer un service JSONP uniquement avec JS sans avoir à implémenter un proxy AJAX côté serveur.

Vous pouvez utiliser le service b1t.co pour voir comment cela fonctionne. Il s'agit d'un service JSONP gratuit qui vous permet de minimiser vos URL. Voici l'url à utiliser pour le service:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback==resultsCallBack

Par exemple, l'appel, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=wwhatJavascriptName&url=google.com

retournerais

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

Et donc lorsque cela sera chargé dans votre js en tant que src, il exécutera automatiquement toutJavascriptName que vous devriez implémenter comme fonction de rappel:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

Pour effectuer réellement l'appel JSONP, vous pouvez le faire de plusieurs façons (y compris en utilisant jQuery) mais voici un exemple pur JS:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

Un exemple étape par étape et un service Web jsonp pour s'exercer sont disponibles à: cet article

Un exemple simple pour l'utilisation de JSONP.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

Avant de comprendre JSONP, vous devez connaître le format JSON et XML. Actuellement, le format de données le plus utilisé sur le Web est XML, mais XML est très compliqué. Cela rend les utilisateurs peu pratiques à traiter intégrés dans les pages Web.

Pour que JavaScript puisse facilement échanger des données, même en tant que programme de traitement de données, nous utilisons le libellé en fonction des objets JavaScript et avons développé un format d'échange de données simple, qui est JSON. JSON peut être utilisé comme données ou comme programme JavaScript.

JSON peut être directement incorporé dans JavaScript, en les utilisant, vous pouvez exécuter directement certains programmes JSON, mais en raison de contraintes de sécurité, le mécanisme Sandbox du navigateur désactive l'exécution de code JSON interdomaine.

Pour que le JSON puisse être passé après l'exécution, nous avons développé un JSONP. JSONP contourne les limites de sécurité du navigateur avec la fonctionnalité de rappel JavaScript et la balise <script>.

Donc, en bref, il explique ce qu'est JSONP, quel problème il résout (quand l'utiliser).

TL; DR

JSONP est une vieille astuce inventée pour contourner la restriction de sécurité qui nous interdit d'obtenir des données JSON à partir d'un serveur différent (une origine différente * ).

L'astuce fonctionne en utilisant une <script>balise qui demande le JSON de cet endroit, par exemple :,{ "user":"Smith" } mais enveloppé dans une fonction, le JSONP réel ("JSON avec remplissage"):

peopleDataJSONP({"user":"Smith"})

Le recevoir sous cette forme nous permet d'utiliser les données au sein de notre peopleDataJSONPfonction. JSONP est une mauvaise pratique , ne l'utilisez pas (lire ci-dessous)

Le problème

Supposons que nous naviguons ourweb.comet que nous voulons obtenir des données JSON (ou vraiment des données brutes) anotherweb.com. Si nous devions utiliser la requête GET (comme XMLHttpRequestun fetchappel, $.ajaxetc.), notre navigateur nous dirait que ce n'est pas autorisé avec cette horrible erreur:

Comment obtenir les données que nous voulons? Eh bien, les <script>balises ne sont pas soumises à toute cette restriction de serveur (origine *)! C'est pourquoi nous pouvons charger une bibliothèque comme jQuery ou Google Maps à partir de n'importe quel serveur, tel qu'un CDN, sans aucune erreur.

Point important : si vous y réfléchissez, ces bibliothèques sont du code JS réel et exécutable (généralement une fonction massive avec toute la logique à l'intérieur). Mais des données brutes? Les données JSON ne sont pas du code . Il n'y a rien à courir; ce sont juste des données simples.

Par conséquent, il n'y a aucun moyen de gérer ou de manipuler nos précieuses données. Le navigateur téléchargera les données pointées par notre <script>tag et lors du traitement, il se plaindra à juste titre:

wtf est cette {"user":"Smith"}merde que nous avons chargée? Ce n'est pas du code. Je ne peux pas calculer, erreur de syntaxe!

Le hack JSONP

La manière ancienne / hacky d'utiliser ces données? Nous avons besoin de ce serveur pour l'envoyer avec une certaine logique, donc lorsqu'il est chargé, votre code dans le navigateur pourra utiliser lesdites données. Le serveur étranger nous envoie donc les données JSON à l'intérieur d'une fonction JS. Les données elles-mêmes sont configurées comme entrée de cette fonction. Cela ressemble à ceci:

peopleDataJSONP({"user":"Smith"})

ce qui en fait du code JS que notre navigateur analysera sans se plaindre! Exactement comme avec la bibliothèque jQuery. Maintenant, pour l'obtenir comme ça, le client "demande" au serveur compatible JSONP de le faire, généralement comme ceci:

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

Notre navigateur recevra le JSONP avec ce nom de fonction, donc nous avons besoin d'une fonction avec le même nom dans notre code, comme ceci:

const peopleDataJSONP = function(data){
  alert(data.user); // "Smith"
}

Ou comme ça, même résultat:

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

Le navigateur va télécharger le JSONP et l'exécuter, qui appelle notre fonction , où l'argument datasera notre JSON. Nous pouvons maintenant faire avec nos données tout ce que nous voulons.

N'utilisez pas JSONP, utilisez CORS

JSONP est un hack intersite avec quelques inconvénients:

• Nous ne pouvons effectuer que des requêtes GET
• Comme il s'agit d'une demande GET déclenchée par une simple balise de script, nous n'obtenons pas d'erreurs utiles ni d'informations de progression
• Il existe également des problèmes de sécurité, comme l'exécution de votre code JS client qui pourrait être changé en une charge utile malveillante.
• Cela ne résout que le problème avec les données JSON, mais la politique de sécurité de même origine s'applique aux autres données (WebFonts, images / vidéo dessinées avec drawImage () ...)
• Ce n'est ni très élégant ni lisible.

Le point à retenir est qu'il n'est pas nécessaire de l'utiliser de nos jours .

JSONP est l'astuce pour obtenir des données JSON à partir d'un autre serveur, mais nous violerons le même principe de sécurité (Same-Origin) si nous avons besoin d'autres types de choses intersites.

Vous devriez lire sur CORS ici , mais l'essentiel est:

Le partage de ressources entre origines (CORS) est un mécanisme qui utilise des en-têtes HTTP supplémentaires pour indiquer aux navigateurs de donner à une application Web fonctionnant à une origine, l'accès aux ressources sélectionnées d'une origine différente. Une application Web exécute une requête HTTP d'origine croisée lorsqu'elle demande une ressource qui a une origine (domaine, protocole ou port) différente de la sienne.

* l'origine est définie par 3 choses: protocole , port et hôte . Ainsi, par exemple, https://web.comest une origine différente de http://web.com(protocole différent) et https://web.com:8081(port différent) et évidemment https://thatotherweb.net(hôte différent)

Les bonnes réponses ont déjà été données, il me suffit de donner ma pièce sous forme de blocs de code en javascript (j'inclurai également une solution plus moderne et meilleure pour les requêtes d'origine croisée: CORS avec en-têtes HTTP):

JSONP:

1.client_jsonp.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);    
    }
});​​​​​​​​​​​​​​​​​​

2.server_jsonp.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {

    var callback = url.parse(req.url, true).query.callback || "myCallback";
    console.log(url.parse(req.url, true).query.callback);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    data = callback + '(' + JSON.stringify(data) + ');';

    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(data);
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

CORS :

3.client_cors.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/",
    success: function(data) {
        console.log(data);    
    }
});​

4.server_cors.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {
    console.log(req.headers);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    res.writeHead(200, {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    });

    res.end(JSON.stringify(data));
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

JSONP signifie JSON with Padding .

Voici le site, avec de grands exemples , avec l'explication de l'utilisation la plus simple de cette technique au plus avancé en JavaScript avion:

w3schools.com / JSONP

L'une de mes techniques les plus préférées décrites ci-dessus est Dynamic JSON Result , qui permet d'envoyer JSON au fichier PHP en paramètre URL , et de laisser le fichier PHP retourner également un objet JSON en fonction des informations qu'il obtient .

Des outils comme jQuery ont également des fonctionnalités pour utiliser JSONP :

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);