JSONP pour récupérer des données distantes

Avec l'ère du web 2.0 (au nom absurde), vous utilisez certainement déjà le JSON dans votre programmation. Mais avez-vous déjà entendu parler de JSONP ? Il s'agit d'un moyen de communiquer de l'information entre deux domaines à l'aide d'un tour de passe-passe.

Tout ça pour contourner la restriction au niveau des fureteurs où un script peut uniquement faire un appel Ajax sur une page du même serveur... Sauf à partir d'une balise script qui elle peut inclure un script externe (un peu comme quand vous incluez des scripts hébergés directement sur les serveurs de Google ou Yahoo! YUI).

JSONP est un genre de mécanisme qui permet de prendre sa source de données JSON sur un site externe et de faire directement appel à la fonction callback que vous avez spécifié en paramètre. En fait, JSONP signifie "JSON with padding" dans le sens que le serveur appellé s'occupera d'ajouter comme préfixe le nom de votre fonction JavaScript et qu'il lui passera en paramètre les données qu'il souhaite vous retourner.

Imaginez l'inclusion du script externe sur votre site :

<script src="http://www.site.com/json-source.php?callback=initWebsite"></script>

Le serveur distant, disposé à prendre en charge le retour de l'information avec JSONP, traite la requête :

<?php
// très simplifié pour l'exemple
$data = array(
   'title' => 'code 18',
   'url' => 'http://code18.blogspot.com'
);

echo $_GET['callback'] . '(' . json_encode($data) . ');';

En sortie, le résultat de ce script sera :

initWebsite({"title":"code 18","url":"http:\/\/code18.blogspot.com"});

En revanche, votre page web devra posséder une fonction du nom de initWebsite qui pourra mâcher l'information et en faire ce que vous désirez.

function initWebsite(info){
   console.log(info.title);
   console.log(info.url);
}

Voici quelques exemples de services qui permettent la récupération de données avec JSONP.

• Twitter (récupérer les statuts)
  
• Digg
  
• GeoNames (cliquez sur le lien pour voir la requête. Je demande de l'information sur le code postal H1V3N7 situé au Canada)
  
  Exemple de réponse :
  
  callbackFunction(
  {"postalcodes":[{"postalcode":"H1V","adminCode1":"QC","countryCode":"CA","lng":-73.55103,
  "placeName":"Maisonneuve","lat":45.570163,"adminName1":"Quebec"}]}
  );

Quelques points à noter :

• jQuery possède le nécessaire pour travailler avec JSONP
• Ne pas utiliser avec des données sensibles
• Faire attention à la sécurité car ça peut être vulnérable aux attaques CSRF ou XSRF