Wa l’autre, il démarre direct avec un disclaimer. PS : On ne parlera ni de détergent, ni de héros grec, ni de football dans cet article. Si vous êtes arrivés ici pour ces raisons, vous avez été victime d’homonymie. Tout d’abord, AJAX veut dire Asynchronous JavaScript and XML. Ce titre est un peu trompeur car aujourd’hui, l’AJAX n’est pas limité à ses deux langages. L’AJAX n’est pas une technologie à proprement parler, mais un principe. Et bien l’AJAX, c’est pareil, mais sans que votre page web soit rechargée.
Bien souvent, les requêtes AJAX sont utilisées en toute transparence. Terme très explicite, il s’agit de blogs ou de réseaux sociaux, où vous pouvez scroller indéfiniment car le système aura toujours quelque chose à afficher. Le site internet détecte votre position et quand il arrive en bas de page, il va charger les contenus suivants, puisque votre utilisation ne semble pas terminée. Il est aussi possible d’avoir un bouton “Charger plus de contenus” pour s’assurer que vous souhaitez effectivement voir plus de contenus. Tous ces systèmes sont aujourd’hui rodés et appréciés, sans qu’il existe forcément une bonne compréhension de leur fonctionnement.
Les exemples d’utilisation ci-dessus mettent en évidence une logique : l’AJAX est parfait pour des petites actions. Pensez à ajouter un loader ou tout élément indiquant à l’utilisateur que quelque chose se passe et que son action a bien été prise en compte. De même, notifiez toujours l’utilisateur de la réponse du serveur, qu’elle soit bonne ou mauvaise. Enfin, gardez un œil sur les temps de traitement de vos requêtes et si elles sont appelées dans le bon contexte. Voilà pour ces quelques bonnes pratiques générales.
Il faut d’abord savoir que mettre en place de l’AJAX sur une application ne requiert rien de particulier, si ce n’est une bonne organisation. Côté client, la meilleure façon de gérer vos requêtes AJAX est d’utiliser une librairie comme jQuery ou Mootools. Pour gérer les notifications, nous utilisons la librairie Toastr, qui est à la fois légère, performante et simple d’utilisation. Côté serveur, le souci c’est qu’il dépend du système utilisé. On a le choix entre 3 langages pour le retour : le JSON, le XML ou l’HTML. Un retour AJAX côté serveur consiste à simplement afficher le retour comme vous le feriez sur une page normale, avec un “echo” donc, et éventuellement un “die” après votre retour.
Utiliser l’AJAX semble être indispensable aujourd’hui, tant ce principe colle avec les bonnes pratiques et l’idée que l’on se fait d’une bonne ergonomie. Mais on peut aussi s’en passer. L’AJAX, c’est avant tout un concept pensé pour améliorer l’interaction utilisateur en se basant sur des scénarios utilisateurs - use cases - pensés à l’avance. Cette leçon est une introduction à la technologie AJAX. Les principales fonctions JQuery relatives à AJAX sont présentées et expérimentées sur des exemples simples et caractéristiques. La leçon présente également le format d'échange de données JSON. Etre capable d'utiliser les fonctions de base JQuery et de JSON pour implémenter des solutions asynchrones simples.
AJAX est une technique asynchrone et sans provoquer de rechargement de page. Traité par le JavaScript et non par le navigateur, AJAX repose sur l'objet DOM XMLHttpRequest qui permet la communication asynchrone avec le serveur. Les systèmes modernes utilisent aussi des méthodes comme fetch() basées sur les promesses et la chaîne then().
La logique AJAX peut être appliquée à des scénarios concrets: afficher des proverbes chinois tirés au hasard, charger dynamiquement du contenu, ou récupérer des définitions côté serveur pour certains termes. L’invocation se fait souvent via des requêtes KW (par exemple $.get en jQuery). Le fonctionnement côté serveur peut retourner des données structurées (JSON, XML) ou du HTML partiel à injecter dans la page.
En termes d’architecture, une application AJAX pure se distingue par l’envoi de données navigateur vers serveur sans recharger la page entière. Pour obtenir ce niveau de contrôle, le développeur doit écrire beaucoup de code JavaScript. Le modèle API Ajax permet aussi d’optimiser les échanges en scénarios tels que l’autocomplétion, l’enregistrement automatique et la validation juste-à-temps.
La sécurité et les origines croisées constituent des contraintes importantes. Le Same Origin Policy peut bloquer des requêtes vers des origines différentes, mais CORS (Cross-Origin Resource Sharing) permet d’autoriser des appels provenant d’origines variées si configuré côté serveur. Une architecture complète peut inclure un service web renvoyant des résultats de recherche, comme des communes françaises, et une carte web affichant les résultats.
En pratique, plusieurs couches et bibliothèques viennent faciliter le travail: jQuery, Mootools pour le client; Toastr pour les notifications; et des formats de données standard comme JSON et HTML. Sur le serveur, des points de terminaison HTTP REST, des services WCF ou des scripts PHP peuvent servir de récepteurs et de processeurs des requêtes AJAX.
Le rendu utilisateur peut être amélioré par des éléments tels que des loaders, des états de chargement, et des messages de succès ou d’erreur. Pour les formulaires, l’approche AJAX permet de valider les entrées côté client et côté serveur, avec des validations asynchrones et des mises à jour partielles via des UpdatePanel ou des solutions équivalentes.
Enfin, l'imbrication des méthodes et la gestion du flux de données - mise en tampon, envoi par paquets et rééchantillonnage - peuvent réduire la charge serveur tout en conservant une UX fluide. Le concept GS (gently staggering) ou des techniques de soumission par étapes illustrent ce compromis entre réactivité et performance serveur.
Bonnes pratiques et scénarios typiques
1) Chargement automatique et détection de défilement: le chargement progressif (infinite scroll) se base sur une détection du bas de page et déclenche une requête AJAX pour récupérer la suite des contenus. Un indicateur de chargement informe l’utilisateur.
2) Dialogues et éditeurs dynamiques: les zones éditables peuvent être sauvegardées via AJAX en arrière-plan ou via des timers pour des sauvegardes automatiques, avec un stockage côté serveur et récupération à l’ouverture de l’écran.
3) Autocomplétion et suggestions: l’extension de saisie semi-automatique envoie des requêtes de suggestion au serveur à intervalle réglable et affiche les résultats en temps réel sans bloquer l’interface.
4) Validation de formulaire asynchrone: on peut associer des validateurs asynchrones à chaque champ et des validations globales via des appels de serveur lorsque nécessaire, tout en fournissant des retours immédiats à l’utilisateur.
Exemple d’architecture AJAX côté client et serveur
Dans une application AJAX pure, l’envoi de données navigateur vers serveur passe par du code JavaScript côté client qui décide quand et comment publier les données. Le serveur peut retourner JSON, XML ou HTML, et l’application injecte dynamiquement les résultats dans le DOM sans rechargement.
Les principales interactions se font via des appels HTTP asynchrones. Le navigateur continue de répondre pendant que le serveur traite la requête. La gestion des erreurs, les timeouts et les statuts HTTP jouent un rôle crucial pour une UX fiable.
Réflexions finales et bonnes pratiques générales
AJAX reste avant tout un concept centré sur l’interaction utilisateur et l’optimisation UX. Il n’est pas nécessairement une technologie unique mais un ensemble de pratiques qui permettent des interactions riches sans rechargement de page.
Pour une mise en œuvre robuste, privilégier une organisation claire entre client et serveur, choisir des formats de données simples (JSON), et varier les approches selon le contexte (chargement progressif, sauvegardes automatiques, validations asynchrones).
- Utiliser des loaders et des indicateurs d’action pour notifier l’utilisateur.
- Notifier la réponse du serveur, qu’elle soit positive ou négative.
- Surveiller les temps de réponse et adapter le contexte d’appels.
- Gérer les origines et activer CORS lorsque nécessaire.
- Équilibrer réactivité et charge serveur avec des envois par étapes et des mécanismes de tampon.