Dernière mise à jour :2008-10-15

informatique

« Ajax, c’est quoi ? »

AJAX n’est pas une technologie, et encore moins un logiciel. Ajax est une façon d’utiliser intelligemment certaines technologies web préexistantes.

Ajax signifie Asynchronous JavaScript + XML (XML et JavaScript Asynchrone) et propose d’utiliser les technologies web les plus répandues (XML, DOM Document Object Model, CSS, Javascript) dans le but de créer des interfaces utilisateurs plus réactives et ergonomiques.

Du point de vue historique, le terme Ajax (qui évoque pour nous le héros de l’Illiade, ami d’Achille ou, plus prosaïquement, une marque de lessive) a été pour la première fois employé par Jesse James Garrett, dans un article qui a aujourd’hui fait le tour du monde.

Du point de vue marketing, Ajax est sans conteste la plus belle réussite de “buzz technologique” depuis I2BP. L’Ajax buzz est présent partout sur les sites spécialisés dans le design ou le développement web. On en trouve aussi une forte trace sur les sites de «Social Bookamrking» (bookmarks sociaux), rois de la folksonomie, tels que del.icio.us, spurl ou les plus récent comme GoKoDo Social Bookmarking qui sont d’excellents observatoires des tendances du web (qu’elles aient un intérêt ou non).

« Euh... je suis largué, là, c’est quoi concrètement ? »

L’idée principale derrière Ajax est de proposer des interfaces plus réactives et plus riches aux utilisateurs de sites web.

Prenons un exemple : la plupart d’entre vous ont déjà eu affaire à une procédure de paiement en ligne. Le plus souvent, cette procédure est décomposée en plusieurs pages web, par exemple :

  • une pour rentrer vos coordonnées postales ;
  • une pour valider votre commande avant paiement ;
  • une pour saisir vos coordonnées bancaires ;
  • une dernière pour valider définitivement.

Pour passer d’une étape à l’autre, vous devez par exemple cliquer sur un bouton « suivant », qui chargera la page de l’étape suivante. Chacun de ses chargements entraîne donc le chargement d’une nouvelle page complète. Techniquement, cela se traduit par une requête envoyée par votre navigateur au serveur du commerçant : par exemple “j’ai bien saisi mes coordonnées postales, enregistre-les, puis envoie moi la page de validation de la commande”. Pour vous, utilisateur, cela se traduit par le chargement d’une nouvelle page.

Le même type d’utilisation avec Ajax serait de se dire « pourquoi faire 4 pages, nécessitant 4 rechargements, alors que seule une partie de la page a besoin d’être rechargée ? » (à savoir le cadre présentant le formulaire), sans recharger les logos, images et autres éléments.

Ainsi, en utilisant les technologies DOM, CSS et Javascript, on peut parfaitement imaginer que le bouton « suivant » aurait pour action, non pas de charger la page suivante, mais de masquer (grâce aux CSS) la partie du formulaire venant d’être remplie et d’afficher la suite du formulaire à l’emplacement de celui qui vient d’être masqué.

Le principal intérêt, c’est que l’affichage se fait instantanément, sans avoir besoin de recharger la page : que vous cliquiez sur « suivant » ou « précédent », l’affichage se fait sans délai.

C’est pas mal, mais ça n’a rien de révolutionnaire, surtout si on se contente d’envoyer toutes les informations d’un coup (à la fin) ce qui est peu adapté à un formulaire de paiement : par exemple, on peut avoir envie d’arrêter sa commande à l’étape 3 (si vous n’avez pas votre Carte Bleue sous la main par exemple) et revenir terminer sa commande plus tard. Si les informations des formulaires 1 et 2 n’ont pas été enregistrées, il faudra les resaisir.

« Ben alors, pourquoi en parler ? »

Là où Ajax devient intéressant, c’est qu’il remet au goût du jour une fonctionnalité méconnue de Javascript : XmlHttpRequest.

Sous ce nom barbare se cache une fonction javascript permettant de charger des données depuis une autre page (ou un fichier XML), sans pour autant quitter celle où l’on se trouve.

Ainsi, si vous vous rendez sur la page d’inscription au site GoKoDo Social Bookmarking, vous aurez un exemple concret de l’utilisation de cette fonction : Lorsque vous entrez un nom d’utlisateur, une requête est automatiquement fait au serveur pour vérifier la disponibilité de ce nom d’utilisateur et vous en êtes avisé automatiquement. Pour réaliser cette opération, la page n’utilise aucun langage "dynamique" (ASP, PHP, etc.), c’est-à-dire que tout un chacun peut l’utiliser sur son site sans avoir à ce préoccuper de la technologie qu’il y a derrière.

