Client Internet Riche - Premiers pas avec AJAX

Tandis que la plupart des applications Internet se contentent d’une interface utilisateur rustique, une nouvelle génération d’applications Web est apparue récemment. Ces applications Web utilisent une interface riche proche de celle d’une application de bureau habituelle. Google (Google Mail, Google Map or Google Suggest) ou Flickr en sont quelques exemples.

Ces pages Web proposent des fonctionnalités comme la saisie prédictive, le glisser-déposer et les animations, le tout associé à une communication asynchrone avec le serveur Web. À la différence des pages Web traditionnelles, elles n’envoient pas la totalité des données entrées au serveur afin de recharger complètement la page ; seules certaines parties des données sont envoyées et remplacées dans la page existante, ce qui autorise des clients plus rapides et plus conviviaux.

Cette technique se nomme Asynchronous JavaScript And XML (AJAX) et regroupe plusieurs standards existants. Quoique les sites utilisant cette technique soient encore peu nombreux, l’idée n’est pas nouvelle. Une session du 4D Summit 2004 à la Nouvelle Orléans a traité d’Ajax. Elle était intitulée « XMLHTTPRequest » et expliquait comment utiliser Ajax pour Dashboard(1). Ceci est la première note technique à couvrir ce sujet.

Wikipedia fournit la définition suivante d’Ajax :


Asynchronous JavaScript And XML, ou Ajax (prononcé comme un mot, non comme une succession de lettres), est une technologie de développement Web se proposant de créer des applications Web interactives en combinant :

• XHTML (ou HTML) et CSS
pour marquer et présenter l’information (XML est utilisé communément, cependant tout format peut convenir, du HTML préformaté au texte brut en passant par JSON et même EBML) ;

• le Document Object Model (DOM : modèle objet du document)
manipulé par JavaScript afin de procurer un affichage dynamique et d’interagir avec l’information présentée ;

• l’objet XMLHTTPRequest
afin d’échanger des données de manière asynchrone avec le serveur Web. Dans certains frameworks Ajax ou dans certaines situations, un objet IFrame est utilisé au lieu d’un objet de XMLHttpRequest afin d’échanger des données avec le serveur Web.

La définition peut sembler très complexe et difficile. Il est beaucoup plus facile de comprendre la puissance d’Ajax au travers de quelques exemples simples. Démarrer la base exemple, sur MacOSX ou Windows, avec 4D 2004. La base reprend la démo « Video library ». Cette base de données contient approximativement 1 500 films et 1 300 acteurs.

