Client Internet Riche - Premiers pas avec AJAX

La page est créée Estelle Fernandez

Science

Français

Like
Partager
Intégrer
Plein écran
Diapositives
Télécharger HTML
Télécharger PDF
Abus

←

CONTINUER À LIRE

→

Transcription du contenu de la page

Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous

Client Internet Riche - Premiers pas avec AJAX
Par
Thomas MAUL, 4D Germany
Note technique 4D-200602-04-FR
Version 1
Date 1 février 2006

Résumé
Traduction de l'anglais faite par Christophe Keromen (Cabinet de Consultants CKTI)
Cette note technique fournit de l’information de base sur Ajax, présente les étapes initiales de la réalisation
d’architecture reposant sur Ajax couplé avec 4D. Ajax suppose un usage intensif d’XML. Les fonctionnalités
puissantes dans ce domaine de la version 2004 de 4D permettent un développement rapide de solutions Ajax.
Une base exemple est fournie afin d’illustrer l’architecture Ajax.

4D Notes techniques
Copyright © 1985-2006 4D SAS - Tous droits réservés
Tous les efforts ont été faits pour que le contenu de cette note technique présente le maximum de fiabilité possible.
Néanmoins, les différents éléments composant cette note technique, et le cas échéant, le code, sont fournis sans garantie d'aucune sorte.
L'auteur et 4D S.A. déclinent donc toute responsabilité quant à l'utilisation qui pourrait être faite de ces éléments, tant à l'égard de leurs
utilisateurs que des tiers.

Les informations contenues dans ce document peuvent faire l'objet de modifications sans préavis et ne sauraient en aucune manière engager 4D
SA. La fourniture du logiciel décrit dans ce document est régie par un octroi de licence dont les termes sont précisés par ailleurs dans la licence
électronique figurant sur le support du Logiciel et de la Documentation afférente. Le logiciel et sa documentation ne peuvent être utilisés, copiés
ou reproduits sur quelque support que ce soit et de quelque manière que ce soit, que conformément aux termes de cette licence.
Aucune partie de ce document ne peut être reproduite ou recopiée de quelque manière que ce soit, électronique ou mécanique, y compris par
photocopie, enregistrement, archivage ou tout autre procédé de stockage, de traitement et de récupération d'informations, pour d'autres buts que
l'usage personnel de l'acheteur, et ce exclusivement aux conditions contractuelles, sans la permission explicite de 4D SA.
4D, 4D Calc, 4D Draw, 4D Write, 4D Insider, 4ème Dimension ®, 4D Server, 4D Compiler ainsi que les logos 4e Dimension, sont des marques
enregistrées de 4D SA.
Windows,Windows NT,Win 32s et Microsoft sont des marques enregistrées de Microsoft Corporation.
Apple, Macintosh, Power Macintosh, LaserWriter, ImageWriter, QuickTime sont des marques enregistrées ou des noms commerciaux de Apple
Computer,Inc.
Mac2Win Software Copyright © 1990-2002 est un produit de Altura Software,Inc.
4D Write contient des éléments de "MacLink Plus file translation", un produit de DataViz, Inc,55 Corporate drive,Trumbull,CT,USA.
XTND Copyright 1992-2002 © 4D SA. Tous droits réservés.
XTND Technology Copyright 1989-2002 © Claris Corporation.. Tous droits réservés ACROBAT © Copyright 1987-2002, Secret Commercial
Adobe Systems Inc.Tous droits réservés. ACROBAT est une marque enregistrée d'Adobe Systems Inc.
Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires
respectifs.

1 / 14

Client Internet Riche - Premiers pas avec AJAX

Résumé

Cette note technique fournit de l’information de base sur Ajax, présente les étapes initiales de la réalisation
d’architecture reposant sur Ajax couplé avec 4D. Ajax suppose un usage intensif d’XML. Les fonctionnalités
puissantes dans ce domaine de la version 2004 de 4D permettent un développement rapide de solutions Ajax.

Introduction

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 (http://flickr.com/) 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. A 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 et XML (A J A X) 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 (la technologie de widget d’Apple
apparue avec Tiger, NdT). Ceci est la première note technique à couvrir ce sujet.

Note du traducteur : un livre blanc rédigé par Gérald Czwiklinski (4D S.A) est également disponible.
http://www.4d.fr/support/pdf/docs/WP_Ajax.pdf

Ce même document est également disponible sur le site de Developpez.com

http://4d.developpez.com/ajax/

Ajax, qu'est-ce que c'est ?

