Dans cette première leçon de la série AJAX, le présentateur explique ce qu’est AJAX, pourquoi il a été créé et quels problèmes il résout. Il décrit les limites des approches traditionnelles (rechargement complet de page, caches, iframes) et montre comment AJAX, grâce à des requêtes HTTP asynchrones, permet de mettre à jour partiellement une page, d’améliorer l’interactivité et de réduire la bande passante. Le cours détaille les différents formats de données (XML, JSON, HTML, texte) et le rôle du JavaScript, du DOM, du HTML/CSS dans l’intégration des réponses. Il introduit l’objet XMLHttpRequest, son origine ActiveX sous Internet Explorer, son évolution vers un standard W3C et la nécessité de gérer la compatibilité avec les anciens navigateurs. Enfin, il indique les prérequis techniques (serveur local type WAMP/XAMPP/EasyPHP, maîtrise du JavaScript, du DOM, HTML/CSS) et annonce les prochaines vidéos où seront abordés les aspects pratiques.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle série de leçons consacrée à l'architecture AJAX. AJAX signifie Asynchronous JavaScript and XML. Il ne s'agit pas d'une technologie à part, mais un groupement d'un certain nombre de technologies et langages exécutés ensemble dont le principal pilier est le langage JavaScript. En effet, AJAX c'est du JavaScript exécuté sur le client, mais qui sollicite les services d'autres technologies comme XML, JSON, etc. Avant d'aller plus loin, voyons d'abord pourquoi AJAX a été inventé et pourquoi il a eu autant de succès à tel point que la grande majorité des sites et applications web s'en servent. Imaginons que vous avez créé un site web composé d'un ensemble de pages. Bien entendu, ces différentes pages contiennent des informations différentes les unes des autres. Cependant, des éléments comme le menu de navigation et la bannière sont les mêmes sur toutes les pages ou presque. Or, quand l'utilisateur clique sur un lien pour se rendre sur une nouvelle page, les éléments de cette dernière sont chargés entièrement, y compris le menu de navigation et les autres éléments communs. On imagine donc que la bande passante est pénalisée par le rechargement des mêmes données à chaque fois sans aucune utilité. Certes, les navigateurs disposent d'un cache qui mémorise les éléments déjà chargés afin de ne pas les recharger inutilement, mais cette technique a des limites. On peut également se servir des frames à l'aide de la fameuse balise iframe afin de maintenir les éléments inchangés dans le navigateur et ne charger que les nouvelles données Mais cette technique a quelques inconvénients, en l'occurrence vis-à-vis du référencement et l'indexation des pages web sur les outils de recherche. La solution tant espérée à ce problème s'appelle AJAX. AJAX est l'acronyme de Asynchronous JavaScript and XML. De son nom, on peut déjà deviner qu'il s'appuie sur le langage JavaScript et aussi sur XML, qui est un langage de balisage un peu comme HTML mais qui a une finalité différente. Il s'agit d'un assemblage de technologies qui permettent d'interroger le serveur web et importer les nouvelles données qui seront ensuite intégrées à la page courante, sans que celle-ci ne soit rechargée. Entièrement. Donc, seules quelques zones de la page en question sont rafraîchies par de nouveaux contenus, ce qui constitue une économie importante des données échangées entre le serveur et le client. Mais ce n'est pas tout, en effet, le terme asynchronous ou asynchrone fait allusion aux requêtes HTTP qui par défaut sont passées dans le mode synchrone. En effet, dans le mode synchrone, si une requête est passée au serveur suite à un clic sur un hyperlien ou un bouton d'un formulaire par exemple, alors la page web est figée et aucune autre action ne peut être menée dessus jusqu'à ce qu'une réponse parvienne du serveur. On parle donc de requêtes bloquantes. C'est ce qui arrive quand vous cliquez sur un lien et que votre connexion est un peu lente, vous constatez que la page est figée et ne répond plus à vos prochaines actions jusqu'à ce que le nouveau contenu soit rechargé. Ça vient du fait que le serveur ne traite qu'une requête à la fois passée par le client. Dans le cas de requêtes asynchrones, ces dernières ne sont pas bloquantes et l'utilisateur peut continuer à interroger le serveur en lui passant d'autres requêtes même s'il y en a d'autres qui sont en cours. Donc, le serveur peut dans ce cas écouter plusieurs requêtes passées simultanément par le client. Ce comportement a pour effet d'offrir une interactivité évoluée par rapport à celle assurée par JavaScript à lui seul. Avec AJAX, on peut par exemple réaliser les applications suivantes: le rafraîchissement des données tout en restant sur la page courante, le contrôle de saisie en temps réel sans avoir besoin de poster le formulaire, l'autocomplete de champs de saisie comme c'est le cas lors d'une recherche sur Google où ce dernier suggère des expressions de recherche jugées comme pertinentes. Comme je l'ai mentionné il y a quelques instants, AJAX s'appuie sur le langage JavaScript pour le traitement et l'interface DOM afin d'extraire les données à traiter et cibler le conteneur qui est destiné à les accueillir. Mais JavaScript à lui seul n'est pas suffisant, car il faut aussi le HTML et le CSS pour l'intégration et la présentation. Et par-dessus tout, il faut les données elles-mêmes. Ces données peuvent parvenir du serveur sous format XML ou JSON, mais elles peuvent aussi parvenir sous format texte ou HTML. Mieux encore, les données peuvent être générées dynamiquement par des scripts CGI comme à l'aide du PHP. Bien sûr, on aura l'occasion de voir tout ça en détail dans les prochaines vidéos. AJAX s'appuie sur l'objet XMLHttpRequest. C'est cet objet qui permet de créer des instances AJAX qui peuvent envoyer des requêtes au serveur dans le mode asynchrone et intercepter les réponses que JavaScript intègre à la page en question. L'objet XMLHttpRequest a été créé par Microsoft, mais il s'agissait en fait d'un contrôle ActiveX du nom de ActiveXObject initialement intégré au navigateur Internet Explorer. Internet Explorer. Les autres navigateurs utilisent cet objet sous le nom de XMLHttpRequest jusqu'à ce que W3C le propose en tant que standard sous ce nom. Donc, désormais, l'implémentation de cet objet se fait sous le nom de XMLHttpRequest sur tous les navigateurs actuels. Néanmoins, dans les codes que nous allons éditer lors des prochaines vidéos, nous allons également prévoir le contrôle ActiveXObject pour que AJAX fonctionne aussi sur les anciens navigateurs de Microsoft. Dans la suite de cette série, on aura besoin d'une plateforme de développement qui va agir comme serveur web. Je vous suggère de regarder la vidéo où j'ai essayé d'expliquer comment installer et manipuler une plateforme de développement comme WAMP, XAMPP ou EasyPHP. Il faut également être à l'aise avec le langage JavaScript, l'interface DOM et avoir un minimum d'acquis en HTML et CSS. Pour ce qui est du XML ou JSON, on verra ensemble comment s'en servir pour en extraire les données. Merci pour votre attention et à la vidéo prochaine.
