J'ai fait ça rapidement en utilisant notamment grâce à jQuery. Comme la méthode utilisée peut servir à d'autres, je vais vous décrire étape par étape comment j'ai procédé.
Le site sur lequel j'ai réalisé ça était très petit est très simple : Amandine Café. Mais rien de mieux que de s'exercer sur un petit exemple pour ensuite l'appliquer à des projets plus conséquents.
L'étude du site actuel
La première chose à faire est de naviguer sur le site de fond en comble pour en déduire les zones fixes et les zones à recharger. Il faudra identifier quels liens vont recharger quelles zones, et tout ce que cela va engendrer au niveau de la page qui ne sera pas rechargé comme elle l'ai actuellement. On pense ici aux éventuels contrôles javascript qui peuvent ne pas fonctionner correctement. Il faut les noter pour les corriger au dernier moment.Le tour du propriétaire s'est fait très vite pour moi puisque le site n'intègre pas de sous navigations et ne contient que 5 pages. On peut identifier 3 zones délimiter par des div avec les identifiants header, page et footer. Seule la div#page change selon les pages. C'est donc uniquement ce contenu que nous allons recharger en Ajax.
La préparation du côté PHP
Avant de s'attaquer au javascript, nous allons modifier les fichiers PHP de nos pages. Lors du chargement Ajax de nos pages, nous n'allons pas recharger la page complète, mais uniquement le contenu à modifier. Et pour plus de simplicité et de flexibilité du site, nous allons utiliser les mêmes URL que les liens réels. Il faut donc être capable du côté de PHP de n'afficher que le contenu demandé, sans les parties head de la page, ou les div fixes. Si vous ne pouvez –voulez– pas réaliser ceci, regarder du côté du petit bonus un peu plus bas...Le plus simple pour réaliser ceci est de mettre les parties fixes dans des fichiers séparés, nommés au hasard header.php et footer.php. Ces fichiers sont inclus dans toutes les pages; ce qui est d'aileurs peut-être déjà le cas, grâce à include. Il va donc s'agir de n'afficher ses parties que lorsqu'on est pas dans une requête Ajax. Rien de plus simple, nous allons écrire une fonction PHP isAjax. L'inclusion des fichiers header.php et footer.php se fera donc à la seule condition que isAjax est faux. Autrement dit:
if (!isAjax())
inlcude('header.php');
La fonction isAjax est, comme vous allez le voir, très très compliqué :
function isAjax() {En effet, jQuery –Prototype aussi, je ne sais pas pour les autres– ajoute un élément HTTP_X_REQUESTED_WITH dans la requête que l'on peut récupérer avec la variable globale $_SERVER.
return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}
Nous en avons donc terminé avec la préparation des pages PHP, qui vont être capable de fournir des versions light des pages spécialement pour les requêtes Ajax.
L'installation du Javascript
Nous en arrivons donc à la programmation véritable des requêtes Ajax. Pour garder un site totalement accessible, qui fonctionnera exactement de la même façon sans Javascript, nous n'allons en aucun cas modifier les sources HTML des pages actuelles. Nous allons plutôt inclure jQuery dans toues les pages, et un autre fichier javascript contenant le code qui va arriver.Le schéma du script sera le suivant :
- Au chargement de la page, intercepter tous les liens qui pointent vers des pages .php
- A ces liens, leur appliquer une fonction sur le click pour procéder à la requête Ajax plutôt qu'au changement de page
- Lors du click, appelez en Ajax la page demandée (avec la même url) et intégrer le résultat là où on le désire.
- Arrêter la propagation du click
$(function() {Très court, n'est-ce pas ?
$('a[href*=.php]').click(function() {
$('#page').load(this.href);
return false;
});
});
Bien sûr, cet exemple ne fonctionnera pas dans tous les cas. Dans mon cas par exemple, je dois modifier l'identifiant du body en fonction de la page demandée pour changer le lien en marron du menu. Pour ce faire, on peut utiliser le 3ème paramètre de la fonction load qui sera appelé une fois le chargement ajax terminé. Voilà à quoi ressemble ma fonction :
$(function() {Bon dans la réalité, ce n'est pas du tout ça, mais c'est car vraiment spécifique au site.
$('a[href*=.php]').click(function() {
$('#page').load(this.href, null, function() {
$('body').attr('id', this.href.substring(this.href.indexOf('.')));
});
return false;
});
});
Petit Bonus
Si vous ne pouvez –voulez– pas mettre en place le découpage du fichier spécifique en PHP pour les reqêtes Ajax, ne jetez pas l'éponge tout de suite ! Il serait tout d'abord possible de mettre à jour la page complète, mais cela ne serait pas très propre et engendrai sûrement beaucoup d'autres problèmes.Mais jQuery est là pour nous aidé. En effet, dans l'URL de la fonction load, il est possible de spécifier un sélecteur HTML pour filtrer le résultat et ainsi n'afficher que ce qui nous intéresse.
Dans mon exemple, l'appel à la fonction load deviendrait simplement :
$('#page').load(this.href+' #page');
Je ne vous conseille pas cette technique, puisque cela veut dire que vous allez recharger la page complète, donc on perd un peu l'utilité de l'Ajax qui est de réduire les transferts de données entre le client et le serveur.
Et si c'est plus compliqué ?
A vous de faire preuve d'imagination !Comme j'ai déjà beaucoup réfléchi à la question, je vous donnerai plusieurs pistes d'ici une semaine au deux. Ce billet est déjà bien conséquent et vous pouvez déjà vous amuser. Enfin, j'espère que vous ne m'attendiez pas pour ça... Ou bien si vous avez un site sur lequel vous aimeriez implémenter une telle solution, demandez-moi et je ferai mon exemple dessus.
La parole est à vous !
Comment trouvez-vous ce billet ? Intéressant, totalement inutile, peut mieux faire ?Avez-vous des questions par rapport à ça ? des suggestions ?
Utilisez les commentaires !
English Version of this post
Commentaires.
#1 par Screu
Merci bien, je vais essayer ca des cet aprem je pense.
J'attends avec impatience la suite.
le Jeudi 28 Février 2008 à 07:34:58
#2 par Miho
merci, c'est le genre de truc qui est toujours bon a prendre :)
le Jeudi 28 Février 2008 à 08:01:58
#3 par Screu
6 mois plus tard, je test enfin comme je l'avais dit.
Merci encore Nyro ça marche nickel.
le Samedi 23 Août 2008 à 15:23:46
#4 par SolykZ
Très chouette billet, j'aimerais m'y mettre sur un projet en cours de développement (donc maniable à souhaits sans risquer de tout casser).
Cependant, me vient la question du référencement, des fonctions navigateur (retour arrière, mise en favoris, etc), et j'en passe.
Est-ce que des solutions ont été mises en œuvre, depuis 2008 ? Ca me branche franchement (d'abord d'un point de vue ergonomique, puis esthétique, mais aussi dans l'espoir de pouvoir diffuser une webradio en background. Si je suis contraint de devoir me passer de l'Ajax, il me faudra bidouiller un frameset pour ceux qui veulent activer la webradio (et en revenir aux vieilles pratiques crasseuses : perte du lien réel de la page, mise en favoris, etc).
Bien à vous.
SolykZ.
le Samedi 29 Août 2009 à 00:57:01
#5 par Nyro
Pour mettre en place la possibilité de revenir en arrière, vous pouvez utiliser le plugin Address : www.asual.com/jquery/addr...
Reste ensuite à mettre en place les petits bouts de code pour l'utiliser.
le Jeudi 03 Septembre 2009 à 22:23:20
#6 par artefak
c'est super je vais tenter de l'intégrer sur mon site,
mais j'ai testé la démo www.amandinecafe.com, avec IE, Chrome, Safari et bien sur Firefox ( v3.5.8)
et ce dernier qui une fois n'est pas coutume pose problème,
la musique ne se lance pas tant que le lecteur swf n'est pas affiché sur l'écran,
si on visualise en 720p ou 768px le lecteur ne lit pas a moins de scroller jusqu'en bas.
pb qui ne se pose pas avec les autres navigateur.
La solution serais de mettre le lecteur en début de page, mais y a-t-il quand même un moyen de contrer ce pb avec Firefox?
merci.
le Samedi 20 Février 2010 à 23:52:39
#7 par Olivier75009
Bonjour Nyro,
J'ai déjà mis en place Ajax sur certains sites (banniéres flash ...) avec xmlhttprequest d'ajax ou plus simplement le plugin de JQuery (menu accordéon difficile à gérér avec Ajax pur :)).
Seulement, j'aimerais savoir s'il existe une méthode pour pouvoir faire de l'Ajax pour un "main" (contenu dans une div ...) et modifier aussi le head en fonction de la page appelée :
je m'explique, le site est en php, les balises meta, title, link ... du head sont dynamiques (lors de l'envoi de la requête php, une page "include" avant la balise html renseigne les différentes valeurs des balises).
Le problème est qu'il sagit de la page index, et que je n'ai rien trouvé pour pouvoir la modifier sans recharger tout le contenu.
le Mardi 07 Juin 2011 à 17:18:25
#8 par 1992clement
Même Problème qu'olivier.
Une solution quelqu'un ou le site est tombé dans l'oubli ?
le Mardi 17 Avril 2012 à 11:47:02
#9 par Nyro
Bonjour Oliver et Clément,
Pour résoudre ce genre de problème, il faut utiliser un JSON qui contiendra :
- Le contenu HTML à remplacer
- Les autres éléments que vous voulez mettre à jour
C'est ensuite dans votre code de faire les mises à jour nécessaires.
J'ai depuis quelques temps déjà envie de remettre au goût du jour cet article, avec les éléments demandés (puisque je le fait sur tous les sites maintenant) Je ne peux rien promettre sur quand par contre...
le Mardi 17 Avril 2012 à 11:54:56
#10 par Olivier75009
Ravi que tu aies pu trouver du temps pour me répondre ;)
Je serais pas contre un nouvel article ...
Merci du suivi dont tu fais preuve !
le Jeudi 19 Avril 2012 à 17:48:05
Ajouter un commentaire.