Introduction et bases de AJAX

par lena · 7 décembre 2009

AJAX, un acronyme pour Asynchronous Javascript for XML, est devenu aujourd’hui un incontournable outil de création de contenu pour nos sites web. Au travers d’un ensemble de technologies il est possible de rendre le contenu dynamique, interactif et continuellement actualisé sans pour autant devoir recharger l’intégralité de la page.

Ce mécanisme permet donc de pouvoir déleguer le maximum de travail au poste client, enrichir le contenu au fur et à mesure des besoins de l’internaute, et de ne plus se reposer exclusivement sur une génération intégrale et globale depuis le serveur. AJAX est apparu en même temps qu’est apparu l’ActiveX XMLHttp mis en place par Microsoft, l’objet XMLHttpRequest a suivi et s’est ensuite propagé à l’ensemble des navigateurs, y compris sur Internet Explorer lui même.

Cet objet permet de récupérer des infos sur le serveur sans devoir recharger l’intégralité de la page. Jesse James Garrett en fait une brillante description dans son article A new approach to Web Applications.

La première grande expérience utilisateur de la technologie AJAX reste Google Map, mais d’autres sites ont suivit le mouvement et rapidement les sites Mash Up sont apparus. iGoogle et NetVibes en étant une bonne vitrine.

Les technologies principalement utilisées autour d’AJAX sont des technologies existants depuis plusieurs années et qui avaient données naissance à ce que l’on appelle le DHTML, pour dynamic HTML. A l’époque, avec la guerre des navigateurs le DHTML était un exercice de style difficile à implémenter.

C’est pour cela qu’aujourd’hui avec un DOM standardisé, des CSS de plus en plus supportés et un ECMAScript intégré, les navigateurs contemporains commencent à ne plus être un frein au développement. Voici les technologies gravitant autour d’AJAX :

HTML, xHTML ou XML
XSL avec XSL(T)
CSS
Javascript ou plus précisément ECMAScript
DOM
L’objet XMLHttpRequest, ou l’ActiveX XMLHttp
Une librairie telle que, Prototype, Script.aculo.us, Rico, Dojo, Mootools, jQuery….

Présentation de divers sites utilisant AJAX.
Aperçu	Site	Description
	Google Map	Le site de google mapsur lequel la majorité des premiers livres sur AJAX se sont fondés, donne une image assez représentative de l’objet XMLHttpRequest au cœur de la technologue AJAX.Le rechargement en temps réel des parties de la carte atteintes par l’interaction de l’utilisateur et sans avoir à recharger entièrement la page.
	NetVibes	NetVibesest un des premiers sites à avoir utilisé de manière riche et interactive les diverses technologies qui gravitent autour d’AJAX. NetVibes n’en fini pas de servir d’exemple en commençant par iGoogle.Rendez vous sur le site et créez des onglets, manipulez les fenêtres, interagissez avec, changez le titre à la volée, ajoutez des widgets… bref, tout est permis ou presque, en temps réel et sans jamais devoir enregistrer.
	iGoogle	Quasi copie conforme de NetVibes sur le principe, iGoogle est également une interface personnalisable remplie de widget. En fait ces deux sites vont plus loin que le simple fait d’utiliser des technologies qui composent AJAX. Ce sont de véritables sites MushUp.
	RATP	La saisie assistée est également une possibilité qu’offre AJAX. Le site de la RATP en use et abuse lorsque vous souhaitez saisir le nom d’une station, ou encore le site de réservation Voyages-sncf.La différence avec une aide à la saisie qui aurait mémorisée vos anciennes entrées, ne pourrait pas afficher des entrées que vous n’avez pas encore utilisées.

Prérequis pour mettre en place et utiliser AJAX

Il n’est pas nécessaire d’avoir des prérequis particuliers pour utiliser AJAX, au fil du temps et des besoins, vous serez amenés à éventuellement compléter vos acquis par des tutoriels complémentaires.

De manière générale, pour pratiquer AJAX dans de bonnes conditions, cela demande une utilisation correcte et propre du langage HTML, ainsi que des CSS. Une bonne structure et une absence de divite ou de classite sont fortement conseillées afin d’éviter du contenu spaghetti et mikado. Bien sur tout se passe sur l’utilisation de Javascript et une fois les données récupérées il va falloir intervenir sur le DOM. Tout autre connaissances sur des technologies transversales comme HTTP, XML, Json, jQuery (ou autres), architecture d’informations, ergonomie et UX design … ne peuvent qu’être utiles. De manière générale, les divers tutoriels de Puce et Média qui peuvent contribuer à améliorer le contenu de ce présent tutoriel peuvent être:

Préparation du navigateur

Quelque soit le navigateur que vous allez utiliser, pensez à l’équiper de certaines extensions si celui ci ne les propose pas de manière native. A titre d’exemple voici quelques type d’extensions pour Firefox qui sont très utiles lors de la mise en place de mécanique AJAX :

Si vous utilisez un autre navigateur, pensez à découvrir les diverses extensions qu’il propose. Notamment le menu Debug de Safari et la Developer ToolBar de Internet Explorer. Quoiqu’il en soit, et quelque soit le navigateur que vous utilisez, pensez à en installer les principaux, afin de pouvoir vous assurer du bon fonctionnement de vos pages en fonction des divers environnements.

