Le format JSON, AJAX et jQuery Une requête inter-domaine à l'aide de JSONP

 

Une requête inter-domaine avec une fonction JavaScript de callback 



Grâce à une déclinaison nommée JSONP (JSON with padding), une requête inter-domaine est possible par l'utilisation d'une fonction JavaScript de callback (que l'on nomme donc padding mais qui n'a rien à voir avec l'équivalent en CSS). Celle-ci est renvoyée par le serveur au client, qui l'exécute au retour, autorisant ce même client à charger des données JSON depuis un domaine externe, et donc à notifier l'objet appelant avec cette fonction de callback.  

 

JSON/JSONP est proposé par de nombreux services en ligne, telles que l'API Flickr.

JSON/JSONP est proposé de la sorte par de nombreux services en ligne, telles que l'API Flickr.

La première étape est d'encapsuler les données - ici des statistiques - dans une fonction de callback, dont on choisit le nom, par exemple jsoncallback().
 

jsoncallback({demandes: 6490, offres: 16804, membres:32908, 
posts:364558, docs:864});

 


Cette chaîne de texte sera retournée par une URL en HTTP, par exemple :

http://www.mondomaine.com/statistiques.php?jsoncallback=?

 

Par convention, on se sert du dernier argument de l'URL pour placer le nom de la fonction de retour. jQuery saura remplacer le point d'interrogation final par cette fonction de callback à exécuter côté client. On utilise pour cela $.getJSON() dès que la page est chargée, qui est une variante des fonctions AJAX de base proposées par jQuery.

Il suffit sur la page destinée à recevoir les informations d'implémenter le tout et de traiter les données reçues. Dans le cas présent, on "remplit" des éléments span en se basant sur leurs identifiants, grâce à la fonction text() de jQuery. L'objet data passé en argument à la fonction de callback jsoncallback reçoit les données si l'appel se déroule avec succès.

 

<p>Nous avons <span id="annonces"></span> annonces
 d'emploi et <span id="docs"></span> documents en 
ligne.</p>
<p>Sur le forum, <span 
id="membres"></span> membres ont écrit <span 
id="posts"></span> messages.</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
function jsoncallback(data){
 $("#annonces").text(data.offres+data.demandes);
 $("#posts").text(data.posts);
 $("#membres").text(data.membres);
 $("#docs").text(data.docs);
}
$(document).ready(function() {
 $.getJSON("http://www.mondomaine.com/statistiques.php?jsoncallback=?");
});
</script>

 

 

Au lieu d'utiliser jQuery, exploiter de façon "naïve" la balise <script>


 

Sans avoir besoin d'utiliser absolument jQuery, on peut aussi exploiter de façon "naïve" la balise <script> qui est autorisée à effectuer des requêtes sur d'autres domaines. Dans l'exemple ci-dessous on affiche une des statistiques avec la fonction alert() de JavaScript.
 

 <script>
function jsoncallback(data) {
 alert("Il y a "+data.membres+" membres");
}
</script>
<script src="http://www.mondomaine.com/statistiques.php"></script>

 

Note : l'attribut type="text/javascript" sur la balise script est ici omis dans le cas de HTML5 mais recommandé pour les versions précédentes.

Précédent
Suivant