Navigation AJAX

Ce plugin permet de modifier automatiquement une parties des liens internes de manière à ce qu’ils ne déclenchent pas un chargement complet de la page cible, mais un chargement en AJAX de certains éléments spécifiés à l’avance.

Il permet aussi de spécifier des éléments qui ne seront rechargés qu’en cas de changement de langue.

En clair, imaginons que nous sommes sur la page de sommaire de votre site, et qu’on clique sur un lien vers l’article no123. Le navigateur recharge alors la page en entier, y compris des éléments qui restent identiques, comme le pied de page ou l’en-tête. Avec “Navigation AJAX”, vous pouvez définir que la seule partie à recharger est l’intérieur de la balise div qui a l’id “contenu”. Le click sur le lien provoque alors un chargement AJAX de cette balise.

Le problème avec ce genre d’approche est que lorsqu’on charge la page de cette façon, l’URL de la barre d’adresse ne change pas. Dans notre exemple, l’utilisateur qui veut partager un lien vers l’article no123 enverra alors ses amis vers votre page de sommaire. Ce plugin règle ce problème en utilisant l’API History fournie par les navigateurs HTML5. Pour les utilisateurs dont le navigateur ne supporte pas cette API, on a le choix entre ne pas utiliser de chargements AJAX et utiliser une astuce avec des hashes (#) dans l’url comme le font des sites comme twitter par exemple.

Utiliser ce plugin a plusieurs avantages :

  • Comme la page n’est jamais complètement rechargée par le navigateur, la navigation est plus fluide et réactive.
  • Cela permet de réduire considérablement la quantité de données échangées entre votre serveur et l’utilisateur, ce qui accélère notablement le chargement des pages et économise la bande passante.
  • Pour certaine utilisations particulières, comme par exemple un site de radio, cela permet un plus grand confort d’utilisation. On peut s’arranger pour ne jamais recharger la liste de lecture et les visiteurs peuvent alors changer de page sans interrompre la musique.

Il semblerait qu’une fonctionnalité similaire sera disponible nativement dans SPIP3, mais en attendant, plus rien ne vous empêche de profiter des avantages de cette approche !

Configuration

Pour fonctionner, ce plugin doit être correctement configuré. La page de configuration est accessible depuis la page des plugins, qui nous amène au formulaire de configuration :

  • Les types de page : Ce réglage permet de spécifier les types de liens qui seront traités. Le réglage dans la capture d’écran ci-dessus signifie que tous les liens vers le sommaire, vers un article ou vers une rubrique seront chargés en AJAX. Par contre, les liens vers une page de mot-clé ou vers la page de login seront laissé intacts et fonctionneront comme d’habitude.
  • Les ids des divs à charger en AJAX : Le réglage de la capture d’écran signifie que les divs ayant comme id “contenu” et “spip-admin” seront rechargés en AJAX. Vous devriez toujours laisser “spip-admin” dans ce champ, puisqu’il s’agit des boutons affichant les statistiques et le bouton “recalculer” qui s’affichent lorsqu’un contributeur du site est connecté.
  • Les ids des divs à recharger en cas de changement de langue : Ce réglage est utile pour les sites multilingues. Pour que ceci fonctionne correctement, il est impératif de placer un attribut lang à la balise html.
  • Activer les urls hash : Activez cette option si vous voulez que vos visiteurs qui utilisent des vieux navigateurs profitent aussi de la navigation AJAX. Ce choix ne devrait pas être pris à la légère, puisqu’il induit des problèmes. Par exemple, si un de vos visiteurs sur IE7 transmet un lien à quelqu’un qui a bloqué le Javascript, le lien ne l’enverra pas sur la bonne page. N’activez cette fonction que si le fonctionnement de votre site dépend fortement de la navigation AJAX, et que vous jugez que les inconvénients en valent la peine. Pour plus d’infos sur les problèmes crées en cochant cette option sur cette page (page en anglais).
  • Remplacer les divs automatiquement : Si cette option est désactivée, les divs ne seront rechargées que lors d’événements javascript que vous devrez vous-même déclencher (voir plus bas).

Effets pré- et post-chargement

Si vous souhaitez utiliser des effets Javascript pour animer les chargements AJAX, vous pouvez vous appuyer sur les événements “onAjaxNavReq”, “onAjaxNavLoad” et “onAjaxNavLocalisedLoad”, qui sont déclenchés respectivement avant un chargement, après un chargement normal et après un chargement avec changement de langue. Ces événements sont déclenchés par chacun des éléments concernés, ce qui vous permet d’assigner des effets différents à chaque élément.

Par exemple, si vous voulez un effet de fondu sur la balise avec id “contenu” lors d’un chargement, vous pouvez utiliser le code Javascript suivant :

$('#contenu').bind('onAjaxNavReq',function () {
 $('#contenu').animate({opacity: 0}, 'fast');
});
$('#contenu').bind('onAjaxNavLoad',function (){
 $('#contenu').animate({opacity: 1}, 'fast');
});

Ou alors, si votre menu est rechargé en cas de changement de langue, et qu’il a des effets Javascript que vous avez groupés dans une fonction appelée “attachMenuFx”, chaque changement de langue va abimer vos beaux effets. Dans ce cas utilisez le code suivant :

  1. $('#menu').bind('onAjaxNavLocalisedLoad', attachMenuFx);

Chargement contrôlé

Si vous utilisez des effets de transition entre les pages, il se peut que l’effet de la page sortante ne soit pas tout à fait terminé avant que celle-ci ne soit remplacée par la page entrante. La transition n’est alors pas très fluide, et cela peut être très dérangeant suivant l’effet utilisé. Pour remédier à ce problème, il est possible de contrôler soi-même le remplacement de la page en déclenchant l’événement javascript “ajaxNavReady”. Pour ceci il faut désactiver l’option “remplacer les divs automatiquement”. Vous pouvez ensuite utiliser un code du genre :

$('#contenu').bind('onAjaxNavReq',function () {
 $('#contenu').animate(
  {opacity: 0},
  {
   duration : 'fast',
   complete: function () {
    $(this).trigger('ajaxNavReady');
   }
 });
});
$('#contenu').bind('onAjaxNavLoad',function (){
 $('#contenu').animate({opacity: 1}, 'fast');
});

Si vous avez des divs qui ne sont pas animées, vous pouvez utiliser le code suivant pour déclencher leur remplacement :

$('#maDiv').bind('onAjaxNavReq'), function () {
 $(this).trigger('ajaxNavReady');
});

