Créer un plugin jQuery pour faire du cross-domain

05 Février 2010

Pour la création de ma page personnelle, j’ai eu la volonté de centraliser mes différents réseaux sur internet. Ne voulant pas faire le traitement du coté serveur avec du PHP, j’ai eu recours à du javascript pour rapatrier les données externes sur mon site. Cet article va vous expliquez comment utiliser une API distante pour afficher du données externes sur votre site.

Pour cet exemple, on va utiliser l’API de Delicious pour écrire un petit plugin jQuery qui rapatriera le contenu de mon compte Delicious ZenZen77. La seule contrainte de ce petit plugin est qu’il ne pourra récupérer que des données au format JSON. Dans la documentation de Delicious j’ai récupéré l’URL qui permet d’accéder à mon flux de bookmarks en JSON. Pour plus d’info sur la signification du JSON généré, je vous conseille de bien regarder la documentation mentionnée.

Pour rapatrier les données, il suffit de faire une simple requête Ajax :

  url: 'http://feeds.delicious.com/v2/json/zenzen77',
  dataType:'jsonp',
  jsonpCallback:'jsonpCallBack'
});```

Contrairement à ce que l'on pourrait imaginer, aucune requête Ajax est effectuée. Au lieu de cela, jQuery va ajouter une balise <code>script</code> dans la balise <code>head</code> de votre page Web avec une URL basée sur celle qui a été définie.
L'URL utilisé pour la balise <code>script</code> est différente de celle que j'ai saisi dans le code, car jQuery comprend que lorsque l'on défini le <code>dataType</code> avec <code>jsonp</code>, il faut qu'il ajoute un paramètre callback à l'URL saisie qui sera interprété par le serveur.

Le paramètre callback défini donc une fonction qui sera executée lorsque le JSON sera rapatrié et elle aura pour  rôle de parser le JSON envoyé par l'API et de l'afficher dans la page HTML. Voici le code de cette fonction simpliste qui va uniquement afficher la liste des bookmarks avec le nom du bookmark ainsi que l'URL associée.

``` javascript  $.fn.myDelicious.parse = function(json){
    var displayNb = json.length;
    var html ='<ul>';
    for(var i=0; i&lt; displayNb; i++){
      html +='<li><a href="'+ json[i].u+'">'+ json[i].d + '</a></li>';
    }
    html += '</ul>';
    id.find('img').fadeOut("fast", function(){
    id.append(html);
  });```

Voila, le comportement générique du plugin est codé, il ne reste plus qu'à mettre tout ce code dans un plugin qui pourra être réutiliser sur un autre site par exemple, voici le code du plugin :

``` javascript(function($){
  var id;

  $.fn.myDelicious = function(){
    id = $(this);
    // Requete Ajax
    $.ajax({
      url: 'http://feeds.delicious.com/v2/json/zenzen77',
      dataType:'jsonp',
      jsonpCallback:'$.fn.myDelicious.parse'
    });
  };

  $.fn.myDelicious.parse = function(json){
    var displayNb = json.length;
    var html ="<ul>";
    for(var i=0; i&lt; displayNb; i++){
      html +='<li><a href="'+ json[i].u+'">'+ json[i].d + '</a></li>';
    }
    html += '</ul>';
    id.find('img').fadeOut("fast", function(){
      id.append(html);
    });
  };
})(jQuery);```

Il suffit ensuite de faire un petit peu de HTML :

``` html
<h2>Démo du plugin myDelicious - 1</h2>
<div id="content">
  <img src="https://static.johanbleuzen.fr/demo/loading.gif" alt="Chargement en cours..." />
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="./jquery.myDelicious-1.js"></script>
<script type="text/javascript">
  $('#content').myDelicious();
</script>

Voila, c’est terminé, c’est très basique, mais cela fonctionne très bien ! C’est adaptable avec d’autres services : Twitter, Tumblr,… Un petit inconvénient néanmoins à cette solution, il n’est pas possible d’avoir plusieurs appels à ce plugin sur une seule page, j’ai essayé de comprendre comment faire des variables d’instances avec jQuery, mais mes tentatives se sont avérées vaines, si jamais vous avez une solution à me proposer, je suis plus que preneur.

Si vous avez des questions ou des commentaires à ajouter sur ce petit bout de code, je suis à votre disposition dans les commentaires. Par la suite, j’expliquerai comment rendre le plugin plus flexible e y ajoutant des fonctionnalités et des options.

Charger les commentaires…