Cliquez sur le bouton « Lancer le navigateur » pour ouvrir un navigateur et vous connecter au serveur Web du 4D local (ou entrez http://127.0.0.1:8080 pour une connexion manuelle). Notez que le serveur Web fonctionnera en mode démo si une licence 2004 serveur Web n’est pas installée. Cliquez sur le lien « Saisie prédictive : suggestion d’acteur ». Cela provoque le chargement de la page « ActorSuggest.html » :

Commencez à taper un prénom ou un nom ; essayez votre prénom ou le nom d’un de vos acteurs de cinéma favori. Pendant qu’un nom est saisi, le système va commencer à le rechercher et va montrer les correspondances possibles dans la zone de texte située au-dessous.

Ensuite essayer d’utiliser les touches flèche haut et flèche bas pour sélectionner un nom. La touche Entrée insère le nom complet. La navigation est également possible à l’aide de la souris. Si vous utilisez Firefox et que l’extension « Live HTTP Headers » (« Entêtes http en direct » en français) est installé, ouvrez le dialogue « Live HTTP Headers » et observez les entêtes pendant que des changements sont apportés au champ texte avec auto complétion.

Cette extension est très utile pour le débogage des projets Web et se révèle indispensable dans le cadre de développement Ajax.

Remarquez que lors de la saisie de texte, le navigateur envoie des requêtes invisibles vers le serveur Web de 4D en lui passant le contenu du champ texte courant. 4D répond avec la liste des valeurs possibles.

Remarquez également que le client utilise son propre cache afin d’éviter des requêtes superflues si les données sont déjà disponibles. Pour tester ceci, essayez de taper 'alc'. Il y a seulement quatre noms qui correspondent à cette chaine de caractères. Saisir 'alca' ou 'alco' ne provoquera pas l’envoi d’une nouvelle requête vers le serveur, car le résultat est déjà connu.

Impressionnés ? OK, alors essayons l’exemple suivant. Utilisez le bouton « Retour arrière » du navigateur. Remarquez qu’un seul clic suffit pour vous ramener à la page d’accueil ! Même si plusieurs recherches sont effectuées, toutes les requêtes échangées pour la fonction de saisie prédictive l’ont été sans changer l’URL de la page Web. Le navigateur pense donc se trouver toujours sur la même page.

Cliquez sur le lien « Grille dynamique » pour ouvrir l’exemple suivant :

Remarquez la zone avec défilement vertical.

La plupart du temps, la construction d’un site Web recourt à la génération de liens pour gérer la pagination des données, par exemple :

<Page précédente> 1 2 3 4 5 6 7 8 9 1 0 2 0 3 0 4 0 <Page suivante>

Cette manière de procéder est tellement répandue qu’on l’utilise généralement sans y penser.

D’un autre côté, les développeurs 4D sont familiers du concept de MODIFIER SELECTION que 4D propose depuis plus de vingt ans. De plus, depuis 4D Server version 1.0 (1992), l’interface utilisateur de 4D Client est conçue pour ne montrer que la partie visible de la sélection ce qui fait que seule la partie visible est transférée au travers du réseau. L’utilisateur peut alors faire défiler l’ascenseur pour naviguer au travers de la sélection.

Il serait plutôt intéressant de disposer d’une interface utilisateur similaire dans une application Web, non ? C’est ce que permet Ajax !

Essayez de déplacer l’ascenseur sur la page « Grille dynamique ». En fonction de la vitesse de l’ordinateur client (et du réseau), le rafraîchissement de la page sera instantané ou demandera un petit délai. Lorsque l’ascenseur est déplacé, le navigateur demande les données à 4D dynamiquement, sans modifier l’URL de la page Web. Essayez également les boutons de défilement de l’ascenseur.

En observant la communication client/serveur au travers des « HTTP Live Headers », vous noterez que l’échange de données est très optimisé. Le client demande les 70 premiers films (même si les 10 premiers seulement sont affichés). Cela permet le défilement sans requête additionnelle. Si l’ascenseur est avancé manuellement, les 70 enregistrements suivants sont demandés. S’il n’y a aucune requête pendant une seconde, les 70 enregistrements précédents sont demandés afin de permettre le défilement arrière, en utilisant le cache.

La page de grille dynamique permet également de trier sur les colonnes. Essayez de cliquer sur « Année » ou « Réalisateur ». Un deuxième clic permet de changer l’ordre de tri.

Ajax combine plusieurs technologies.

Tout d’abord, la plus importante : JavaScript. JavaScript contrôle toutes les actions côté client (navigateur). L’approche Ajax ne saurait se passer de JavaScript, ce qui représente son inconvénient majeur. Si JavaScript est désactivé, plus rien ne fonctionne. Et comme des motifs de sécurité peuvent conduire à la désactivation de JavaScript, il peut être nécessaire de prévoir une interface utilisateur alternative à Ajax.

Le Modèle Objet de Document (DOM) permet la manipulation d’objets, par exemple une cellule dans un tableau (l’exemple de grille dynamique utilise un tableau de 10 lignes ; le code JavaScript remplace le contenu des cellules du tableau pour émuler le défilement). Les feuilles de style en cascade (CSS) apportent la gestion de l’apparence, la possibilité de créer, déplacer et redimensionner des objets au vol, comme dans l’exemple de saisie prédictive.

L’objet « XMLHTTPRequest » constitue la dernière technologie de base, introduite avec Microsoft Internet Explorer 5.5 et Safari 1.2. C’est l’élément clé qui permet d’obtenir l’échange de requêtes asynchrones entre le navigateur Web et le serveur en arrière-plan, sans parasiter l’utilisateur, même sur des réseaux Internet lents.

Cette note technique ne couvrira pas en profondeur les concepts JavaScript, DOM ou CSS (à l’exception d’une courte introduction à JavaScript). Il existe de nombreux livres d’apprentissage et des sites Web dédiés à ces sujets.

JavaScript▲

<td width="103" colspan="2" class="in_label" nowrap>
  <input name="artNew1" type="text" class="inp" style="width: 50px; margin-left: 5px;" ID="Input1" onChange="setTextValue('Text1', this)">
</td>
<td width="450" class="in_label" ID="Text1">
</td>

onChange="setTextValue('Text1', this)"

$event := Evenement formulaire
Au cas ou
   : ($event := Sur données modifiées )
      setTextValue("Text1", Self)
Fin de cas

<script type="text/javascript">
function setTextValue(id, obj)
{
    document.getElementById(id).innerHTML = obj.value;
}
</script>

L’objet XMLHTTPRequest▲

var oXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
var sURL = "/csutomerIDcheck.xml?username="+custid;
oXMLHTTP.open("POST", sURL, false);
oXMLHTTP.send();
alert(oXMLHTTP.responseText);

if (window.XMLHttpRequest){
    oXMLHTTP =new XMLHttpRequest();
} else if (window.ActiveXObject){
    oXMLHTTP =new ActiveXObject("Microsoft.XMLHTTP");
}

La prochaine étape consiste à assembler le tout et à le relier à 4D. Prenons l’exemple « Ajax simple ». Cet exemple ressemble à « HTML simple », mais communique avec 4D au travers de l’objet XMLHttpRequest.

Entrez n’importe quelle chaine de caractères (pour simuler des numéros d’ordre) dans les champs texte. Dès que vous quittez le champ (c’est-à-dire par tabulation ou en cliquant sur le champ suivant) le texte entré suivi de l’heure courante est affiché. Ces données proviennent de 4D.

Ouvrez le fichier HTML « SimpleAjax.html » (dans le dossier « DossierWeb ») et le fichier « SimpleHTML.html » avec un éditeur de texte ou HTML afin de comparer les deux. Le corps HTML des deux documents est identique (à l’exception des commentaires). La différence se situe dans l’entête HTML.

Dans l’exemple « SimpleHTML.html » sans Ajax, la fonction setTextValue est définie comme suit :

function setTextValue(id, obj)
{
    document.getElementById(id).innerHTML = obj.value;
}

Tandis que la version Ajax définit deux fonctions :

function setTextValue(id, obj)
{
   var url = "/4DAction/Ajax_SimpleRequest/"+obj.value;
   var loader = new net.ContentLoader(url, ActionCompleted);
   loader.returntarget = id;
}
function ActionCompleted()
{
   document.getElementById(this.returntarget).innerHTML = this.req.responseText;
}

La première ligne de la fonction « setTextValue » crée une variable et lui assigne une URL. L’URL contient une méthode nommée « Ajax_SimpleRequest », qui sera appelée par 4DAction, et le contenu d’un champ texte comme paramètre.

La seconde ligne définit l’objet qui gérera toute la communication Ajax. Cet objet est défini dans le fichier « scripts/ContentLoader.js ». Cette ligne crée l’objet et lui passe l’URL et le nom de la fonction (« ActionCompleted ») à appeler dès que le serveur aura retourné sa réponse.

La dernière ligne ajoute une variable à l’objet afin de se rappeler l’id que nous voulons changer. La fonction « ActionCompleted » est appelée dès que le serveur répond. Les données sont stockées dans this.req.responseText.

Cet exemple fait ressortir un problème potentiel. Attendez quelques instants, puis entrez de nouveau la valeur précédente (dans le même champ texte ou un autre). Remarquez que l’heure n’est pas mise à jour.

Ceci se produit, car le navigateur Web n’a pas envoyé de requête vers le serveur Web de 4D : au lieu de cela, il a utilisé son cache. Vous pouvez le vérifier grâce à Live HTTP Headers. Si la réponse renvoyée par le navigateur demeure inchangée (comme un nom de produit), cela peut être vu comme une fonctionnalité pour réduire le trafic réseau. En revanche, si la réponse peut être différente (par exemple le nombre de produits en stock), cela représente un problème…
La section suivante explique comment remédier à cela.

Jetez un œil au code 4D de « Ajax_SimpleRequest » dans la démo (cliquez au besoin sur le bouton « Allez en mode structure » pour vous rendre… en mode structure.

$request := Sous chaine($1;2)
$answer := $request+" Heure : "+Chaine(Heure courante)
ENVOYER TEXTE HTML($answer)

Positionnez un point d’arrêt sur la première ligne. Retournez au navigateur Web et entrez quelques nouvelles valeurs dans les trois champs texte. Le débogueur 4D s’arrêtera sur le point d’arrêt. Cela simule un serveur Web « vraiment lent »; 4D ne répondra que lorsque l’exécution reprendra. Notez que le texte au-dessous du champ n’a pas changé.

Cependant, même si le serveur Web est lent (ou ne répond pas du tout), le client demeure utilisable.

L’application fonctionne, seules les réponses du serveur manquent, grâce au fonctionnement asynchrone.

Retournez dans 4D et cliquez sur le bouton « Pas de trace » (triangle vert) dans le débogueur (remarquez qu’il y a une fenêtre de débogueur pour chaque requête transmise). Les réponses devraient apparaître dans la fenêtre du navigateur. La variable « loader.returntarget » identifie l’objet auquel appartient la réponse.

Nous venons de constater que le cache du navigateur Web peut empêcher les requêtes d’être renvoyées vers le serveur. Il existe plusieurs moyens de répondre à ce problème. Une recherche Google sur « Ajax cache navigateur » affiche plusieurs discussions et pistes possibles.

La solution la plus simple est d’envoyer une requête en utilisant la méthode POST, comme pour un formulaire HTML. Dans ce cas, le navigateur n’utilise pas le cache et envoie toujours la requête au serveur Web.

Essayez « Ajax simple - utilisation de POST ». Envoyez une requête, attendez quelques instants et utilisez la même valeur. L’affichage d’une heure à jour montre que le cache du navigateur n’est pas utilisé.

Dans cet exemple, le code 4D est légèrement modifié :

TABLEAU TEXTE($name;0)
TABLEAU TEXTE($values;0)
LIRE VARIABLES FORMULAIRE WEB($name;$values)
Si (Taille tableau($values)>0)
   $request := $values{1}
   $answer := $request+" Heure : "+Chaine(Heure courante)
   ENVOYER TEXTE HTML($answer)
Sinon
   $answer := "Erreur de communication avec le serveur - pas de paramètre"
   ENVOYER TEXTE HTML($answer)
Fin de si

La commande LIRE VARIABLES FORMULAIRES est utilisée pour relire le paramètre puis on lui adjoint l’heure courante. Un autre contournement possible au problème du cache du navigateur consiste à modifier l’entête http pour changer la date d’expiration. Cette solution est employée dans les exemples plus avancés présentés dans cette note (« Saisie prédictive » et « Grille dynamique »).

Double combo box▲

<head>
  <script type="text/javascript" src="ricoscripts/prototype.js"></script>
  <script type="text/javascript" src="ricoscripts/rico.js"></script>
  <script type="text/javascript" src="ricoscripts/doubleCombo.js"></script>
  <script type="text/javascript" >
function injectComponentBehaviors() {
    var doubleComboOptions = { };
    new DoubleCombo( 'Group','Movies','/4DAction/Ajax_DoubleCombo',doubleComboOptions ) ;
}
</script>
</head>
<body onload="injectComponentBehaviors()">
  <form name="form1" autocomplete="off" id="form1">
  <p><strong><font face="Arial">Double Combo Box</font></strong></p>
  ...
  <select name="Group" id="Group">
    <option value="-1">S&eacute;lectionner une cat&eacute;gorie</option>
    ...
  </select>
  <select name="Movies" id="Movies" style="width: 200px;">
  </select>
  ...
</body>

Saisie prédictive▲

Live Grid▲

Quoiqu’Ajax soit une combinaison de concepts existants, il existait très peu de livres couvrant de manière spécifique le développement Ajax au moment de la rédaction de cette note technique. Il y a beaucoup de sites Web dédiés à ce sujet, mais comme la conception Ajax est relativement récente, les URL's changent souvent, c’est pourquoi nous ne fournissons pas de liste de ressources ici.

Le site Web d’IBM propose une introduction à Ajax, contenant des liens vers de nombreux articles :
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

Wikipedia fournit également sa liste de tutoriels :
https://en.wikipedia.org/wiki/Ajax_%28programming%29

Cette note technique utilise un objet introduit dans le chapitre 9 du livre « Ajax in Action » by Dave Crane (ISBN 1932394613), qui peut être téléchargé depuis :
http://www.manning.com/crane/
Le source JavaScript peut être chargé depuis la même page.
Ce livre contenant une introduction à JavaScript, CSS et DOM constitue une bonne ressource pour débuter le développement Ajax. Il explique en détail comment faire les choses et ensuite montre comment créer des objets plus génériques et réutilisables. Il existe également un film de 18 minutes sur le site Web montrant le contenu et les exemples du livre.

Cette note technique procure de l’information de base sur Ajax, présente les étapes initiales de la réalisation d’architecture reposant sur Ajax couplé avec 4D.

Une base exemple est fournie afin d’illustrer l’architecture Ajax.

Télécharger la base exemple.