Navigation interne du site : ajax ou pas ?

Bonjour à tous et à toutes,

J'ai un petit problème bien embêtant.

J'ai un site internet comportant une page index.

Cette page index change de contenu par méthode GET.

Exemple l'arrivée sur index.php affiche la page d'accueil. La page index.php?contenu=Accueil affiche pareil mais pas le lien index.php?contenu=information

J'espère que pour le moment vous m'avez suivis ?

Dans ce format de navigation mon site fonctionne nickel au niveau fonctionnalité et tout, je fonctionne avec des includes de fonction php qui dépendent du contenu etc etc bref celà je pense n'a pas grand intérêt pour mon soucis.

Mon vrai soucis est el temps de chargement de mon site provenant de la création de la bannière via HTML5. Alors je pensais implémenter une navigation par Ajax.

Ce que j'ai fait. Mon site ne met a jour que le menu sous menu et le contenu au clic sur les liens.


Cependant j'ai plusieurs soucis qui sont apparu la ou le reste marchait.

Déjà classiquement y a un problème au niveau de l’URL, pas vraiment un problème on va dire car ce n'est pas une erreur mais l’URL du site ne bouge plus, j'ai pensé à utiliser

window.location.replace('http://localhost/monsite/#!/'+contenu+'/'+page);

avec contenu qui indique une des 3 grande parties du site où l'on désire consulter une page (sert surtout pour afficher le sous menu associé à la partie) et page qui indique qu'elle page aller chercher avec ajax pour l'afficher dans mon div (#conteneur).

Donc avec cela je pouvais afficher ma page indiquer par l’URL ou on était etc.

Là ou le bas blesse, c'est que comme on passe par une ancre, les marques pages ne fonctionnaient pas. J'ai donc établis une fonction qui permettaient en entrant une adresse de la forme http://localhost/monsite/#!/coucou/ici d'afficher le tout. Celle-ci fonctionnait mais le navigateur ne comprenait pas lorsque l'utilisateur était déjà sur une adresse de type http://localhost/monsite/#!/coucou/ici et qu'on rentrait dans la barre d'adresse ou en cliquant sur un marque page, l'adresse http://localhost/monsite/#!/salut/toi, rien ne se passait. Probablement du fait que l'url avec une ancre ne force pas le rechargement de la page.

De plus j'avais une carte mappé spécial pour IE mais l'ancre des liens de la carte supprime les liens ancré de mon ajax. Rajoutons mes quelques formulaires qui déconne un peu du coup bas je sais pas trop comment faire. La navigation est certes mille fois mieux plus fluide jolie douce aux regards (surtout sur IE qui galère plus a afficher l'animation) mais est ce que c'est possible de régler mes soucis, surtout que je doute de pouvoir en faire un site référencé.

Quelqu'un a-t-il de l'expérience sur le sujet pour pouvoir me guider ?

Je répondrais à toutes vos questions même si moi même, je suis un peu perdu
Modifié par Bloodymeister (09 Jul 2012 - 12:16)

Hello.

Je te donnerais le même conseil que dans ce sujet.

Faire une navigation full Ajax, ça implique de bien connaitre son sujet, aussi bien sur les problèmes d'URLs (même en se moquant du SEO, il faut que ça reste bookmarkable / partageable par l'utilisateur), que sur les problèmes de déclaration des événements JS.

Si le seul but est de gagner en vitesse, cherche plutôt à résoudre les soucis qui rendent ton site lent en consultation "normal" plutôt que de le surcharger de code bancal qui va littéralement tout exploser.

HS: Rassure moi, ton site est bien protégé des failles include?

Oui j'utilise le principe de la liste blanche pour filtrer les données arrivant dans le $_GET ou dans le $_POST ou même par $_SESSION.

Pour ce qui est de l'Ajax j'ai déjà bien regardé ce que je pouvais optimiser "d'autre" pour augmenter le temps de chargement.

Fichier images de réduits aux maximums pour un rapport poids/qualité acceptable compression des fichiers de scripts des codes html. Ce qui est gênant c'est le rechargement de la bannière, ce que j'aimerais c'est avant tout éviter de recharger cette bannière qui une fois chargé tourne sans ralentir le navigateur. alors j'aimerais pouvoir naviguer sans recharger cette dernière.

Je pensais à Ajax car cela me permettais d'avoir le résultat escompté. J'ai lut pas mal de tutoriel sur le sujet mais la plupart reste flou sur certain point comme le référencement ou le côté bookmarquable (meme si je pense que sur Développez.com j'ai trouvé une piste pour celui-ci)

Y a quand même pas mal de soucis comme cité plus haut que j'aimerais vraiment réglé.
Après le site est accessible pour les non-javascript donc pour les robots des moteurs de recherche, C'est vraiment pour améliorer l'expérience utilisateur que j'aimerais réalisé cette navigation Ajax.

Je garde une version du site sans la navigation Ajax au cas.

Bloodymeister a écrit :
C'est vraiment pour améliorer l'expérience utilisateur que j'aimerais réalisé cette navigation Ajax.

Exploser les URLs, ou se retrouver avec deux URLs (une normale, une en /#!/bubu) ce n'est pas terrible d'un point de vue user selon moi.

Sans compter :
- Le support de history.pushState dans IE : inexistant.
- Les widgets qui vont péter, car instancié au DOM-load / ready. Il te faudra recréer un nouvel événement custom pour ça (ex jQueryMobile déclare une onPageInit de tête).
- Les leaks de mémoire si tu n'unbind pas proprement les événements des éléments que tu remplaces dans la page.
- La gestion des formulaires en Ajax + pushState qui est loin d'être fun.
- Plein d'autres trucs.

A toi de juger si la complexification de ton code pour conserver une bannière en vaut la peine.

La bannière étant un souhait du client, je ne sais pas trop que faire. Merci de ton avis