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 :
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 ».