JSONP fonction de Rappel

J'étais à la recherche dans le concept de JSONP fonction de rappel. J'ai lu quelques articles concernant cela et a voulu obtenir une bonne compréhension de la notion de JSONP.

Donc, j'ai téléchargé un fichier json pour le serveur - fichier json

Et voici le code js que j'ai écrit pour récupérer les données. L'appel est effectué à partir de localhost pour l'abhishekprakash.com.

var xhr;
var dataList;
xhr = new XMLHttpRequest();

xhr.open('GET', 'http://abhishekprakash.com/script/example.json?callback=func_callbk',  true);
xhr.send();

func_callback = function(data){
    alert(data.data.people[0].id);
}

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
            console.log(dataList);
    }
};

Et c'est la réponse que j'obtiens dans la console:

JSONP fonction de Rappel

La fonction de rappel est appelée, mais elle ne contient pas les données Json.
Ce qui me manque?

Toute aide est appréciée.

Grâce

  • Qui callback est appelée? Le onreadystatechange ou la func_callback? Semble que votre réponse est JSON, pas JSONP, donc je ne vois pas comment le func_callback serait invoquée.
  • Ce service ne renvoie pas une bonne JSONP réponse. Est-il censé explicitement JSONP appels?
  • Dans l'onglet Paramètres de la console j'obtiens méthode func_callback
  • Depuis l'appel de la croix de domaine, il doit être un JSONP. C'est toi critères pour JSONP, droit?
  • Oui, JSONP est une option. Mais ce que vous êtes de retour en plaine JSON. Vous avez besoin de la réponse de format JSONP. Vous l'avez dit vous lire quelques articles...ils ont probablement expliqué que la réponse d'une requête JSONP doit être au format quelque chose comme callbackFunction(JSON);
  • Soit l'ensemble de la scro en-têtes ou de l'utilisation jsonp. Il y a un bon article sur wikipédia à propos de la même règle d'origine et vous êtes complètement l'incompréhension de la différence entre JSON et JSONP. JSON est "{\"message\":\"bonjour\"}" JSONP est callback({message:"hello world"}). JSON peuvent être récupérées avec xhr et jsonp doivent être récupérées par l'ajout d'un srcipt élément et la valeur de l'attribut src de l'url où jsonp vient de. Ensuite, dans votre code, vous devez fournir une fonction pour le rappel
  • Oui,je suis vraiment confus maintenant. 🙁

InformationsquelleAutor Abhishek Prakash | 2013-04-19
  1. 15

    Que l'exemple des retours de service JSON, pas JSONP.

    Le point de JSONP est qu'en raison Même de la Politique d'Origine des restrictions de sécurité, Javascript à partir d'Un domaine ne peut pas faire une requête GET à des ressources sur le domaine B; en d'autres termes, un script ne peut pas récupérer les données inter-domaines.

    JSONP résout ce problème en faisant de domaine B explicitement coopérer à la croix-domaine de partage de données. Le script à partir d'Un domaine spécifie le nom d'une fonction de rappel et intègre l'URL de domaine B dans le document comme s'il était notamment régulière d'un fichier Javascript externe. Le domaine B puis les sorties de données comme ceci:

    callbackFuncName({ data : foo, ... });

    Cela signifie que le domaine B explicitement les sorties d'un extrait de code Javascript qui appelle la fonction de rappel spécifié avec les données.

    Donc, à moins que le domaine B explicitement coopère dans ce, vous ne pouvez pas simplement obtenir un JSONP réponse de lui.

    • +1. Doh, lire complètement passé la partie où l'OP dit qu'ils ont téléchargé un fichier json =/
    • Donc, est-ce que je dois faire quelques ajustements dans mon domaine où le fichier json mensonges, pour faire coopérer avec le domaine qui a besoin des données?
    • Oui. Vous avez besoin d'un script côté serveur pour renvoyer les données JSON enveloppé dans la fonction de rappel spécifié. Voir Jack la réponse pour savoir comment bien faire l'appel à partir de Javascript.
    • +1 j'aime ce que vous disent clairement l'autre extrémité doit collaborer à l'envoi de données approprié de retour trop. Pas seulement une fin, il a besoin des deux.
    InformationsquelleAutor deceze
  2. 7

    Le XHR est contraint par les règles de domaine; utiliser JSONP, vous devez ajouter un élément de script:

    function func_callbk()
{
    console.log(arguments);
}

var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://abhishekprakash.com/script/example.json?callback=func_callbk';
var h = document.getElementsByTagName('script')[0];
h.parentNode.insertBefore(s, h);

    Comme l'a souligné Ian dans les commentaires, la réponse correcte de votre serveur devrait être quelque chose comme ceci:

    func_callbk('hello world')

    Mise à jour

    Si vous souhaitez faire ce travail sans JSONP (par exemple, si la réponse doit toujours être JSON), vous avez besoin de regarder dans les catégories de documents, comme expliqué dans cette réponse.

    • Et juste pour l'OP comprend, la réponse devrait ressembler à func_callbk(JSON_OBJECT);
    • Droit, a ajouté 🙂
    • Pouvez-vous ajouter l'élément script plus directement? J'ai pris l'exemple d'api github faire des démonstrations de leur jsonp et modifié un peu et il semble fonctionner. Il n'est pas nécessaire de modifier le DOM pour ajouter la balise script, droit?
    • Il n'est pas nécessaire si le script est déjà inclus dans le document.
    InformationsquelleAutor Ja͢ck