Developpez.com - 4D
X

Choisissez d'abord la catégorieensuite la rubrique :


Publication d’applications AJAX - 2ème partie

Date de publication : Juillet 2006

Par Gérald Czwiklinski (Consultant Technique)
 

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

I. Introduction
II. L'objet XMLHTTPREQUEST
III. Synchrone vs asynchrone
IV. Mise en oeuvre
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 - 1ère 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 4ème 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 renvoi 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 rafraîchit 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 oeuvre


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 requete 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 requete 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 commande on peut imaginer l'affichage d'un message "Article en cours de validation".



Valid XHTML 1.1!Valid CSS!

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
Contacter le responsable de la rubrique 4D