Question Qu'est-ce que JSONP?


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

JSONP ou "JSON avec remplissage" est une extension JSON dans laquelle un préfixe est spécifié en tant qu'argument d'entrée de l'appel lui-même.

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

le 2ème résultat de recherche vient d'un gars nommé Remy, qui écrit ceci à propos de 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 ça 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 l'utiliserais-je?


Addenda: Je viens de créer une nouvelle page pour JSONP sur Wikipedia; il a maintenant une description claire et complète de JSONP, basée sur jvenemaLa réponse


1833
2018-01-14 20:53


origine


Réponses:


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

Supposons que vous soyez sur le site example.com et que vous souhaitiez faire une demande au domaine example.net. Pour ce faire, vous devez traverser les limites de domaine, un non-non dans la plupart des navigateurs.

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

Entrez JSONP. Lorsque vous effectuez votre requête sur un serveur compatible avec JSONP, vous transmettez un paramètre spécial qui indique au serveur un peu plus sur votre page. De cette façon, le serveur est capable d'encapsuler sa réponse d'une manière que votre page peut gérer.

Par exemple, disons que le serveur attend un paramètre appelé "callback" pour activer ses capacités JSONP. Alors votre requête ressemblerait à:

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

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

{ foo: 'bar' }

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

mycallback({ foo: 'bar' });

Comme vous pouvez le voir, il va maintenant appeler 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, quand le script est chargé, il sera évalué, et votre fonction sera exécutée. Voila, demandes interdomaines!

Il est également intéressant de noter le problème majeur avec JSONP: vous perdez beaucoup de contrôle de la demande. Par exemple, il n'y a pas de moyen «sympa» d'obtenir les bons codes d'échec. Par conséquent, vous finissez par utiliser des minuteurs pour surveiller la requête, etc., ce qui est toujours un peu suspect. La proposition pour JSONRequest est une excellente solution pour permettre l'écriture de scripts interdomaines, le maintien de la sécurité et le contrôle approprié de la requête.

Ces jours-ci (2015), CORS est l'approche recommandée par rapport à JSONRequest. JSONP est toujours utile pour les anciens navigateurs, mais compte tenu des implications en termes de sécurité, à moins que vous n'ayez pas le choix, CORS est le meilleur choix.


1795
2018-01-14 21:08



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

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

Chose est - se révèle scénario les étiquettes 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 allez vous retrouver avec un scénario segment qui ressemble à ceci après le chargement des données:

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

Cependant, c'est un peu gênant, car nous devons aller chercher ce tableau scénario marque. Alors JSONP les créateurs ont décidé que cela fonctionnerait mieux (et ça l'est):

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

Notez le my_callback fonctionner là-bas? Donc quand JSONP le serveur reçoit votre requête et trouve le paramètre callback - au lieu de retourner le tableau js, il retournera ceci:

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

Voyez où le bénéfice est: maintenant nous obtenons le 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 callback et des tags de script.

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

Exemple JavaScript basique (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 jQuery basique (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 avec remplissage. (Technique très mal nommée car elle n'a vraiment rien à voir avec ce que la plupart des gens pourraient qualifier de "rembourrage".)


640
2017-07-29 21:40



JSONP fonctionne en construisant un élément "script" (soit en HTML ou 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 et le paramètre qui est passé, c'est-à-dire les données JSON demandées. Lorsque le script s'exécute, la fonction est appelée avec les données JSON, ce qui permet à la page demandant de recevoir et de traiter les données.

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

extrait de code 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>

Pièce côté serveur du code PHP

<?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 . ")";
?>

38
2018-03-17 13:32



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

function_prefix(json_object);

pour 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 avoir échange de données interdomaines.


Normalement, XMLHttpRequest ne permet pas l'échange de données inter-domaines directement (il faut passer par un serveur dans le 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 l'origine.


A noter également: même si le serveur doit être considéré comme "digne de confiance" avant d'essayer ce genre de "truc", les effets secondaires d'un éventuel changement de format d'objet etc. peuvent être contenus. Si un 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 traiter plus avant les données renvoyées.


37
2018-01-14 20:58



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

Vous pouvez utiliser le b1t.co service pour voir comment cela fonctionne. C'est un service JSONP gratuit qui vous permet de réduire vos URL. Voici l'URL à utiliser pour le service:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

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

retournerais

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

Et donc quand ce get est chargé dans votre js comme src, il exécutera automatiquement queljavascriptName que vous devriez implémenter comme fonction de callback:

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

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

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 à pratiquer est disponible à: ce post


17
2018-03-28 15:59



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;

    ?>    

10
2018-06-06 06:45



Avant de comprendre JSONP, vous devez connaître le format JSON et XML. Actuellement, le format de données le plus fréquemment utilisé sur le Web est XML, mais XML est très compliqué. Cela rend les utilisateurs gênants pour traiter 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é selon les objets JavaScript et avons développé un format d'échange de données simple, qui est JSON. JSON peut être utilisé en tant que données ou en tant que programme JavaScript.

JSON peut être directement intégré dans JavaScript, en les utilisant, vous pouvez directement exécuter 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 interdomaines.

Pour rendre JSON peut ê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é JavaScript Callback et la balise <script>.

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


9
2017-12-08 04:02