Chapitre 13 – Chargement dynamique de contenu

Charger du contenu dynamiquement permet d’améliorer l’expérience utilisateur : on affiche des sections sans rechargement complet, on met à jour une zone, on charge une liste de produits, un article, des commentaires, etc. Avec jQuery, tu as plusieurs approches : load() (simple), ou un chargement AJAX + injection (plus contrôlé).

1) Pourquoi charger du contenu dynamiquement ?

Réduire les rechargements (UX plus fluide)
Mettre à jour une zone uniquement (ex : commentaire ajouté)
Charger des données “à la demande” (ex : bouton “voir plus”)
Construire une interface type SPA (simple)

2) load() : la méthode la plus simple

load() charge une page (ou un fragment) et l’injecte directement dans un élément.

$('#content').load('pages/about.html');

Charger seulement une partie d’une page

jQuery permet de charger uniquement un sélecteur d’une page distante :

$('#content').load('pages/about.html #main');

Cette technique est pratique, mais attention : tu injectes du HTML “brut” dans ta page. Si la source n’est pas fiable, tu peux introduire des failles (XSS).

3) Callback load() : savoir quand c’est terminé

$('#content').load('pages/about.html', function(responseText, status, xhr){
  if(status === 'error'){
    $('#content').text('Erreur de chargement');
    console.error(xhr.status, xhr.statusText);
    return;
  }
  console.log('Contenu chargé');
});

4) Menu dynamique : charger des “pages” dans une zone

Cas classique : tu as des liens, mais au lieu de naviguer, tu charges leur contenu dans un conteneur.

<nav>
  <a href="pages/home.html" class="nav-link">Accueil</a>
  <a href="pages/about.html" class="nav-link">À propos</a>
  <a href="pages/contact.html" class="nav-link">Contact</a>
</nav>

<div id="content"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    $('.nav-link').on('click', function(e){
      e.preventDefault();

      const url = $(this).attr('href');
      $('#content').load(url);
    });
  });
</script>

On peut ajouter une classe active au lien cliqué (Chapitre 8) et gérer l’historique (plus avancé).

5) Alternative “plus pro” : AJAX + injection contrôlée

Avec $.get() ou $.ajax(), tu peux récupérer du contenu et décider comment l’intégrer.

$.get('pages/about.html', function(html){
  $('#content').html(html);
});

Ici on injecte du HTML. Si ce HTML vient d’une source non fiable, tu dois le nettoyer côté serveur ou utiliser une approche JSON + templates.

6) Charger des données JSON et construire le DOM

Approche recommandée : le serveur renvoie des données (JSON), et tu construis le HTML côté client. Avantage : plus de contrôle et moins de risques d’injection.

$.get('data/products.json', function(products){
  let html = '';
  for(const p of products){
    html += `<div class="product">
      <h3>${p.name}</h3>
      <p>${p.price} €</p>
    </div>`;
  }
  $('#content').html(html);
}, 'json');

Pour un niveau plus “sécurité”, on peut aussi créer les éléments avec $('<div>') et utiliser text() plutôt que d’injecter une chaîne.

7) Indicateur “chargement en cours” (UX)

Quand on charge du contenu, il faut informer l’utilisateur.

function loadPage(url){
  $('#content').html('<p>Chargement...</p>');

  $('#content').load(url, function(_, status){
    if(status === 'error'){
      $('#content').text('Impossible de charger la page.');
    }
  });
}

$(function(){
  $('.nav-link').on('click', function(e){
    e.preventDefault();
    loadPage($(this).attr('href'));
  });
});

8) Sécurité : comprendre le risque XSS

XSS (Cross-Site Scripting) arrive quand on injecte du code (script) dans le HTML, via une entrée utilisateur ou une source non fiable.

Ne jamais injecter une saisie utilisateur dans html()
Préférer text() pour afficher du texte
Si tu charges du HTML, la source doit être contrôlée (ton serveur)

Si tu dois afficher un contenu “riche” (HTML) venant d’un utilisateur, il faut un nettoyage côté serveur (sanitize). Ce n’est pas un détail.

Exercice – Navigation dynamique

Créer un menu avec 3 liens (home, about, contact)
Créer 3 fichiers HTML simples dans un dossier pages/
Au clic, charger le bon fichier avec load()
Afficher “Chargement…” pendant la requête
Bonus : ajouter une classe active au lien cliqué

Indice (active)

$('.nav-link').removeClass('active');
$(this).addClass('active');

Résumé du chapitre

load() : charger et injecter du HTML très facilement
Callback : gérer succès/erreur
Approche pro : JSON + génération DOM
UX : afficher un indicateur de chargement
Sécurité : attention XSS quand on injecte du HTML