Ce qui est tout environ JSONP ?

Question

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

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

Hein? Quel appel? Ça 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 la recherche est d'un gars nommé Remy, qui écrit à ce propos JSONP:

JSONP est balise de script d'injection, en passant la réponse du serveur en tant qu'utilisateur de la fonction spécifiée.

Je peux comprendre ça, mais c'est encore de ne faire aucun sens.

---

Donc, qu'est-ce que JSONP? Pourquoi était-il créé (quel problème à résoudre)? Et pourquoi devrais-je utiliser?

---

Addendum: j'ai créé une nouvelle page pour JSONP sur Wikipedia, il dispose maintenant de façon claire et approfondie description de JSONP, basé sur jvenema's réponse.

Answer 1

C'est en fait pas trop compliqué...

Dire que vous êtes sur le domaine abc.com et vous souhaitez faire une demande d'domaine xyz.com. Pour ce faire, vous avez besoin de franchir les limites d'un domaine, d'un non-non dans la plupart des browserland.

Le seul élément qui contourne cette limitation est les balises <script>. Lorsque vous utilisez une balise de script, le domaine de la limitation est ignoré, mais dans des circonstances normales, vous ne pouvez pas vraiment FAIRE n'importe quoi avec les résultats, le script est juste évalués.

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

Par exemple, dire que le serveur attend un paramètre appelé "rappel" pour permettre à ses JSONP capacités. Ensuite, votre demande pourrait ressembler à:

http://www.xyz.com/sample.aspx?callback=mycallback

Sans JSONP, ce qui pourrait renvoyer le code JavaScript de base de l'objet, comme suit:

{ foo: 'bar' }

Cependant, avec JSONP, lorsque le serveur reçoit le "rappel" de paramètre, il s'enroule le résultat un peu différemment, de retour quelque chose comme ceci:

mycallback({ foo: 'bar' });

Comme vous pouvez le voir, il faudra désormais appeler la méthode que vous avez spécifié. Donc, dans votre page, vous définissez la fonction de rappel:

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

Et maintenant, quand le script est chargé, il va être évalué, et votre fonction sera exécutée. Voila, la croix-domaine de demandes de!

Il est également intéressant de noter que l'un des principaux problèmes avec JSONP: vous perdez beaucoup de contrôle de la demande. Par exemple, il n'y a pas de "gentil", de façon à obtenir une défaillance des codes de retour. Comme un résultat, vous vous retrouvez à l'aide de chronomètres pour suivre la demande, etc, ce qui est toujours un peu suspect. La proposition de JSONRequest est une excellente solution pour permettre à la croix-domaine de script, le maintien de la sécurité, et de permettre un contrôle de la demande.

Answer 2

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

Si - au lieu de l'aide de XMLHttpRequest , nous devons utiliser le script de balises HTML, ceux que vous utilisez habituellement pour charger les fichiers js, afin de js pour obtenir des données à partir d'un autre domaine. Des bruits bizarres?

Chose est s'avère script balises peuvent être utilisées dans un mode similaire à XMLHttpRequest! Check this out:

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

Vous allez vous retrouver avec un script segment qui ressemble à ceci après qu'il charge les données:

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

Cependant, c'est un peu gênant, parce que nous devons chercher ce tableau à partir d' un script tag. Donc JSONP créateurs ont décidé que cela fonctionnera mieux(et il l'est):

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

Avis de la my_callback fonction, là-bas? Alors - quand JSONP serveur reçoit votre demande et trouve de rappel des paramètres au lieu de retourner plaine js tableau, il reviendra à ceci:

?callback=my_callback

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

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

Le code JavaScript de base exemple (simple flux Twitter à l'aide de JSONP)

';

La base de jQuery exemple (simple flux Twitter à l'aide de JSONP)

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

JSONP est synonyme de JSON avec Rembourrage. (très mal nommée technique car il n'a vraiment rien à voir avec ce que la plupart des gens pensent de "rembourrage".)

Answer 3

JSONP travaux par la construction d'un "script" de l'élément (dans des balises HTML ou l'insérer dans le DOM via JavaScript), ce qui en fait la demande un service de données à distance de l'emplacement. La réponse est un javascript chargés sur votre navigateur avec le nom de la pré-définies de la fonction avec paramètre passé qui est tht JSON données demandées. Lorsque le script s'exécute, la fonction est appelée avec les données JSON, permettant la page de requête pour recevoir et traiter les données.

Pour en savoir Plus, Visitez: http://www.avlabz.com/2013/03/cors-the-secret-behind-jsonp/

côté client, extrait de code

    <!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>

Côté serveur morceau de 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 . ")";
?>

Answer 4

Parce que vous pouvez demander au serveur pour ajouter un préfixe pour le retour de l'objet JSON. E. g

function_prefix(json_object);

afin que le navigateur eval "inline", la chaîne JSON comme une expression. Cette astuce permet-il possible pour le serveur à "injecter" du code javascript directement dans le navigateur du Client et ce, à contourner le "même origine" restrictions.

En d'autres termes, vous pouvez avoir de la croix-domaine de l'échange de données.

---

Normalement, XmlHttpRequest n'a pas permis de la croix-domaine de l'échange de données directement (on a besoin de passer par un serveur dans le même domaine), considérant ce qui suit:

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

---

Aussi à noter: même si le serveur doit être considéré comme "de confiance" avant de tenter ce genre de "truc", les effets secondaires possibles de changement dans le format de l'objet, etc. peut être contenue. Si un function_prefix (c'est à dire une bonne fonction js) est utilisé pour recevoir l'objet JSON, cette fonction peut effectuer des vérifications avant d'accepter et traiter les données renvoyées.

Answer 5

Pour ceux qui ne comprennent toujours pas, ici est un tutoriel. Explication claire avec des exemples de la pratique.