Le framework Grails contient dans sa librairie de tags plusieurs éléments réservés au support d'AJAX. Nous donnons dans cet article, des exemples d'utilisation des éléments g:remoteFonction et g:remoteLink, et montrons comment appliquer des effets visuels dans la mise à jour partielle d'une page web avec la librairie scripta.culo.us.

En effet, c'est ce que permet AJAX, qui signifie Asynchronous JavaScript and XML : l'exécution de code JavaScript depuis une page web, qui soumet une requête http à l'application web dont est issue la page, de manière asynchrone ; lorsque l'application répond (si cela est prévu) en renvoyant un document qui est habituellement codé en XML, un élément de la page web précis est mis à jour avec ces données.
A partir d'une page web, on peut ainsi déclencher des actions côté serveur, en transmettant si besoin des paramètres, et en retour, permettre une mise à jour partielle de cette page web.

Grails intègre plusieurs librairies AJAX tels que Prototype ou Dojo, de manière transparente dans votre application ; le choix de la librairie s'effectuant au travers de l'élément g:javascript, dont l'attribut library définit la librairie AJAX à utiliser.
Ainsi, pour utiliser AJAX avec Prototype, on utilisera l'élément :

Invoquer une action Grails en AJAX

En ayant déclaré le type de librairie AJAX à utiliser, vous pouvez alors saisir dans une page gsp, l'un des éléments de la librairie de tags réservés au support d'AJAX, afin de permettre l'invocation d'une action d'un contrôleur Grails, de manière asynchrone.
Voici un exemple de page gsp utilisant l'élément g:remoteLink qui génère un lien HTML, avec le code JavaScript réalisant un appel AJAX au click sur ce lien :

Les attributs controller et action de l'élément g:remoteLink indiquent quelle est l'action à invoquer, ainsi que le contrôleur auquel appartient cette action : ici, l'action genererContenu du contrôleur Grails TestController est exécutée de manière asynchrone au moment où l'on clique sur le lien.
Par ailleurs, l'attribut update désigne l'id de l'élément DOM de la page HTML à mettre à jour avec la valeur retournée par l'action en cas de succès.
Dans notre exemple, l'élément div d'id elm verra son contenu affecté avec la valeur renvoyée par l'action genererContenu.
Dans le code de l'action, on pourra utiliser la méthode héritée render du contrôleur, afin de générer une réponse adaptée à la requête AJAX.

La classe Groovy du contrôleur TestController ressemble à ceci :

Ainsi, avec le code ci-dessus, un click sur lien "Test" déclenche l'invocation, via AJAX, de l'action genererContenu, puis l'affichage dans la page web du message "Salut !", au niveau de la balise d'id elm.

Le code de l'action genererContenu est ici volontairement simple ; vous pouvez bien sûr utiliser l'une des variations de la méthode render.
Dans l'exemple de code ci-dessous, nous utilisons la méthode render avec un builder, pour générer une liste HTML :

Proche de l'élément g:remoteLink, l'élement g:remoteFunction produit également du code d'appel AJAX, mais sans générer de lien HTML.
A titre d'exemple, nous pouvons remplacer le lien de notre page gsp, par un bouton et l'utilisation de l'élément g:remoteFunction :

Ajouter des effets spectaculaires

Fournie avec le framework Grails, la librairie JavaScript scripta.culo.us permet, entre autres, d'appliquer des effets visuels dans vos pages web.
Pour découvrir les effets disponibles, naviguez vers la page de démonstration Combination Effects Demo du site web de script.aculo.us.
Pour utiliser l'un d'entre eux dans une page, vous devez bien sûr inclure cette librairie, dans l'en-tête de la page, avec un élément g:javascript :

La syntaxe d'appel d'un effet scriptaculous est très simple :

où nom_effet est le nom de l'effet scripstaculous, id, l'id de l'élément DOM de votre page sur lequel portera l'effet visuel, et args une liste optionnelle d'arguments qui dépendent de l'effet utilisé.

Reprenons notre exemple du début de l'article, dans lequel un élément DOM de la page d'id elm est mis à jour par un appel AJAX vers une action Grails.
Nous voulons appliquer l'effet Appear, pour le contenu de l'élément apparaisse progressivement dans la page web ; cela signifie d'une part, que cet effet doit être appliqué une fois que l'on a obtenu la réponse à notre requête AJAX, et d'autre part, que l'élément DOM soit au départ invisible.
L'élément g:remoteLink comprend beaucoup de paramètres optionnels, ainsi que des événements JavaScript ; nous allons réagir à l'événement JavaScript onComplete, qui se produit lorsque l'on a obtenu la valeur de retour de l'action, ainsi que la mise à jour de l'élément HTML.
Nous avons donc deux modifications à réaliser.
La première est de rendre notre élément DOM initialement invisible, ce qui est fait en définissant le style CSS dans l'attribut style avec la valeur display:none; :

La seconde modification est de répondre à l'événement onComplete de l'élément g:remoteLink, en appliquant l'effet par l'exécution du code JavaScript new Effect.Appear('elm', 1); :

Notez ici que nous avons utilisé le caractère d'échappement \ avec l'apostrophe, à deux reprises, pour l'identifiant elm.

Vous n'avez maintenant plus d'excuse pour réaliser des effets spectaculaires, avec AJAX, dans vos applications Grails !