Publication d’applications AJAX – 2me partie

Gérald Czwiklinski

Les White Papers techniques : 4D et AJAX, 2me partie. ♪

- Titre : Publication d’applications AJAX – 2me partie

- Auteur : Gérald Czwiklinski

- Parution : 1 juillet 2006

- Licence : Copyright ©4D SA. All rights reserved. The information contained in this document represents the current view of 4D SA on the issue discussed as of the date of publication. Because 4D SA must respond to changing market conditions, it should not be of the date of publication. 4D SA cannot guarantee the accuracy of any information presented after the date of publication. This white paper is for information purposes only. 4D SA MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. 4D SA 60, rue d’Alsace 92110 CLICHY

Sommaire

- I. Introduction

- II. L'objet XMLHTTPREQUEST

- III. Synchrone vs asynchrone

- IV. Mise en œuvre

- Exécution d'une requête synchrone (rappel)

- Exécution d'une requête asynchrone

- La propriété readyState

I - Introduction

Ce document fait suite à un précédent White Paper publié en mars 2006 sous le nom « Publication d'applications Ajax - 1re partie ».

Nous nous attacherons ici, spécifiquement à la gestion de requêtes Ajax asynchrones.

Pour toutes informations liminaires sur Ajax et sa mise en œuvre dans 4e Dimension, veuillez vous référez au document cité ci-dessus.

II - L'objet XMLHTTPREQUEST

XMLHttpRequest est un objet JavaScript permettant d'exécuter des requêtes HTTP. Après traitement par le serveur, cet objet reçoit une réponse HTTP sous forme d'une chaîne de caractères ou d'un objet XML manipulable par le DOM du navigateur.

L'objet XMLHttpRequest accepte deux modes de fonctionnement :

· Synchrone : le script JavaScript (et donc le navigateur) est figé en attendant la réponse du serveur ;

· Asynchrone : le script continue librement son exécution. L'internaute peut intervenir sur le navigateur.

III - Synchrone vs asynchrone

La finalité de ces deux modes est la même - appel d'une méthode sur un serveur et récupération de données résultat. Le choix de l'un ou de l'autre n'est donc pas technique, mais purement fonctionnel.

Prenons l'exemple de la gestion d'un panier de commande sur un site de commerce électronique.

En mode synchrone l'internaute ajoute un article dans le panier.

· Une requête est envoyée au serveur 4D.
· Le navigateur attend la réponse du serveur.
· Le serveur valide l'ajout.
· Le serveur renvoie le contenu du nouveau panier.
· Le navigateur rafraichit la zone d'affichage du panier.
· L'internaute continue ses « achats ».

En mode asynchrone l'internaute ajoute un article dans le panier.

· Une requête est envoyée au serveur 4D.
· Le navigateur continu son exécution.
· L'internaute continue ses « achats ».
· Le serveur valide l'ajout.
· Le serveur rappelle le navigateur et communique le contenu du nouveau panier.
· Le navigateur rafraichit la zone d'affichage du panier.

On choisira donc le mode asynchrone lors d'appels de requêtes dont on sait que la durée de traitement peut être préjudiciable à l'expérience utilisateur.

Dans notre exemple de panier, il est surement préférable d'attendre la validation de l'ajout d'article (et donc de préférer le mode synchrone). Cependant, si cet ajout conditionne des traitements longs (de vérification de disponibilité en stock ou de calcul complexe de tarifs) il peut être préférable de laisser l'internaute continuer librement son shopping (et donc de choisir un mode asynchrone).

IV - Mise en œuvre

Exécution d'une requête synchrone (rappel)

Prototype de fonction permettant d'exécuter une requête synchrone :

function Call4D(method4D)
{
// Initialisation de l'objet XMLHttpRequest
var req = HTTPRequestObject ();

if (req)
{
// Configuration du lien d'appel
req.open("GET",'/4daction/'+method4D ,false);

// Méthode de Traitement de la réponse
req.onreadystatechange = function()
{
if (req.readyState==4)
{
if(req.status!=200)
{
req =false;
}
}
}

// Envoi de la requête et des données complémentaires
req.send("");
}

return req;
}

La propriété open de l'objet XMLHttpRequest possède un paramètre booléen (deuxième paramètre) permettant d'indiquer le contexte d'exécution de la requête. False indique un fonctionnement synchrone, True un fonctionnement asynchrone.

Exemple d'utilisation depuis JavaScript :

var resultat = Call4D('NombreEnregistrements')
Alert(resultat.responseText+' records)

Exécution d'une requête asynchrone

Prototype de fonction permettant d'exécuter une requête :

function Call4D(method4D, callback)
{
// Initialisation de l'objet XMLHttpRequest
var req = HTTPRequestObject ();

if (req)
{
// Configuration du lien d'appel
req.open("GET",'/4daction/'+method4D, true);

// Méthode de Traitement de la réponse
req.onreadystatechange = callback;

// Envoi de la requête et des données complémentaires
req.send("");
}

return req;
}

La propriété onreadystatechange de l'objet XMLHttpRequest permet d'indiquer la fonction qui devra être exécutée lors de la réponse du serveur (ShowResult() dans notre exemple)

Exemple d'utilisation depuis JavaScript :

function ShowResult()
{
if (req.readyState==4)
{
if(req.status!=200)
{
alert(resultat.responseText+' records')
}
}
}
var resultat = Call4D('NombreEnregistrements', ShowResult)

La propriété readyState

La méthode de gestion du résultat (ShowResult() dans l'exemple précédent) n'est pas uniquement appelée lors de la fin de réception du résultat, mais également tout au long du traitement de cette requête.

Le type d'événement est accessible grâce à la propriété readyState de l'objet XMLHttpRequest selon les valeurs suivantes :

1 = La communication avec le serveur est établie (méthode open()) ;
2 = La requête a été envoyée (méthode send());
3 = Réception des données résultat en cours. ;
4 = Les données sont chargées.

Généralement et comme dans notre exemple, seul l'événement 4 est géré.

Le niveau de finesse offert par la gestion des événements de l'objet XmlHTTPrequest permet, par exemple, de mettre en place des messages d'informations sur le déroulement du traitement.

Dans notre exemple de panier de commandes, on peut imaginer l'affichage d'un message « Article en cours de validation ».