Autre avantage dd Ajax, les données se chargent sans avoir à quitter la page. Ainsi, dans notre exemple de paiement en ligne, on peut parfaitement imaginer un système ou les données du formulaire de l’étape 1 sont envoyées en “tâche de fond” au serveur pour traitement[via un webservice, une requête POST cachée, etc.] pendant que l’utilisateur saisit les informations de l’étape 2. A l’étape 3, l’utilisateur retrouvera, via XmlHttpRequest, des données préalablement enregistrées (ses coordonnées, les éléments de sa commande, etc.).

“C’est une révolte ? Non, Sire. C’est une révolution.”

Ajax est-elle vraiment la révolution annoncée ?

Malgré l’engouement autour d’Ajax sur les blogs “branchouilles” de la sphère de la création web, quiconque connaissant un tant soit peu le métier du développement web ne pourra parler de révolution.

Ajax n’est qu’un terme marketing pour désigner le bon sens, l’utilisabilité et l’utilisation conjointe de techniques qui sont loin d’être récentes.

« Est-ce à dire pour autant qu’il n’y a que du vent derrière Ajax ? »

Non plus. Ajax est certes un concept marketing, mais les idées exposées sont applicables et appliquées (parfois depuis des années) par certains sites, et pas des moindres (Google, ou Flickr, pour ne citer qu’eux).

Prenons un exemple, issu de Google, société particulièrement avancée dans le domaine de l’utilisabilité (n’oublions pas Yahoo et Microsoft tout de même).

Dans Google Suggest, dès que vous tapez la première lettre de votre recherche, Google vous propose instantanément la liste des termes les plus fréquemment cherchés débutant par cette lettre. Pratique, simple, utile, rapide et efficace.

Ajax a le mérite de pousser les créateurs d’interfaces web à se (re)poser la question de l’utilisabilité de leurs sites et de leurs applications.

« Et l’accessibilité alors? »

Comme il a été dit précédemment, Ajax est une technologie qui repose sur le langage javascript. JavaScript doit donc être disponible dans le navigateur du client. Il y a certains points dans les Web Content Accessibility Guidelines (WCAG) du W3C qui recommandent que les sites soient fonctionnel sans l’utilisation de javascript.

Si vous voulez que les formulaires de votre site web restes accessible à tous, en particulier si vous êtes responsable d’un site ou organisme gouvernemental, vous devriez y penser à deux fois avant de vous lancer dans du développement en Ajax.

évidemment, par contre, il existe des bonnes pratiques qui peuvent permettre de rendre Ajax et javascript accessible par exemple, l’utilisation du tag noscript, l’ajout d’un texte en début de page indiquant que Ajax est utilisé, prévenir l’utilisateur lorsqu’une mise à jour des données a été réalisée pour permettre au gens qui ont des lecteurs d’écran de comprendre qu’il y a eu modification etc…

« Chuis perdu ! Ajax, c’est bien ou pas ? »

Disons que le concept est intéressant, mais qu’il ne mérite assurément pas tout le bruit que l’on fait autour. D’abord, parce que son contour est assez mal défini. Ainsi, selon Jesse James Garret, même si vous ne faites pas appel à XmlHttpRequest, du moment que vous redonnez de la réactivité et de l’utilisabilité à vos applications web, vous pouvez considérer que vous faites “du Ajax”.

Et là, c’est le drame. En adoptant ce point de vue opportuniste, il convient de rappeler qu’on retrouve du Ajax partout sur le web, et ce depuis des années, bien avant qu’un pseudo-expert technologique ne lui donne un nom de lessive.

Marketeux Go Home : C’est le DHTML qu’on assassine.

Ajax, en dehors de remettre au goût du jour la fonction XmlHttpRequest, n’est en définitive qu’une réutilisation du concept de DHTML (Dynamic HTML). Evidemment, « Ajax », ça sonne beaucoup mieux que DHTML, XmlHttpRequest ou SOAP.

En clair : "Ajax, c’est vendeur, coco !"

Et c’est là que le bât blesse : nous avons vu que le concept derrière Ajax est plein de bon sens (mettre en avant l’utilisabilité), mais aussi qu’il ne s’agissait que d’un "récipient technologique vide" dans lequel on peut mettre à peu près tout et n’importe quoi. Il est indubitable que dans les mois (les années ?) qui viennent, les créateurs d’applications web vont “manger” du Ajax à toutes les sauces, moins sous la pression des utilisateurs que sous celle des prescripteurs financiers : clients (et oui, c’est rarement l’utilisateur final qui établit la liste des spécifications fonctionnelles d’une application), employeurs (agences web), service marketing (vous savez, les gars du 3ème étage qui passent leur temps à la machine à café), etc.

Le risque est donc de vouloir du Ajax à tout prix (“Oui, c’est plus cher, mais c’est compatible Ajax, mon bon m’sieur”) ou de mettre du Ajax là où ça n’a pas d’intérêt pour l’utilisateur final, et donc de passer à côté de l’objectif initial.

