Rafraîchir sur clic uniquement le contenu d'un div précis

Bien le bonjour à tous,

Nouveau sur le forum, mais lecteur depuis un moment ^^
Je viens reposer une question qui a été déjà posée j'imagine des dizaines de fois mais à chaque fois à des dates différentes, plus ou moins anciennes, les techs web évoluant sans cesse je viens demander l'actualité récente quant à ce problème.

Je cherche donc une solution pour, lorsque l'utilisateur clique par exemple sur un lien du menu, cela ne rafraîchisse QU'UN certain <div> précis, sans avoir à recharger la page ou à actualiser.

Mais je voudrais aussi savoir quel moyen de le faire respecte le plus le référencement, par exemple lequel induit le plus petit temps de chargement.

Et question somme toute bête, existe-t'il un moyen de faire cela, en changeant l'url également, de façon à ne pas se retrouver pendant toute la navigation sur le site avec "index.php" ?

Merci d'avance à tous!
Modifié par ZeroAttract (01 Jun 2010 - 13:36)

(Un peu à la manière d'Alsacréations avec son div "global" ^^)

ZeroAttract a écrit :
Je cherche donc une solution pour, lorsque l'utilisateur clique par exemple sur un lien du menu, cela ne rafraîchisse QU'UN certain <div> précis, sans avoir à recharger la page ou à actualiser.

La technique classique est la suivante:
- chaque page du site a un contenu HTML complet, avec élément HEAD, en-tête, éléments de navigation, pied de page, etc., en plus du contenu propre à la page;
- les liens de navigation permettent de passer d'une page à l'autre (lien hypertexte en HTML, technologie qui date de 1991 et qui marche toujours très bien ).

C'est ainsi que fonctionne la navigation sur Alsacréations et sur la très grande majorité des sites web.

Bien entendu, rien ne t'oblige à dupliquer les portions de HTML communes. Tu peux générer ton code HTML côté serveur, en utilisant un langage de programmation tel que PHP. Voir notamment:
http://www.alsacreations.com/tuto/lire/579-Inclure-un-fichier-dans-un-autre-grace-a-PHP.html

La principale technique alternative consiste à utiliser JavaScript pour faire une requête HTTP sans recharger la page. Tu peux faire la requête vers un script qui va te retourner uniquement le contenu visé (il faut coder le script en question, bien sûr), et quand le navigateur reçoit ce contenu tu exécutes une fonction JavaScript pour remplacer le contenu de la page en cours avec le nouveau contenu. Cette technique peut être intéressante dans certains cas, mais pour une navigation classique elle pose de nombreux problèmes:
- d'accessibilité;
- de référencement;
- et enfin l'URL de la page ne change pas...

Réponse à un MP pour éclaircir tout ça:


Hello,

Prends deux chaises identiques mis à part la couleur: une rouge et une bleue.
Tu as devant toi la chaise rouge. Tu la remplaces par la chaise bleue. Est-ce que tu as changé la chaise, ou juste la couleur?

Pour deux pages web d'un même site c'est pareil. Même si la différence entre deux pages c'est juste le contenu et un ou deux bouts de code, chaque page reste une page complète avec en-tête, navigation, pied de page, etc.

Schématiquement, ma page A peut être:

AAAA
BBBB
XXXX
CCCC

et ma page B peut être:

AAAA
BBBB
YYYY
CCCC

Quand je passe de la page A à la page B, je supprime tout le contenu de la page A de la fenêtre du navigateur, et je le remplace par le contenu de la page B. C'est le fait que les deux pages partagent un même contenu (la même structure HTML de base, les mêmes éléments de navigation, les mêmes styles CSS et scripts JS) qui donne l'impression que l'on change uniquement le contenu.

Si j'ai bien compris, le navigateur, en voyant qu'il n'y à que le div "global" sur le site alsacreation qui change par rapport aux autre pages en cache, il ré affiche quasi-instantanément tout ce qui n'est pas div global, c'est bien cela ?

Non. Le navigateur charge une nouvelle page, mais comme cette page est construite comme la précédente et utilise les mêmes fichiers externes que la précédente (images, CSS, JS) et que ces fichiers sont mis, normalement, en cache, le navigateur n'a pas besoin de les télécharger de nouveau (ils se trouvent sur l'ordinateur du visiteur) ce qui fait que la seconde page est chargée plus vite.

Okich! Bhaaa merci beaucoup de votre aide à tous les deux!