J’ai connu que JSONP est JSON avec rembourrage.
Je comprends ce que JSON est et comment l’utiliser avec `` . Cependant, je ne comprends pas le concept de la `` lors de la présentation JSONP.
Quelqu'un peut-il m’expliquer comment cela fonctionne ?
Cette question a déjà des réponses:
- Ce qui est tout environ JSONP ? (5 réponses )
Réponses
Trop de publicités?
JSONP est une méthode couramment utilisée pour contourner la croix-domaine des politiques dans les navigateurs web (Vous n'êtes pas autorisé à faire des requêtes AJAX vers une page web perçu comme être sur un autre serveur par le navigateur).
JSON et JSONP se comporter différemment sur le client et le serveur. JSONP les demandes ne sont pas expédiés à l'aide de XMLHTTPRequest (et le navigateur méthodes), au lieu d'un <script> tag est créé, dont la source est définie à l'URL cible. Cette balise script est ensuite ajouté au DOM (normalement l' <head>).
JSON Demande:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// success
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
JSONP Demande:
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
La différence entre une réponse JSON et un JSONP réponse, c'est que le JSONP réponse est formulée telle que la réponse de l'objet est passé comme argument à une fonction de rappel.
JSON:
{
"bar": "baz"
}
JSONP:
foo({
"bar": "baz"
});
C'est pourquoi vous voyez JSONP demandes contenant le "rappel" paramètre; de sorte que le serveur connaît le nom de la fonction pour envelopper la réponse autour de.
Cette fonction doit exister dans la portée globale au moment de l' <script> balise est évaluée par le navigateur (une fois que la demande est terminé).
Une autre différence de courant entre le traitement d'une réponse JSON et un JSONP réponse, c'est que toutes les erreurs d'analyse dans une réponse JSON peuvent être capturées (par emballage de la tentative d'évaluer le responseText dans une instruction try/catch). En raison de la nature d'un JSONP réponse cependant, l'analyse des erreurs dans la réponse du rendement d'une part insaisissable de JS erreur d'analyse. Les deux formats peuvent cependant mettre en œuvre des erreurs de délai d'attente (en fixant un délai d'attente avant de lancer la demande, et d'effacer le délai dans la réponse du gestionnaire.
L'utilité de l'utilisation de jQuery pour faire JSONP demandes, c'est que jQuery ne alllllllll le travail pour vous dans le fond.
jQuery exige (par défaut), vous permet d'inclure &callback=? dans l'URL de votre requête AJAX. jQuery va prendre l' success fonction vous permet d'indiquer, attribuez-lui un nom unique et de le publier dans la portée globale. Elle va ensuite remplacer le ? en &callback=? avec le nom c'est juste assigné cette fonction.
Comparable JSON/ JSONP Implémentations (en supposant que la réponse de l'objet est - {"bar":"baz"}:
JSON
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
};
};
xhr.open("GET", "somewhere.php", true);
xhr.send();
JSONP:
function foo(response) {
document.getElementById("output").innerHTML = response.bar;
};
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
sje397
Points
23619
Disons que vous avez eu quelques URL qui vous a permis de données JSON comme:
{'field': 'value'}
...et vous avez eu une URL similaire sauf qu'il a utilisé JSONP, à laquelle vous avez passé le nom de fonction de rappel 'myCallback (généralement fait en lui donnant une requête paramètre 'callback', par exemple, http://example.com/dataSource?callback=myCallback). Ensuite, il serait de retour:
myCallback({'field':'value'})
...ce qui n'est pas seulement un objet, mais est en fait un code qui peut être exécuté. Si l'on définit une fonction d'ailleurs dans votre page intitulée myFunction et d'exécuter ce script, il sera appelé avec les données de l'URL.
La chose cool à ce sujet est: vous pouvez créer une balise de script et utiliser votre URL (avec callback paramètre) que l' src de l'attribut, et le navigateur va l'exécuter. Cela signifie que vous pouvez obtenir autour de la même origine " la politique de sécurité (car les navigateurs vous permettent d'exécuter des balises de script à partir de sources autres que le domaine de la page).
C'est ce que jQuery n'lorsque vous effectuez une requête ajax (à l'aide d' .ajax avec "jsonp" comme la valeur de l' dataType de la propriété). E. g.
$.ajax({
url: 'http://example.com/datasource',
dataType: 'jsonp',
success: function(data) {
// your code to handle data here
}
});
Ici, jQuery prend en charge la fonction de callback nom et le paramètre de requête - faire de l'API identiques à d'autres appels ajax. Mais contrairement à d'autres types de demandes d'ajax, comme mentionné, vous n'êtes pas restreint à l'obtention de données provenant de la même origine que votre page.
methodin
Points
3994