Sur ce coup-là, l’auteur de ces lignes ne vous cache pas son septicisme, ni sa crainte de voir ressurgir les vieux démons que l’on croyait définitivement entérrés de la folle période de la Net Economie. On vous vendait à des prix prohibitifs toutes sortes de tendances, certaines fricotant dangeureusement avec le ridicule (“Avoir les lettres « oo » dans votre nom de domaine quadruplera votre chiffre d’affaires” ).

Attendez-vous donc à voir du Ajax dans pas mal d’applications web, y compris des logiciels libres. On va vous vendre des Ajaxeries tout en vous faisant culpabiliser : “Mais comment avez-vous pu vivre sans Ajax?”. Les applications web se partageant alors en celles compatibles Ajax... et les autres. Cependant, gardez votre esprit critique : ces améliorations ergonomiques ne sont pas dues à une technologie nommée Ajax, mais bien à la volonté de remettre l’utilisateur au coeur de l’interface, en utilisant intelligemment des technologies presque aussi vieilles que le web.

« Si vous croyez en Ajax, si vous voulez que cela soit un succès, parlez d’utilisabilité pas de technologie. »

«Et vous avez un exemple de code avec tout ça?»

En terminant, voici pour les amateurs de coding un exemple de programme Ajax :

Nous allons faire un programme de vérification de disponibilité d'un pseudo lors de l'inscription sur un site.

Pour réaliser ce programme nous avons besoin de :

  • Un script php pour vérifier dans une base de données si le pseudo est disponible
  • Un script javascript pour intéroger le script PHP a chaque frappe dans le champ de formulaire et informer l'utilisateur que son pseudo est disponible ou non.

Tout ca réuni pourra être appelé du Ajax :-)

Création du script PHP

Nous allons supposé que le script PHP en question sera contenu dans un fichier nommé 1.php.

Voici le code. Vous noterez que celui-ci retourne 0 si le pseudo n'est pas disponible et 1 si il l'est.

Listing 1.0 Script PHP pour exemple AJAX
<?php
mysql_connect("ip de votre serveur","user","password");
mysql_select_db("nom de votre base");

$result = mysql_query("SELECT pseudo FROM members WHERE pseudo = '".$_GET["pseudo"]."'");

if (mysql_num_rows($result) > 0)
{
echo "0";
}
else
{
echo "1";
}

?>

Création du formulaire

Nous allons supposer que celui-ci sera contenu dans un fichier nommé 2.php

Notez que ici, l'extenssion php est facultative. Nous aurions pu noter 2.htm puisqu'il n'y aura aucun code PHP dans cette page.

Listing 2.0 Formulaire HTML pour exemple AJAX
<html>
<head>
<title>Exemple de script AJAX</title>
</head>
<body>
<form>
<div id="message"></div>
<input type="text" name="pseudo" onKeyUp="verif(this.value);" />
</form>
</body>
</html>

Vous remarquerez que c'est l'événement onKeyUp qui déclenche la vérification en passant le pseudo entré par l'utilisateur à la fonction verif.

Ajout du script javascript (dernier ingrédient de notre AJAX)

Pour terminer notre petit programme AJAX, il ne reste plus qu'à inclure le code javascript suivant dans la balise head du fichier 2.php.

Listing 3.0 Script JavaScript pour exemple AJAX
<script language="javascript" type="text/javascript">

function verif(pseudo)
{
// supposons que le pseudo doit avoir au minimum 5 caractères.
 if (pseudo.length >= 5)
 {
    if (message = connectURL('url de votre script/1.php?pseudo='+pseudo))
    {
      if (message == '1')
      {
      document.getElementById('message').innerHTML = 'Ce pseudo est disponible.';
      }
      else
      {
      document.getElementById('message').innerHTML = 'Ce pseudo n\'est pas disponible.';
      }
    }
    else
    {
    document.getElementById('message').innerHTML = '';
    }
 }

}

function connectURL(/internet/url.html)
{
// le navigateur est Firefox ou IE
if (window.XMLHttpRequest)
objXHR = new XMLHttpRequest();
else
{
if (window.ActiveXObject)
objXHR = new ActiveXObject("Microsoft.XMLHTTP");
}
else
return false;

objXHR.open("GET",url,false);
objXHR.send(null);

if (objXHR.readyState == 4)
return objXHR.responseText;
else
return false;
}

</script>

Auteur : Pyg - Ajouts fais par Sylvain Bilodeau

Copie autorisée

Version originale : Creative Commons BY-SA

Date de mise en ligne : 2006-05-26

AJAX - Article et exemple de code

Excellent article sur AJAX. Vous résumez bien ce qu'est cette technologie. Je comprends enfin tout à propos d'AJAX. Vite, je vais programmer :-)

2008-04-15 00:00:00