Discussion :

[SylvainPV]

Bonsoir,

Je bosse sur un site en Single Page App, autrement dit toute la navigation sur le site est gérée via des requêtes AJAX : ces requêtes retournent du HTML ou du JSON pour générer les vues et les injecter dans le conteneur lié à la vue.

Rien de bien sorcier ici, c'est du classique. Et pourtant il y a une question simple à laquelle je ne parviens pas à trouver de réponse : quel est le HTML le plus approprié pour un lien fonctionnant avec AJAX ?

Jusqu'ici j'utilisais un tag <a> sans renseigner d'attribut href:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="ajax-link" data-href="cible.html">

Seulement l'attribut href est obligatoire d'après les spécifications, et de plus les navigateurs ont tendance à retirer le curseur en forme de main au survol lorsque l'attribut href est absent.

J'ai aussi beaucoup vu le href assigné à un hash vide :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="ajax-link" href="#" data-href="cible.html">

Mais si l'évènement n'est pas capturé, le navigateur remonte la barre de défilement au sommet de la page. De plus, lorsqu'on gère l'historique avec un plug-in comme history.js, l'évènement statechange est déclenché lors du passage aucun hash -> hash vide.

Enfin, on peut remplir le href avec le lien attendu, et bloquer la propagation de l'évènement en JavaScript. Si JavaScript est désactivé, on peut voir ça comme un fallback, bien qu'il me paraisse impossible d'arriver à un résultat correct de cette façon si JS est désactivé sur une SPA.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="ajax-link" href="cible.html">

A moins que ce soit l'élément <a> qui ne convient tout simplement pas pour les requêtes AJAX ? Auquel cas on se contenterait de <span> ou <div> avec cursor:pointer; ? Cela soulève quelques débats pour ma part : est-ce qu'une requête AJAX est un hyperlien ? à partir de quand un changement dans le document par JavaScript peut être considéré comme un changement de page ?

Lorsque j'utilise d'autres éléments comme des boutons ou des pictogrammes pour un lien via AJAX, je les encapsule dans un <a> sans href histoire d'améliorer la sémantique du document. Mais je me dis que je fais peut-être pire que mieux...

Je n'ai pas trouvé de documentation sur le net qui me laisse croire que les grands manitous du Web, alias W3C/WHATWG, ont déjà tranché sur cette question. Alors je viens demander votre avis. Qu'est-ce que vous utilisez personnellement ?

[NoSmoking]

Bonjour,
dans ton cas je dirais que l'utilisation des balises A me parait justifier, il s'agit bien d'un lien vers...de l'information nouvelle.

La mise en place du HREF permet d'avoir une sémantique dans ton document, quitte à modifier cela dès que le javascript entre en action.

Tu peux tout à fait envisager un lien de ce type <a class="ajax-link" href="cible.html"> qui devient après script <a class="ajax-link" href="#" data-href="cible.html">.

[SylvainPV]

Donc changer le DOM lors du chargement initial du script. Je pensais le faire directement sans changer le DOM en bloquant la propagation de l'évènement click :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('a').on('click', function(event){
event.preventDefault();
event.stopImmediatePropagation();
$('body #main').load(this.getAttribute('href'));
});

Mais j'ai l'impression de "mentir" à l'utilisateur qui voit ça comme un lien standard. D'ailleurs, s'il opte pour clic droit -> ouvrir dans un nouvel onglet, je n'ai plus de contrôle sur la méthode de chargement.

Inversement si je mets href="#", on retrouve les inconvénients que j'ai exposé dans mon premier post: remontée en haut de page si non intercepté et évènement statechange

[NoSmoking]

Je pensais le faire directement sans changer le DOM en bloquant la propagation de l'évènement click

c'est effectivement la solution la plus propre.

Mais j'ai l'impression de "mentir" à l'utilisateur qui voit ça comme un lien standard.

On lui ment déjà, quelque part, en faisant une page unique et en modifiant l'URL.

D'ailleurs, s'il opte pour clic droit -> ouvrir dans un nouvel onglet, je n'ai plus de contrôle sur la méthode de chargement.

Il faut prendre le contrôle coté serveur via les URL-rewriting.

L'article sur DVP qui en parle Ajax et le référencement

[SylvainPV]

Merci pour l'article
Effectivement l'URL rewriting résoudrait le problème... mais je pense avoir une solution client-only :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="ajax-link" href="?page=cible">

Ce mode de fonctionnement s'intègre parfaitement bien avec history.js pour gérer l'historique en AJAX. On considère alors que les requêtes AJAX ne sont pas des hyperliens mais un changement d' "état" de l'application web. L'application web en entier fait alors office de ressource, donc la règle "une URL = une ressource" peut toujours s'appliquer.

Je ne pense pas que ce soit l'idéal en référencement, accessibilité et support, mais en tout cas ça fait le job en simplifiant mon code, et je n'ai plus à craindre les nouveaux onglets / nouvelles fenêtres.