tutorial - récupérer données json javascript




Qu'est-ce que JSONP? (5)

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 simple d'échange de données, 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).

Cette question a déjà une réponse ici:

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 deuxième résultat de recherche provient 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?

Addendum : 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 la réponse de jvenema .


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 rien faire avec les résultats, le script est simplement é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 JSONRequest , le maintien de la sécurité et le contrôle approprié de la requête.

De nos jours (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.


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

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 "en ligne" 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 un échange de données entre domaines .

Normalement, XMLHttpRequest ne permet pas directement l'échange de données entre domaines (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 propre) est utilisé pour recevoir l'objet JSON, cette fonction peut effectuer des vérifications avant d'accepter / de traiter les données renvoyées.


JSONP est vraiment une astuce simple pour surmonter la même politique de domaine XMLHttpRequest . (Comme vous le savez, vous ne pouvez pas envoyer de requête AJAX (XMLHttpRequest) à un domaine différent.)

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 puisse obtenir des données d'un autre domaine. Ça a l'air bizarre?

Chose est - s'avère que les balises de script peuvent être utilisés 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 segment de script 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 récupérer ce tableau à partir de la balise de script . Les créateurs de JSONP ont donc 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 la fonction my_callback là-bas? Donc - quand le serveur JSONP 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ù est le profit: 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 Padding . (Technique très mal nommée car elle n'a vraiment rien à voir avec ce que la plupart des gens pourraient qualifier de "rembourrage".)







terminology