De l'AJAX non intrusif avec PyJS

Quand on passe un site web en ajax, on doit faire face à au moins deux problèmes par rapport à un site normal. Tout d'abord, si les liens n'existent pas vraiment, c'est a dire au sens WEB1.0, le référencement ne sera pas optimal, et même si les moteurs de recherche analysent de plus en plus notre Javascript, il vaut mieux montrer à ces moteurs la page la plus simple à analyser. Le deuxième problème de taille, c'est l'éternel back button, auquel un prochain article sera dédié.

Voyons donc le cas de base. En général, il consite a récupérer un fragment de HTML et à l'integrer dans un div. Cette manipulation se fait en général de façon très simple avec la plupart des librairies AJAX. Avec PyJS, on écrirait quelquechose comme ça :

py.importModule("py.defer.xhr");

var d = py.defer.xhrGet({
    url: 'mon_fragment_de_page.html',
    prevent_cache: false,
    onLoad: function (res) {
        $('mainbox').attr('content', res);
    },
    onError: function (res) {
        $('mainbox').attr('content', '<p>Error while loading content</p>' + res);
    }
});

Ce bout de code, est particulièrement adapté à finir ses jours dans une fonction afin de rendre le tout plus flexible par exemple :

py.importModule('py.defer.xhr');

function ajaxLoad(url, id) {
    var el = $(id);
    if (py.isNone(el)) {
        return ;
    }
    el.attr('content', 'Loading...');
    return (py.defer.xhrGet({
        url: url,
        prevent_cache: false,
        onLoad: function(res) {
            el.attr('content', res);
        },
        onError: function(res) {
           el.attr('content', '<p>Error while loading content from '+url+'</p>');
        }
   }));
}

Maintenant, il ne reste plus qu'a faire en sorte qu'un clic sur un lien ou un bouton appelle cette fonction avec les bons paramètres. Imaginons un bête lien de ce style :

<a href="mapage.html"> Ma Page </a>

Il faut faire en sorte que ce lien ne soit pas suivi lors d'un clic, mais plutôt qu'il déclenche l'appel de la fonction en question. L'idée est d'automatiser au maximum, et comme il est fréquent qu'il y ait plus qu'un seul lien... Par exemple, tout les liens du menu de gauche qui rafraîchissent le div central est un cas usuel. Il y a plein de manière de procéder, comme ajouter un attribut spécial sur les balises a, mais nous allons essayer de rester conforme w3c :).
Voici le type de liens que nous allons parser:

<a class="ajax-main" href="mapage.html"> Ma Page </a>

Le côté sympa, c'est que sur un navigateur qui ne supporte pas le javascript ce lien fonctionne, et les robots des navigateurs n'auront aucun mal à suivre ce lien. Pour nous, il nous suffit de parser le DOM lorsqu'il est prêt pour ajaxifier ces liens.

py.importModule("py.parser.html");
py.addOnLoad(function () {
var parser = new py.parser.HTMLParser();
parser.addHandler(new py.parser.HTMLElementHandler({
  tag: 'a',
  classes: ['ajax-main'],
  onMatch: function(el) {
    var href = el.attr("href");
    el.attr("href", "#" + href);
    el.connect("click", function(){ ajaxLoad(href); });
  }
}));
parser.parse(py.body);
});

Et voilà ! Il est aussi possible de rappeler le parser quand la requête AJAX est terminée, et ça permet de mettre des liens à l'interieur du contenu central :)
Prochainement la gestion du backbutton !