Javascript Girl
  1. Javascript Girl
  3. Fonction rappel JSONP
Intereting Posts
Détecter les décimales dans javascript PHP + JS: Comment faire des téléchargements de fichiers en format HTML en tant que type de contenu Multipart (via JS)? Chemins de référence JavaScript / CSS / Image Qu'est-ce que je dois échapper à mon HTML (réponse JSON) JavaScript crée des styles "Télécharger" au lieu de "ouvrir" un fichier texte Les guillemets doubles dans php script echo Comportement par défaut si aucune autre fonction n'est enchaînée à une promesse Pourquoi Array.push.apply ne fonctionne-t-il pas? Maçonnerie avec AngularJS Tirage divisé une fois en javascript? Ne peut pas accéder à la caméra arrière sur webrtc Comment planifier un travail avec kue sur parse-server? L'utilisation du fichier index.ts pour exporter la classe provoque un indéfini dans un constructeur injecté JQGrid – Modifier l'ordre des colonnes

Fonction rappel JSONP

Je regardais le concept de la fonction de rappel JSONP. J'ai lu quelques articles à ce sujet et je voulais avoir une bonne compréhension du concept de JSONP.

Donc, j'ai téléchargé un fichier json sur 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 à 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 je reçois dans la console:

Instantané de la console

La fonction de rappel est appelée mais elle ne contient pas les données Json. Qu'est-ce qui me manque?

Toute aide est appréciée.

Merci

Ce service exemple renvoie JSON, pas JSONP.

Le point de JSONP est que, en raison des restrictions de sécurité de la même politique d'origine, Javascript du domaine A ne peut pas faire une demande GET aux ressources sur le domaine B; En d'autres termes, un script ne peut pas récupérer les données dans un domaine interdisciplinaire.

JSONP résout ceci en faisant en sorte que le domaine B coopère explicitement dans le partage de données entre domaines. Le script du domaine A spécifie le nom d'une fonction de rappel et intègre l'URL du domaine B dans le document comme s'il s'agissait d'un fichier Javascript externe régulier. Le domaine B produit des données comme ceci: 

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

Cela signifie que le domaine B génère explicitement un extrait de Javascript qui appelle la fonction de rappel rappelée avec les données.

Donc, à moins que le domaine B ne coopère explicitement, vous ne pouvez pas simplement en obtenir une réponse JSONP.

Le XHR est contraint par des règles de domaine multiples; Pour 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 bonne réponse de votre serveur devrait être comme ceci: 

 func_callbk('hello world')

Mettre à jour

Si vous souhaitez que cela fonctionne sans JSONP (par exemple, si la réponse doit toujours être JSON), vous devez consulter CORS comme expliqué dans cette réponse .