Wikipedia (http://fr.wikipedia.org/wiki/Ajax) 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, de l’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 ;
                                                     2 / 14

• 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 d’XMLHttpRequest afin d’échanger des données avec le serveur Web.

Quelques exemples...

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.

Note : 4D a besoin de charger les index dans le cache pour optimiser la vitesse de recherche. En
conséquence, il faudra exécuter une ou deux recherches pour obtenir les performances maximales.

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" (« En-tê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.
Remarque : vous pouvez télécharger l’extension "Live HTTP Headers" gratuitement ici :
http://livehttpheaders.mozdev.org

Cette extension est très utile pour le déboguage 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.

3 / 14

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 chaîne 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 :

1 2 3 4 5 6 7 8 9 1 0 2 0 3 0 4 0

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.

4 / 14

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.

Comment fonctionne Ajax ?

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

Vous pouvez passer cette section si vous possédez une expérience avec DOM et JavaScript.

JavaScript est un langage simple de scripting. Il n'a de rapport avec Java qu'au niveau de la syntaxe (et même
à ce niveau il n'est pas aussi strict). Pour plus d'information, reportez-vous au Wikipedia :
http://en.wikipedia.org/wiki/JavaScript

Cette page contient les étapes de base pour l'apprentissage de JavaScript et une collection de liens vers des
tutoriels, guides, etc.

La démo propose un exemple JavaScript simple. Utilisez le bouton retour arrière du navigateur Web (ou
reconnectez-vous sur http://127.0.0.1:8080, en supposant que la démo soit en cours d'exécution) et cliquez
sur "HTML simple". Dans les champs texte entrez des valeurs. Dès que vous quittez un champ, la valeur
saisie est recopiée dans un autre champ texte (non saisissable). Ce comportement est très similaire à celui
obtenu par l'événement "Sur données modifiées" dans 4D.

5 / 14

Effectuez un clic droit sur la page Web et visualisez le source (ou ouvrez le fichier "SimpleHTML.html" du
dossier " DossierWeb" avec un éditeur de texte). Le code HTML (section body) contient un formulaire et, à
l'intérieur du formulaire, un tableau. Le tableau contient quatre rangées, une pour l'entête et trois pour les
champs texte. Chaque rangée contient deux cellules. Voici le code HTML des cellules :

Remarquez que chaque cellule possède un attribut ID. Les IDs sont l'élément clé de ce concept car ils
permettent depuis JavaScript un accès direct à n'importe quel objet de la page.
Outre l'information sur l'aspect visuel du champ texte, la première cellule contient également du code :

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

En 4D cela pourrait être équivalent à l'appel d'une méthode setTextValue sur l'événement Sur données
modifiées de la méthode objet :

       $event:=Evenement formulaire

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

       Fin de cas

La méthode JavaScript reçoit deux paramètres, une constante de type texte avec le contenu "Text1" et un
pointeur sur l'objet courant (qui s'appelle "Self" en 4D et "this" en JavaScript).
Le premier paramètre "Text1" est l'ID de la cellule à modifier. Dans l'entête de la page HTML on trouve la
définition de la méthode JavaScript (appelée fonction dans ce langage).

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

Le corps de la fonction ne comprend qu'une ligne. Il accède au document (souvenez-vous DOM = Document
Object Model) et à l'intérieur du document il cherche l'élément correspondant à l'ID. Ce concept permet
l'accès à tous les objets existants dans le document à partir du moment où ils possèdent un ID unique.
L'attribut "innerHTML" permet d'attribuer toute valeur à un objet, y compris du code HTML. Le second
paramètre "obj" est une sorte de pointeur sur l'objet appelant, qui contient la nouvelle valeur.

Assurez-vous de bien comprendre ces prémisses JavaScript avant de poursuivre les sections suivantes. En
l'absence d'une compréhension des bases de JavaScript, la suite peut se révéler difficile à comprendre.
                                                  6 / 14

Le débogage des problèmes JavaScript peut se révéler difficile. Par exemple, souvent le navigateur semble
ne rien faire. Il s'agit là de la réaction habituelle à une erreur de programmation ; l'exécution s'arrête
simplement. Firefox propose un outil nommé "Console JavaScript" qui liste les erreurs d'exécution. Cela se
révèle une aide précieuse pendant la mise au point. Jetez également un oeil au Venkman JavaScript
Debugger, un débogueur gratuit qui permet de tracer le JavaScript et de lire/écrire des variables :
http://www.mozilla.org/projects/venkman/

Note du Traducteur :
L'add-on Web Developer est également à considérer : https://addons.mozilla.org/firefox/60/

L'objet XMLHTTPRequest

L'objet XMLHTTPRequest a été développé à l'origine par Microsoft. Il est disponible depuis la version 5.0
d'Internet Explorer sous forme d'objet ActiveX accessible via JScript, VBScript ou autres langages de
scripting supportés par le navigateur.

Les contributeurs Mozilla ont réalisé une version native compatible dans Mozilla 1.0. Apple a suivi avec la
version 1.2 de Safari et Opera Software avec Opera 8.0. Cet objet permet d'effectuer des requêtes vers un
serveur Web sans soumettre et recharger l'intégralité de la page. Quoique les données soient souvent
structurées en XML, il peut s'agir de n'importe quelles données en texte.

Ce sujet est exploré avec plus de détail dans les notes sur la session du 4D Summit 2004, pages 377-381.

Une session minimale XMLHTTRequest ressemble à ceci :

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

Ce code minimaliste utilise un objet Microsoft, ce qui peut contrarier son fonctionnement dans les
navigateurs non Internet Explorer.

Mozilla utilise un autre objet, de sorte qu'il nous faut tester quel objet est disponible, de manière à
fonctionner sur n'importe quel navigateur :

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

Le troisième paramètre de la méthode "XMLHTTPRequest.open" est le booléen async ("false" dans le code
ci-dessus) qui indique au navigateur d'attendre ou non que le serveur ait répondu avant de poursuivre
l'exécution du code. En vue d'un fonctionnement en mode asynchrone, il faudra rajouter du code pour gérer
les réponses du serveur, nous verrons cet aspect plus loin.

7 / 14

Gérer les erreurs en mode asynchrone n'est pas une mince affaire. La bonne nouvelle réside dans le fait que
de nombreux exemples existent déjà. Tapez simplement "XMLHttpRequest" dans Google. Le site Web
d'Apple contient un exemple (avec le support de Microsoft Internet Explorer sur Windows) :
http://developer.apple.com/internet/webcontent/xmlhttpreq.html

Pour développer des applications Web dynamiques plus complexes, il est utile de recourir à un framework
JavaScript. Ces frameworks comme "Prototype" ou "Rico", contiennent déjà le code pour la gestion de
l'objet XMLHttpRequest. Reportez-vous aux exemples "Saisie prédictive" ou "Grille dynamique" pour plus
d'information.

Le client riche Internet.

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 chaîne 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;
      }

                                                      8 / 14

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 oeil 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.
9 / 14

