Premier vrai et long article technique de ce blog…
Préambule
On trouve aujourd’hui beaucoup de références sur le net sur AJAX ( XmlHTTPRequest en réalité ) mais peu d’éléments sur l’intégration de AJAX sur le framework Struts. Concernant les ressources francaises sur le sujet, c’est quasi inexistant en recherche sur Google. Je me suis donc décidé à écrire ce petit article technique. Attention, cet article n’explique pas réellement le fonctionnement de la technologie AJAX mais plutôt de son intégration avec le framework Struts.
Concept
Pour rappeler très briévement la technologie AJAX, il s’agit de permettre au navigateur d’effectuer des requêtes HTTP sur le serveur en Javascript et de mettre à jour dynamiquement le contenu de la page (via DHTML) sans recharger toute la fenêtre.
Rappel des étapes :
- Création d’un objet XmlHttpRequest (sous Javascript)
- Paramétrage de cet objet (url et méthode de callback)
- Exécution de la requête
- Coté serveur, on reçoit la requête que l’on traite puis on renvoie le résultat
- Le retour est traité dans la méthode callback préalablement définie
Pour plus d’informations, il existe de nombreux sites en parlant mieux que moi…
Intégration avec Struts
Comme on peut le voir dans les étapes ci-dessus, l’intégration avec Struts ne se situe que lors de l’étape 4 puisque c’est la seule étape qui fait intervenir le serveur. Afin d’implémenter la réception des appels AJAX sur le serveur, plusieurs solutions sont possibles :
- Ecrire des servlets spécifiques
- Utiliser un framework comme DWR
- Ecrire des actions Struts « standard » dédiés
La 1ère solution étant à proscrire et la deuxième impliquant l’utilisation d’un framework tiers, la solution d’actions dédiées est parfaitement adaptée pour des petites extensions sur des projets existants comme cela est souvent le cas avec l’utilisation de AJAX.
Mon exemple sera l’implémentation d’une page donnant l’heure du serveur. C’est un exemple trivial mais il permet de mettre en place la chaîne complète, ce qui est l’intérêt de cet article.
Etape 1 : Ecriture de la page HTML
On commence par la page HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test AJAX et Struts</title>
<script type="text/javascript">
<!- - Ici on placera le code Javascript -->
</script>
</head>
<body>
<div id="form">
<form action="#">
<input type="button" name="Envoyer" onclick="appelAjaxExemple();" value="Je veux l'heure du serveur" />
</form>
</div>
<hr />
<div id="resultat"> </div>
</body>
</html>
La page est la plus simple possible avec un simple bouton qui appelle la méthode Javascript et un DIV de résultat.
Ensuite on écrit le Javascript suivant entre les balises head :
// appelé dans la page function appelAjaxExemple()
{
ajaxCallRemotePage('ajaxAction.do');
}
Cette méthode est celle appelée par le bouton du formulaire. Il se contente d’appeler la méthode de traitement avec en paramètre l’action Struts qui traitera l’appel Asynchrone (voir plus bas)
// Methode d'appel a une page en XmlHttpRequest
function ajaxCallRemotePage(url)
{
if (window.XMLHttpRequest)
{
// Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);
}
else if (window.ActiveXObject)
{
// IE
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send();
}
else {
return; // Navigateur non compatible
}
}
Il s’agit de l’implémentation technique de la couche XmlHTTPRequest, on peut voir que le code est écrit pour gérer les navigateurs IE et les autres (dont Firefox). La requête sur le serveur est effectuée au moment du send(). On peut voir aussi que la méthode de callback processStateChange est défini. C’est la méthode qui est appelée lorsque l’état de la requête bouge. Voici son code :
// Methode private qui traite le retour de l'appel de "ajaxCallRemotePage"
function processStateChange()
{
if (req.readyState == 4)
{ // Complete
if (req.status == 200)
{ // OK response
// Pour le debug
alert("ok:"+req.responseText);
} else {
// Pour le debug
alert("Problem: " + req.statusText);
alert("status: " + req.status);
}
} }
L’algorithme est relativement simple. Si l’état de la requête est à 4 (terminée), on vérifie que le serveur nous a renvoyé un code HTTP de 200 qui correspond à un OK serveur. Alors dans ce cas, on affiche le résultat retourné par le serveur sinon on affiche l’erreur…
Etape 2 : configuration de Struts
Je considère dans ce chapitre que Struts est déjà correctement installé. Si vous avez besoin d’un projet vide, vous pouvez utiliser le Struts-Blank.
On commence par déclarer dans le fichier struts-config, une nouvelle action correspondant à notre appel depuis le javascript :
<action-mappings>
<!- - Declaration de notre action Struts -->
<action path="/ajaxAction" type="com.jc.AjaxAction" />
</action-mappings>
Le contenu de l’action mapping est relativement simple puisque on se contente d’appeler une classe Java qui effectuera le traitement serveur. On peut remarquer qu’il n’est pas nécéssaire de préciser une page jsp de résultat puisque c’est le code java qui écrit dans l’objet response.
Etape 3 : Ecriture de l’action Struts
Le code de l’action Struts est le suivant :
package com.jc; import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class AjaxAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
{
String valeur = "test";
// Write the text to response
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println(valeur);
out.flush();
return null;
}
}
Le code est relativement simple, dans le sens où il se contente d’écrire dans le flux de sortie de la requête HTTP. On peut remarquer que le return est null, car on ne suit pas la logique des mappings Struts et que le Javascript lira directement le flux provenant du serveur.
Etape 4 : Le test
En ouvrant le navigateur sur la page de test on tombe sur cet écran :
Après un clic sur le bouton, la popup d’alert s’affiche avec le résultat retourné par le serveur :
Parfait, maintenant on implémente un peu de fonctionnel…
Etape 5 : Implémentation de l’affichage de l’heure du serveur
Maintenant que l’aller retour serveur fonctionne, on peut ajouter un peu de code applicatif pour montrer l’intérêt de ce framework. Dans notre exemple, au clic sur le bouton, le serveur va retourner son heure système qui sera affiché sur la page.
La première modification concerne le code de l’action Java :
A la place de :
String valeur = "test";
Récupérons plutôt l’heure système (attention aux imports) :
Date date = GregorianCalendar.getInstance().getTime();
String valeur = SimpleDateFormat.getDateTimeInstance().format(date);
Il ne reste plus qu’à modifier le javascript de la page : Dans le traitement du résultat :
if (req.status == 200)
{ // OK response
// Pour le debug
alert("ok:"+req.responseText);
On remplace l’alert par :
// alert("ok:"+req.responseText);
var d = document.getElementById('resultat');
d.innerHTML = req.responseText;
résultat sur la page :
conclusion
Cette petite introduction sera j’espère pratique pour les personnes souhaitant d’intégrer rapidement des requêtes asynchrones sur des applications déjà existantes. Mais pour une intégration plus poussée, l’utilisation de frameworks dédiés sera un gros plus.
Source du projet développé sous WTP 1.0 : AjaxProject.zip
bugs possibles
- Attention à l’url de destination passé à la méthode Javascript dans un environnement Struts. Une solution est de récupérer dans le Javascript la base de l’application avec un code comme celui-ci :
var path = window.location.pathname; path = path.substring( 0, path.length - "actionCourante.do".length );
- J’ai remarqué également un autre problème très génant avec le cache d’IE5/IE6 sous Windows 2000 (qui bizarrement fonctionnait sous IE6 – Windows XP). En fait, le navigateur mettait en cache les appels depuis XmlHTTPRequest : Résultat, plus rien ne se passait si on appelait 2x la même URL. Pour corriger ce problème, j’ai ajouté dans les paramètres d’appel :
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
Références intéressantes
Commentaires récents