Faire des requêtes JSONP à partir de JavaScript sans bibliothèques externes

Pour les requêtes JSONP inter-domaines en JavaScript, les bibliothèques externes comme jQuery ne sont pas toujours nécessaires. Voici un guide pour y parvenir en utilisant du JavaScript pur :

Étape 1 : Créer une fonction de rappel

Commencez par définir une fonction de rappel pour recevoir et traiter la réponse JSONP. Dans l'exemple fourni, la fonction foo effectue cette tâche :

function foo(data) {
  // Do something with the JSON response here
}

Étape 2 : Créer dynamiquement un élément de script

Ensuite, créez un élément

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo';

Étape 3 : Ajouter l'élément de script au DOM

Une fois l'élément

document.getElementsByTagName('head')[0].appendChild(script);

Pour les navigateurs modernes, vous pouvez simplifier cette ligne pour :

document.head.appendChild(script);

Exemple

En réunissant ces étapes, voici un exemple complet de création d'une requête JSONP en JavaScript sans bibliothèque externe :

function foo(data) {
  // Do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.head.appendChild(script);