AJAX est une nouvelle technologie
qui permet de faire énormément de choses, notamment dans le cadre du Web 2.0
. C'est la définition que la plupart des prestataires qui le placent sur un piédestal vous donneront. L'objet de ce tutoriel est, tout d'abord, de tordre le cou à des idées reçues et, enfin, de dégager les points essentiels relatifs à son utilisation.
AJAX signifie Asynchronous JavaScript + XML (XML et JavaScript Asynchrone) et propose d’utiliser les technologies web les plus répandues (XML, DOM, CSS et Javascript) dans le but de créer des interfaces utilisateurs plus réactives et ergonomiques.
Cette définition me plaît assez, mais force est de constater que beaucoup de développeurs oublient la seconde partie de celle-ci. En effet, aujourd'hui, utiliser AJAX signifie pour la majeure partie des développeurs, je prends une librairie Javascript, je la mets dans mon site et je ne me pose même pas la question de savoir s'il n'est pas possible de faire autrement.
Ce tutoriel AJAX n'a donc pas pour but de vous expliquer comment faire du AJAX (notion abstraite car générale). Il a pour vocation de limiter la mauvaise utilisation ou l'utilisation contre productive d'AJAX. En effet, en tant que développeur, je n'ai, d'expérience, jamais eu la nécessité de l'utiliser. Pas par simple rejet de cette pseudo-technologie, mais simplement que les choix qui s'imposaient comme évidents n'allaient pas dans ce sens.
Comme nous l'avons vu précédemment, AJAX utilise Javascript. Or, vous devez garder à l'esprit que son utilisation ne doit pas vous dispenser d'une solution alternative. Cela induit plusieurs inconvénients :
De plus, force est de constater que ceux qui utilisent AJAX
, ne sont pas forcément des experts du DOM, ni de fins programmeurs. Ils utilisent souvent des codes sources qu'ils ne sont pas capables d'entretenir, ni d'adapter. Ceci pose un énorme problème quand à la pérennité des pages ainsi produites.
De ce fait, utiliser AJAX doit être une exception, un cas particulier pour lequel il n'était pas possible de faire autrement. C'est ce que je me propose de vous expliquer dans ce modeste tutoriel.
L'une des grandes utilisations d'AJAX est la navigation d'une page à une autre sans recharger la totalité de la page. Pour ce faire, seul un fichier XML contenant les informations désirées est chargé. Les arguments avancés sont alors :
Malheureusement, la plupart du temps, ces arguments sont faux.
En effet, cette utilisation d'AJAX présente de terribles inconvénients :
Si l'on résume, les gains en bande passante sont minimes voir annulés par les conséquences des inconvénients cités plus haut. Et enfin, l'utilisabilité, loin d'être améliorée est entravée par la disparition d'éléments clés de la navigation.
On connait et reconnait de plus en plus l'utilité des standards. La popularité du XHTML, que je mesure pleinement grâce aux visites sur ce tutoriel, va croissante. Mais il existe un standard plus méconnu peut-être parcqu'ancien mais dont les possibilités sont plus étendues qu'on ne le pense. Il s'agit du protocole HTTP.
Faîtes l'expérience ! La plupart des sites dynamiques ne l'exploitent pas au maximum. Allez sur un site réputé dynamique, cliquez sur un lien du menu et attendez le chargement complet de la page. Cliquez à nouveau et vous vous rendrez compte que le document est de nouveau chargé. Pourtant la probabilité qu'il ai changé dans un si court laps de temps est infime !
Le protocole HTTP, exploité au maximum, peut s'avérer extrêmement productif. Par exemple, pour ce site (mise à part sur les pages d'accueil, de contact et d'administration) vous n'auriez téléchargé ce document qu'une seule fois (à condition que comme 90% des utilisateurs, votre cache soit activé). Mais il existe mieux encore ! En effet, vous pouvez, de plus, spécifier aux proxys qu'il peuvent stocker vos pages dans leur cache partagé. Ainsi, pour un grand nombre d'accès potentiels, la page ne sera chargée qu'une seule fois !
Les gains en bande passante sont alors considérables et l'utilisabilité est renforcée car l'information est complétée par une entête HTTP correctement renseignée. Par exemple, sur Elitwork, 27.7% des codes de réponse HTTP envoyés sont des codes 304 qui signifient ce document n'a pas été modifié depuis votre dernière visite
. On peut donc en conclure que cette petite manipulation a induit une baisse du trafic généré par la consultation de pages HTML de presque un tiers. Je vous renvoi donc à un excellent article sur la gestion des caches en PHP (oops, erreur 404, dommage pour cet article qui semble s'être envolé !).
J'ai un ami, qui se reconnaîtra, excellent designer, mais pas programmeur pour deux sous... Un jour, il m'a témoigné sont envie de faire des formulaires en AJAX. Je ne savais pas que cela existait. C'est donc naturellement que je lui ai demandé de m'en dire plus à ce sujet. L'idée était de vérifier l'exactitude des données entrées grâce à une vérification auprès du serveur.
Encore un problème de la mauvaise connaissance des utilisateurs d'AJAX et des technologies sur lesquelles il est fondé. Ce problème peut être résolu grâce à notre cher couple DOM/Javascript sans avoir à entretenir tout une partie client/serveur inutile.
Il existe un moyen simple de vérifier les données entrées dans un formulaire sans avoir à faire appel à un script PHP. Cela ne remplace pas cette dernière vérification qui seule fait foi, mais permet d'éviter de nombreux rechargements pour indiquer qu'un contenu est inapproprié.
Il suffit d'ajouter un évènement à la soumission d'un formulaire et enfin, de vérifier le contenu des champs grâce à des expressions régulières.
Voici quelques exemples choisis :
if(/([0-9a-z_-.]+)@([0-9a-z_-.]+).([0-9a-z]+)/i.test(variable)) { alert('Le format de l\\'adresse courriel est corrompu.'); }if(variable.length>nb_carac_max) { alert('trop de caractères dans le champ textarea.'); }if(/(http|https|ftp):\\/\\/([0-9a-z_-%\\]+)/i.test(variable)) { alert('Le format de l\\'URL est corrompu.'); }var request = new XMLHttpRequest();
request.onload = null;
request.open(HEAD, mon_adresse, false);
request.send(null);
if(!/2([0-9]+{2})/.test(request.status) || request.status != 304) { alert('Cette adresse n\\'existe pas sur le web'); }Il existe beaucoup d'autres types d'astuces, pour les maitriser, visitez cette page.
Une des applications phares de l'AJAX sur les formulaires est la suggestion de mots-clés à la volée comme sur Google Suggest (version béta). Faire ce type d'application sans serveur serait difficile, à moins de se conformer à un dictionnaire inclus au navigateur, ce qui n'existe malheureusement pas encore.
Il existe une autre rumeur sur Internet à propos des applications AJAX... Beaucoup de personnes utilisent AJAX pour la réalisation d'intranets. Je pense que l'avenir d'un site (intranet ou extranet) n'est pas de devenir une application. L'application, c'est le navigateur ! On est dans un esprit client/serveur et il se trouve que le logiciel client est un navigateur. C'est pourquoi la page web ne doit pas s'imiscer dans un rôle qui ne lui est pas prescrit !
C'est la standardisation qui doit prendre le pas. AJAX permet de faire des choses qu'on ne pouvait pas faire avant. Soit ! Profitons-en ! Mais n'oublions pas que le W3C et les navigateurs ont pour rôle de nous simplifier la vie via la standardisation et leur support.
Pour l'exemple de l'auto-complétion d'un champs, on pourrait tout à fait imaginer quelque chose de ce genre :<label for="ville">Ville</label>
<input id="ville" name="pville" autocomplete="autocomplete.php" />
Et un appel de ce type serait effectué à chaque changement du champs :HTTP1.1 GET autotcomplete.php?value=(texte-saisi)
Aujourd'hui, qu'est-ce qui nous empêche de faire savoir au W3C qu'une solution telle que celle-ci nous parait primordiale ? Même si les navigateurs ne la supporteraient pas tout de suite, rien ne nous empêche de créer une classe qui le gère pour les navigateurs qui se seraient reposés sur leurs lauriers.
Un autre exemple, je me bat pour que les formulaires du prochain (X)HTML aient un attribut type. De cette façon, le navigateur chargerai automatiquement le plugin nécessaire pour éditer le champs en XHTML, BBCode, Wiki etc... Encore une fois, il suffit de le vouloir, techniquement, c'est faisable sans peine !
Voilà une application d'AJAX que je trouve sympathique bien que ça ne soit pas nouveau et qu'on pourrait appeler ça du Javascript, tout simplement. L'utilisation de classes qui permettent de faire des effets est intéressante et mérite, je pense, que l'on s'y attarde. Attention, toutefois, à ne pas utiliser des classes trop lourdes pour n'utiliser qu'une partie infime de leurs possibilités. Privilégiez les classes qui nécessitent le moins d'ajout au niveau du HTML. Un fichier Javascript externalisé peut accéder aux éléments d'une page sans forcément ajouter des attributs à ces derniers (voir : element.addEventListener()).
Vous avez aimé la vision d'Ajax de ce tutoriel ? Alors je vous conseille, si l'envie vous dit d'aller plus loin, de lire le bouquin Bien développer pour le Web 2.0 de Christophe Porteneuve et préfacé par Tristan Nitot, le président de Mozilla Europe.
Malgré le fait qu'il devient vite orienté Prototype (une des nombreuses librairies Ajax), il a le mérite d'introduire la notion de Javascript non-obstrusif ainsi que les rudiments de support des incompatibilités d'Internet Explorer, le navigateur du passé. A noter : des exemples compatibles avec les standards et des mémos sur les technologies annexes à Ajax.
Enfin, j'ai beaucoup aimé le contrôle de saisie générique par reconnaissance automatique du contenu des champs avec l'utilisation de l'attribut id (même si class eût été un meilleur choix).
Ce tutoriel est une vision personnelle de l'utilisation d'AJAX qui n'engage que moi. A vous de vous y retrouver ou non. Je suis disponible par mail pour pousser le débat un peu plus loin ou simplement pour répondre à vos questions. En cas d'erreur, merci de me contacter. N'hésitez pas à lire mes autres tutoriels.
Bonne visite ! Nicolas FROIDURE.