Le cache du navigateur Web

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 HTMLL($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").

Exemples en profondeur...

Double combo box

Les exemples "Ajax simples" sont très simples. Cependant, ils mettent en oeuvre les fonctionnalités basiques
de la conception Ajax et démontrent une expérience utilisateur très nettement améliorée.

Le prochain exemple, "Double Combo Box" demande plus de code JavaScript et montre comment utiliser du
code générique.

Cet exemple s'inspire du chapitre 9 du livre "Ajax in Action", chapitre disponible en libre téléchargement ici :
http://www.manning.com/crane/

Ce chapitre du livre explique en détail comment bâtir une combo box qui modifie le contenu d'une seconde
combo box. Imaginez un système de location vidéos en ligne. La première combo box sélectionne la
10 / 14

catégorie du film. La seconde liste les films disponibles dans cette catégorie après avoir demandé au serveur
de vérifier la disponibilité.

Sélectionnez l'exemple "Double combo box" dans le navigateur Web. Notez que la seconde combo box est
vide. Utilisez la première pour sélectionnez une catégorie, la seconde combo box affiche les films
disponibles dans cette catégorie.

Cet exemple montre également un problème potentiel. Sélectionnez la catégorie "Action" et immédiatement
ouvrez la seconde combo box. L'ancien contenu sera affiché. Si la combo box est maintenue ouverte, elle
affichera les valeurs correctes au bout de 2 à 3 secondes. Ce délai survient car il y a presque 500 films dans
la catégorie "Action" et cela prend un certain temps à JavaScript pour construire la combo box
correspondante. Voilà donc un exemple d'un mauvais usage d'une combo box (une list box serait préférable)
mais cela n'empêche pas d'apprécier la puissance du code asynchrone.

Le code 4D de cet exemple est très similaire à celui de l'exemple précédent. Nous appelons de nouveau
LIRE VARIABLES FORMULAIRES pour relire les paramètres. En raison de la présence de plusieurs
items dans la réponse, nous utilisons XML pour envoyer les données. Remarquez cependant que, quoique
"x" dans Ajax représente l'XML, c'est la première fois que nous utilisons XML dans ces exemples. Comme
nous l'avons mentionné plus tôt, il est possible de répondre avec n'importe quel type de données textuelles ;
texte brut, HTML, XML, images encodées, etc. Les commandes DOM de 4D 2004 sont mises à contribution
pour préparer le flux XML.

Voici l'HTML de l'exemple "Double combo box" :

function injectComponentBehaviors() {
var doubleComboOptions = { };
new DoubleCombo( 'Group','Movies','/4DAction/Ajax_DoubleCombo',doubleComboOptions ) ;
}

Double Combo Box
...

Sélectionner une catégorie
...

...

Le code JavaScript est basé sur les frameworks mentionnés au préalable :

11 / 14

Regardez le corps HTML. Remarquez que les deux combos boxes (introduites par la balise ne
contiennent aucun JavaScript ! Cela facilite l'intégration dans des pages Web existantes puisque aucune
modification du code HTML n'est requise. Le code de l'entête "injecte" la fonctionnalité. L'objet
DoubleCombo (défini dans la fonction injectComponentBehaviors) effectue la plus grande partie du travail ;
le premier paramètre règle la combo box maîtresse ; le second paramètre gère la combo box esclave (les
objets sont identifiés grâce à l'attribut id); le troisième paramètre représente l'URL à appeler; le dernier
paramètre permet de régler des options qui ne sont pas nécessaires ici.

Ce concept rend l'amélioration des pages Web existantes très facile. Pour des informations détaillées sur le
code JavaScript, lisez le chapitre 9 de "Ajax in Action". Remarquez que quelques modifications mineures
ont été apportées à "DoubleCombo.js" afin de le rendre compatible avec Safari.

Saisie prédictive

La structure de cet exemple a déjà été expliquée. Regardez le code 4D.

La méthode 4D AjaxActorSuggest gère la partie serveur. Le code est très similaire à l'exemple de la combo
box. Les paramètres sont récupérés au moyen de la commande LIRE VARIABLES FORMULAIRES et la
réponse est construite sous forme de structure XML. Le code JavaScript utilise les mêmes concepts que pour
"Double combo box". Une fonction générique injecte la fonctionnalité dans le code HTML. Regardez
"ActorSuggest.html", c'est très semblable à "DoubleCombo.shtml".

Note du traducteur : ne fonctionne cependant pas avec Safari 1.3.2.

Live Grid

Voici l'exemple le plus complexe de cette note technique. Il met à contribution le framework openRico,
lequel repose lui-même sur le framework Prototype. Pour explorer plus en détail le framework OpenRico
rendez-vous à cette adresse :
http://ww.openrico.org

Consultez en particulier les exemples montrant les fonctionnalités graphiques, comme les animations. Vous
y trouverez également un PDF expliquant comment utiliser la fonction LiveGrid (grille dynamique).

Les principales étapes sont :

• La construction d'un tableau HTML, assurez-vous d'utiliser un ID de tableau afin d'identifier le tableau
et des déclarations pour organiser le tableau (conteneur, entête, corps). Le tableau peut contenir
des données pour les premières lignes, mais peut également être vide. Il doit contenir au minimum une
ligne de plus que la dernière affichée.

• Sur Onload appelez Rico.LiveGrid pour construire la fonctionnalité de grille dynamique, passez le nom
du tableau, le nombre de lignes et l'URL du serveur. Cet objet redéfinira le tableau au nombre correct
de lignes, demandera les données au serveur, construira un cache interne, créera un ascenseur, la
fonction de tri sur entête... en fait à peu près tout le travail nécessaire !

• Créer une méthode 4D pour la gestion côté serveur.

12 / 14

L'objet Rico.liveGrid permet d'appeler l'inclusion de méthode à chaque défilement, ce qui autorise la
modification d'autres objets dans la page. L'exemple "Grille dynamique" en donne une illustration avec
l'affichage d'un entête donnant la position courante du défilement et le tri courant (objet et ordre).

La méthode 4D Ajax_LiveGrid effectue la gestion côté serveur. Cette méthode est très semblable aux
exemples "Combo Box" et "Saisie prédictive" : elle relit les paramètres et construit une réponse XML.

Pour voir le contenu de la réponse XML de la grille dynamique, saisissez cette URL dans le navigateur Web :

http://127.0.0.1:8080/4DAction/Ajax_LiveGrid?id=data_grid&page_size=70&offset=400&_

Remarquez que la réponse XML contient du code HTML. Il s'agit de la partie pré-formatée qui sera insérée
dans le tableau HTML.

Note du traducteur : ne fonctionne cependant pas avec Safari 1.3.2

Ressources Ajax

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.

Note du traducteur : au moment de la traduction, les choses ont déjà nettement évoluées et une simple
recherche sur Amazon par exemple retourne une liste de plusieurs ouvrages en anglais. Quant au français, si
l'on filtre les pièces de Sophocle et l'épopée du mythique Ajax d'Amsterdam des années 70, on ne retrouve
pour l'instant que des prévisions de sortie qui se comptent sur les doigts de la main.

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 :
http://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.
Note du traducteur : ce livre vient d'être traduit sous le titre "AJAX en pratique" chez Pearson Education,
ISBN : 2744020605.

Note du traducteur : Le numéro 85 du mensuel "Programmez" consacre un dossier à "Ajax : le Web
nouvelle génération", avec un comparatif des différents frameworks.
13 / 14

Conclusion

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.

                                                    14 / 14

Vous pouvez aussi lire