Implémentation d'AJAX avec le framework DWR 3.0

Le frmaework DWR (Direct Web Remoting) permet d'appeler directement des méthodes Java côté serveur depuis du code JavaScript, simplifiant ainsi la communication AJAX.

Cette démonstration illustre le fonctionnement de base : au clic sur un bouton dans une page JSP, une méthode Java est invoquée via DWR, et la valeur saisie dans un champ de texte est affichée dans la console du serveur.

Construction de la démonstration

1. Création du projet Web

Créez un nouveau projet Web dynamique dans votre IDE.

2. Import des bibliothèques

Ajoutez les fichiers JAR suivants au classpath du projet :

commons-logging-x.x.x.jar
dwr3.0.jar

3. Configuration du servlet DWR dans web.xml

Déclarez le servlet DWR et son mapping dans le fichier web.xml :

<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>crossDomainSessionSecurity</param-name>
        <param-value>false</param-value>
    </init-param>
    <init-param>
        <param-name>allowScriptTagRemoting</param-name>
        <param-value>true</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

4. Classe Java côté serveur

Créez une classe dans le package sugar.dwr (par exemple) :

package sugar.dwr;

public class MessageDispatcher {
    public void sendMessage(String message) {
        System.out.println(message);
    }
}

5. Fichier dwr.xml

Placez ce fichier dans le répertoier WEB-INF (au même niveau que web.xml). Il définit la correspondance entre l'objet JavaScript et la classe Java :

<?xml version="1.0" encoding="UTF-8"?>

<dwr>
    <allow>
        <create creator="new" javascript="messageDispatcher">
            <param name="class" value="sugar.dwr.MessageDispatcher"/>
        </create>
    </allow>
</dwr>

Note : l'attribut javascript="messageDispatcher" correspond au nom qui sera utilisé côté client.

6. Page JSP (index.jsp)

Incluez les scripts JavaScript nécessaires (DWR et jQuery) et implémentez la logique :

<%@page pageEncoding="utf-8"%>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="dwr/util.js"></script>
    <script type="text/javascript" src="dwr/engine.js"></script>
    <script type="text/javascript" src="dwr/interface/messageDispatcher.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#btn').click(function() {
                var userInput = $('#txt').val();
                messageDispatcher.sendMessage(userInput);
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td><input type="text" id="txt" /></td>
        </tr>
        <tr>
            <td><input type="button" value="Envoyer" id="btn" /></td>
        </tr>
    </table>
</body>
</html>

Les fichiers engine.js et util.js sont automatiquement fournis par DWR. Le fichier messageDispatcher.js est généré dynamiquement d'après la configuraton de dwr.xml. Il n'est pas nécessaire de les placer manuellement dans le projet.

Résultat attendu

Lorsque l'utilisateur saisit un texte et clique sur le bouton, la valeur est transmise au serveur et affichée dans la console Java (stdout).

Étiquettes: DWR Direct Web Remoting AJAX Java JavaScript

Publié le 7 juin à 21h32

L'Atelier Monstre