Présentation de l’approche

Le DOM Inspecteur et le code source

Certains navigateurs proposent d’explorer le DOM, c’est à dire qu’ils proposent une fenêtre latérale reflettant le code et sa structure, la debug bar d’internet explorer en est un bon exemple. Cependant il faut prednre en compte que la plupart des outils font bien la distinction entre le code source initial de la page du code HTML du contenu généré dynamiquement. Par exemple Dreamweaver propose l’affichage du code et du Live Code, ou encore Firefox permet soit d’afficher le code source ou le code de la sélection…. Dans les premiers cas l’outil renvoie le code HTML initial, alors que dans les seconds l’outil renvoit également le code généré. Pour le mettre en application utilisez Firefox et rendez vous sur cette page de test. Maintenant demandez le code source, (Ctrl ou Cmd / U)… maintenant sélectionnez toute la page (Ctrl ou Cma / A) et faites un click droit sur cette sélection et choisissez Afficher le code de la sélection dans le menu. Vous pouvez alors facilement comparer les deux résultats obtenus… dans le premier cas seul le titre <h1> apparait dans le <body>, dans le second la balise <article> est également affichée.

La console Javascript

Outil incontournable pour suivre les diverses opérations, propriétés et autres informations nécessaires durant les phases de construction des contenus et applications dynamiques. La console est dorénavant intégré à tous les navigateurs modernes, donc il suffit d’ouvrir la fenêtre qui lui est associée, générallement le raccourcis F12, ou depuis les menus :

Chromium, Clé > Outils > Console Javascript,
Internet Explorer, Outils > Outils de développement onglet console,
Firefox, Outils > Web Developer > Web Console ou Outils > Web Developer > Firebug onglet console,
Opéra, Outils > Avancé > Opéra Dragonfly onglet console.

Il existe plusieurs manières d’utiliser la console, les principales sont en écriture et en lecture… Lancez le navigateur de votre choix, et rendez vous sur cette page de test. Si vous ouvrez la console, vous devez voir apparaître le message « Message envoyé depuis le document« , sinon rechargez la page (F5). Ce message est généré depuis un script présent dans le document.

console.log("Message envoyé depuis le document");

Il est donc utile et pratique de pouvoir tracer ainsi certaines opérations afin de pouvoir mieux suivre le développement de nos sites et applications web. Mais comme nous le disions précédemment il est également possible d’écrire dans la console et même d’interagir ponctuellement avec le document… par exemple cette fois ci ouvrez la console et tapez la ligne suivante :

console.log(4 + 3);

Vous pouvez alors constater que non seulement la console reçoit le message mais en plus elle execute l’opération qui lui a été demandé. On peut comme cela passer tout un certain nombre d’instruction Javascript qui seront alors exécutées. Mais on peut également interagir de la sorte sur le document en utilisant du DOM scripting… tapez par exemple les instructions suivantes :

jQuery('article').css('background-color', 'rgba(77,122,255,0.45)');

Cette fois ci la console a directement agit sur le document. Nous avons donc là un précieux allié de travail afin de dialoguer en temps réel avec le contenu et l’application web elle même.

Firebug

Firebug est une extension qui étend l’ensemble des fonctionnalités et des possibilités que peuvent nous offrir les outils de contrôles natifs des divers navigateurs. Par exemple, l’onglet Console de Firebug permet de lister l’ensemble des requêtes GET ou POST envoyés au serveur ainsi que leur réponse et leurs les entêtes, en complément l’onglet Net lui permet en plus de controler les temps de réponse et de chargement de ces mêmes requêtes… bref là encore un outil précieux pour travailler avec AJAX.

Aller plus loin

Ajax par la Pratique

Justin Gehtland Ben Galbraith Dion Almaer

Vous apprendrez bien sûr à maîtriser le comportement de l'objet XMLHttpRequest sur toutes les plates-formes, mais vous vous familiariserez surtout avec les bibliothèques et APIs les plus intéressantes comme Script.aculo.us, Prototype, Dojo ou E4X....

Bulletproof Ajax

Jeremy Keith

In Bulletproof Ajax, author Jeremy Keith demonstrates how developers comfortable with CSS and (X)HTML can build Ajax functionality without frameworks, using the ideas of graceful degradation and progressive enhancement to ensure that the pages work for all users....

Développez en Ajax

Michel Plasse et Olivier Salvatori

Après avoir présenté des exemples typiques d'utilisation d'Ajax, cet ouvrage étudie en profondeur les techniques sous-jacentes (CSS et DOM, JavaScript objet, XMLHttpRequest, JSON, XML et XSLT) en les illustrant d'exemples d'applications variées et de complexité croissante. Il présente également plusieurs des frameworks qui facilitent le développement d'applications Ajax, notamment prototype, dojo et script.aculo.us....

Les fondamentaux d'Ajax par la Pratique

Bruno Sébarte

Lors de l´écriture de cette formation, deux solutions s´offraient à nous : aborder AJAX en le saucissonnant et en expliquant de manière indépendante, en détail, et en profondeur chacune de ses particularités, ou bien présenter AJAX par la pratique en se lançant directement dans le développement d´une mini-application. Telle est la solution qui nous a semblé être la plus adaptée pour une telle entreprise. Découvrez ci-dessous pourquoi !...