Portfolio

Ce plugin fait une utilisation intensive de la librairie History.js, un grand merci à son auteur! J’ai aussi utilisé la librairie Javascript Modernizr et la librairie phpQuery. Ces librairies sont inclues dans le plugin, donc pas besoin de vous en soucier.
Et évidement merci à toute la communauté SPIP pour ce fabuleux logiciel et sa multitude de contributions!

Note pour SPIP3

Une grande part de ces fonctionnalités sont intégrées dans SPIP3 de manière native, avec le critère {ajax } notamment :
-  voir la documentation sur spip.net
-  voir http://programmer.spip.org/-Ajax-
-  voir la discussion Charger une div externe en ajax et notamment la réponse

updated on 2 October 2019

Discussion

15 discussions

  • 1

    Bonjour,

    je teste actuellement le plugin et j’ai un petit soucis. Je ne suis pas un pro du Dev et donc je ne comprends pas ou il faut insérer le code pour les animations Effets pré- et post-chargement.

    D’avance merci pour votre aide.

    • Bonjour,

      Le code complet serait plutôt :

      <script type='text/javascript'>
      $(document).ready(function ()  {
        $('#contenu').bind('onAjaxNavReq', function () {
          $('#contenu').animate({opacity: 0}, 'fast');
        });
        $('#contenu').bind('onAjaxNavLoad', function () {
          $('#contenu').animate({opacity: 1}, 'fast');
        });
      });
      </script>

      En théorie vous pouvez mettre ceci n’importe où dans la page, mais l’usage veut qu’on le mette soit dans la balise “head,” soit tout à la fin de la page, après la balise “body”.
      Il y avait une erreur dans le code que j’ai donné dans l’article, peut-être que vos problèmes venaient de là…

    Reply to this message

    • Ce plugin ne pose absolument aucun problème de référencement. En effet, pour un utilisateur qui a désactivé javascript (et donc pour les robots des moteurs de recherche), le site s’affiche comme avant que l’on ait activé la navigation ajax. Le plugin est juste un plus pour les utilisateurs qui ont activé javascript et dont le navigateur supporte le html5. À moins d’activer l’option “activer les urls hash pour les vieux navigateurs”, aucune url n’est jamais altérée. C’est là tout l’intérêt de l’API History.

    Reply to this message

  • 1

    J’avais trouvé une solution intéressante aussi qui pourrait être implémenté.
    Utilisant aussi history api.
    http://lea.verou.me/2011/05/change-url-hash-without-page-jump/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+leaverou+%28Lea+Verou%29

    • Ce que tu propose est une version très simplifiée de ce que fait l’option “activer les urls hash pour les vieux navigateurs”. Cette implémentation simple fonctionnera mal avec les anciennes versions de ce bon vieux Internet Explorer ;-)

    Reply to this message

  • 1

    Merci pour ce plugin.
    ça fait plaisir de voir un peu de forward dans SPIP :).
    Par contre, peut on se passer de Modernizr s’il est déjà chargé ?

    • C’est une très bonne question, je n’avais pas pensé à ce cas de figure. Même si l’économie de bande-passante est dérisoire (la libraire pèse 8k), c’est important parce que la version de Modernizr utilisée dans ce plugin est un “build” qui ne contient que le test pour la fonctionnalité History. Si la version du plugin prend le pas sur celle que tu utilises, cela risque de casser les tests que tu as mis en place…
      Je vais inclure une option pour désactiver cette libraire, ainsi que la libraire History.js. En attendant, tu peux remplacer la ligne 22 du fichier “ajax_nav_insert_head.php” par :

      $flux = "

    Reply to this message

  • Pour information, dans SPIP3, l’History API est intégrée est prise en charge nativement sur tous les liens ajax. Tu peux le voir sur toutes les paginations ajax de SPIP-Contrib par exemple.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom