Puis-je effectuer une requête JSONP inter-domaines en JavaScript sans utiliser jQuery ou une autre bibliothèque externe? J'aimerais utiliser JavaScript lui-même, puis analyser les données et en faire un objet afin que je puisse l'utiliser. Dois-je utiliser une bibliothèque externe? Sinon, comment puis-je le faire?
javascript
jsonp
Dave
la source
la source
Réponses:
la source
foo(payload_of_json_data)
l'idée étant que lorsqu'elle est chargée dans la balise de script, elle appelle la fonction foo avec la charge utile déjà en tant qu'objet javascript et aucune analyse n'est nécessaire.Exemple léger (avec prise en charge de onSuccess et onTimeout). Vous devez transmettre le nom de rappel dans l'URL si vous en avez besoin.
Exemple d'utilisation:
Sur GitHub: https://github.com/sobstel/jsonp.js/blob/master/jsonp.js
la source
Qu'est-ce que JSONP?
La chose importante à retenir avec jsonp est qu'il ne s'agit pas réellement d'un protocole ou d'un type de données. C'est juste un moyen de charger un script à la volée et de traiter le script qui est introduit dans la page. Dans l'esprit de JSONP, cela signifie introduire un nouvel objet javascript du serveur dans l'application / script client.
Quand JSONP est-il nécessaire?
C'est une méthode permettant à un domaine d'accéder / traiter les données d'un autre dans la même page de manière asyncronale. Principalement, il est utilisé pour remplacer les restrictions CORS (Cross Origin Resource Sharing) qui se produiraient avec une requête XHR (ajax). Les chargements de scripts ne sont pas soumis aux restrictions CORS.
Comment est-il fait
L'introduction d'un nouvel objet javascript à partir du serveur peut être implémentée de plusieurs manières, mais la pratique la plus courante consiste pour le serveur à implémenter l'exécution d'une fonction de «rappel», avec l'objet requis passé. La fonction de rappel est simplement une fonction que vous avez déjà configurée sur le client et que le script que vous chargez appelle au moment où le script se charge pour traiter les données qui lui sont transmises.
Exemple:
J'ai une application qui enregistre tous les éléments dans la maison de quelqu'un. Mon application est configurée et je souhaite maintenant récupérer tous les éléments de la chambre principale.
Ma candidature est activée
app.home.com
. Les API dont j'ai besoin pour charger des données sont activéesapi.home.com
.À moins que le serveur ne soit explicitement configuré pour le permettre, je ne peux pas utiliser ajax pour charger ces données, car même les pages sur des sous-domaines séparés sont soumises aux restrictions XHR CORS.
Idéalement, configurez les choses pour autoriser x-domain XHR
Idéalement, comme l'API et l'application sont sur le même domaine, je pourrais avoir accès pour configurer les en-têtes
api.home.com
. Si je le fais, je peux ajouter unAccess-Control-Allow-Origin:
élément d'en-tête donnant accès àapp.home.com
. En supposant que l'en-tête est configuré comme suitAccess-Control-Allow-Origin: "http://app.home.com"
:, c'est beaucoup plus sûr que la configuration de JSONP. En effet, ilapp.home.com
peut obtenir tout ce dont il aapi.home.com
besoin sansapi.home.com
donner à CORS l'accès à tout Internet.La solution XHR ci-dessus n'est pas possible. Configurer JSONP Sur mon script client: J'ai configuré une fonction pour traiter la réponse du serveur lorsque j'effectue l'appel JSONP. :
Le serveur devra être configuré pour renvoyer un mini-script ressemblant à quelque chose comme
"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Il pourrait être conçu pour renvoyer une telle chaîne si quelque chose comme//api.home.com?getdata=room&room=main_bedroom
est appelé.Ensuite, le client configure une balise de script en tant que telle:
Cela charge le script et l'appelle immédiatement
window.processJSONPResponse()
comme écrit / écho / imprimé par le serveur. Les données passées en paramètre à la fonction sont maintenant stockées dans ladataFromServer
variable locale et vous pouvez en faire ce dont vous avez besoin.Nettoyer
Une fois que le client a les données, c'est à dire. immédiatement après l'ajout du script au DOM, l'élément de script peut être supprimé du DOM:
la source
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
. Après avoir ajouté des guillemets simples aux données, tout a bien fonctionné, donc:"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Je crois comprendre que vous utilisez en fait des balises de script avec JSONP, sooo ...
La première étape consiste à créer votre fonction qui gérera le JSON:
Assurez-vous que cette fonction est accessible au niveau global.
Ensuite, ajoutez un élément de script au DOM:
Le script chargera le JavaScript créé par le fournisseur d'API et l'exécutera.
la source
eval
ouparse
ou quoi que ce soit. Vous devriez obtenir du JavaScript que le navigateur peut simplement exécuter, non?la façon dont j'utilise jsonp comme ci-dessous:
puis utilisez la méthode 'jsonp' comme ceci:
référence:
JavaScript XMLHttpRequest utilisant JsonP
http://www.w3ctech.com/topic/721 (parler de la façon d'utiliser Promise)
la source
J'ai une bibliothèque javascript pure pour le faire https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js
Jetez-y un œil et faites-moi savoir si vous avez besoin d'aide pour utiliser ou comprendre le code.
Btw, vous avez un exemple d'utilisation simple ici: http://robertodecurnex.github.com/J50Npi/
la source
Exemple d'utilisation:
la source
window[callback] = null
d'autoriser le ramassage des ordures de la fonction.J'ai écrit une bibliothèque pour gérer cela, aussi simplement que possible. Pas besoin de le rendre externe, c'est juste une fonction. Contrairement à certaines autres options, ce script nettoie après lui-même et est généralisé pour faire d'autres requêtes lors de l'exécution.
https://github.com/Fresheyeball/micro-jsonp
la source
Veuillez trouver ci-dessous un
JavaScript
exemple pour passer unJSONP
appel sans JQuery:En outre, vous pouvez consulter mon
GitHub
référentiel pour référence.https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp
la source
la source
window.document.getElementsByTagName('script')[0];
et pasdocument.body.appendChild(…)
?logAPI
être défini sur unenull
fois terminé pour que le garbage collection puisse y être effectué?Si vous utilisez ES6 avec NPM, vous pouvez essayer le module de nœud "fetch-jsonp". Fetch API Fournit une prise en charge pour effectuer un appel JsonP en tant qu'appel XHR normal.
Prérequis: vous devez utiliser le
isomorphic-fetch
module node dans votre pile.la source
Je viens de coller une version ES6 de la belle réponse de Sobstel:
la source