Outils pour utilisateurs

Outils du site


cours2011:jquery_semestre_4:tp:site_en_ajax

Site en AJAX

Le but du TP est d'utiliser l'API HTML5 pour gérer l'historique (la fonction pushState() et l'événement popstate).

“Dans la vraie vie”, si vous ne développez pas un site pour mobile (c.-à-d. que vous savez sur quels navigateurs votre code va s'exécuter), je vous conseille d'utiliser une librairie pour éviter les problèmes : History.js

Il existe même une librairie JavaScript qui fait cela : jquery-pjax

Les bases

Le code HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="UTF-8">
  <title>Accueil - Site AJAX</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="javascript/site-ajax.js"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul class="menu">
    <li><a href="index.html">Accueil</a></li>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
  </ul>
  <p><script>document.write(new Date())</script>
  <div id="container">
    <div id="main">
      <h1>Accueil</h1>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</body>
</html>
  • Toutes les pages du site ont le même code.
    • Seul change le contenu de ”#main” et le titre (balise title).
    • Faire les quatre pages (index.html, page1.html, …).
  • Tester les liens (sans JavaScript).

Le code JavaScript

Difficile de faire plus simple !

Si on désire changer le titre de la page, on peut le lire depuis les données chargées :

Gestion de l'historique

Changer l'URL

Il ne reste plus qu'a changer l'adresse de la page (rappel : nouvelle api).

(À faire suite au clic, avant ou après le chargement des données)

Tester : Vous devez constater que l'URL change, mais que le contenu “ne suit pas” avec le bouton précédant du navigateur.

Réagir au changement d'URL

Il faut écouter l'événement ”popstate” pour changer le contenu quand l'utilisateur retourne à la page précédente.

Dans ce gestionnaire d'événement, il faut faire le même travail que suite à un clic : charger la page par AJAX et changer le titre. Répéter le code ou mieux, le mettre dans une fonction prenant l'URL en paramètre.

Plus loin...

Au préalable, je vous conseille de changer la méthode ”.load” par un appel à ”.ajax”. Cela vous permettra de gérer les données reçues (décider où et quand les afficher) :

Elle fait le même travail que ”.load” :

  • Charge les données en HTML.
  • Extrais la sous-partie ”#main”.
  • L'affiche dans ”#container”.

Maintenant vous pouvez :

  • Faire disparaître le contenu actuel :
$('#container').fadeOut(function () { ... });
  • Puis apparaître :
$('#container').fadeIn();
  • Mieux, charger les données simultanément avec l'animation de sortie :
    • jQuery.when” permets d'attendre que les deux “promise(s)” soit “finie”
    • Les arguments passés au “callback” de ”done” donne un tableau, d'ou le ”argsAJAX[0]” pour accéder au données.


Pour les bons :

  • Ajouter une image durant le chargement (en fait c'est simple !).
  • Afficher ensemble le contenu ancien et nouveau, pour les animer ensemble.
  • Animer avec des transformations CSS3.
    • Avec une animation différente pour chaque page, pour faire comme le TD.
cours2011/jquery_semestre_4/tp/site_en_ajax.txt · Dernière modification: 2012/03/10 23:00 (modification externe)