Intégration d'Ajax avec Struts2 : Retour de données JSON

Introduction aux données JSON

JSON est un format d'échange de données indépendant du langage, largement utilisé dans les communications client-serveur. Le processus implique deux directions : l'envoi de JSON du serveur vers le client (transformation d'objets en JSON) et l'envoi du client vers le serveur (transformation de JSON en objets). En pratique, les données JSON sont transmises sous forme de chaîne conforme à la syntaxe JSON ; un "objet JSON" est le résultat de l'analyse et de l'encapsulation de cette chaîne.

Retour de données JSON avec Struts2

Renvoyer du JSON depuis le serveur est une nécessité courante dans les applications web modernes. Sans framework, on peut le faire via une Servlet ou une JSP en écrivant directement la chaîne JSON. Avec Struts2, nous pouvons déléguer cette tâche au plugin JSON, qui fournit un type de résultat et un intercepteur dédiés.

Configuration manuelle vs. plugin JSON

Sans plugin, l'action Struts2 doit écrire manuellement la chaîne JSON dans le flux de sortie. Avec le plugin JSON, l'action se concentre uniquement sur la logique métier ; le plugin sérialise automatiquement les propriétés de l'action en JSON.

Mise en œuvre pratique

4.1. Bibliothèques nécessaires

Ajoutez les JARs de Struts2 et le plugin JSON (struts2-json-plugin.jar). Le fichier struts-plugin.xml inclus dans ce JAR déclare le type de résultat json et l'intercepteur json.

4.2. Configuration de web.xml

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" ...>
  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

4.3. Classe d'entité Utilisateur

public class Utilisateur {
    private Long id;
    private String nom;
    private String sexe;
    // getters et setters
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getNom() { return nom; }
    public void setNom(String nom) { this.nom = nom; }
    public String getSexe() { return sexe; }
    public void setSexe(String sexe) { this.sexe = sexe; }
}

4.4. Action Utilisateur

import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
    private Long id;
    private String nom;
    private String motDePasse;
    private String sexe;
    private String telephone;

    public String afficherUtilisateur() {
        Utilisateur user = new Utilisateur();
        user.setId(1L);
        user.setNom("Martin");
        user.setSexe("M");
        user.setMotDePasse("secret");
        user.setTelephone("0123456789");
        
        this.id = user.getId();
        this.nom = user.getNom();
        this.motDePasse = user.getMotDePasse();
        this.sexe = user.getSexe();
        this.telephone = user.getTelephone();
        return SUCCESS;
    }
    // getters et setters pour tous les champs
}

4.5. Configuration struts.xml

Le package doit hériter de json-default et le résultat de type json.

<struts>
  <package name="userJson" namespace="/" extends="json-default">
    <action name="userAction_*" method="{1}" class="monpackage.UserAction">
      <result type="json" />
    </action>
  </package>
</struts>

4.6. Page HTML cliente (test.html)


<html>
<head>
  <meta charset="UTF-8">
  <title>Test JSON</title>
  <script src="js/jquery-1.4.2.js"></script>
  <script src="js/test.js"></script>
</head>
<body>
  <h1>Test d'appel Ajax vers Struts2</h1>
</body>
</html>

4.7. Script JavaScript (test.js)

$(document).ready(function(){
    chargerUtilisateur();
});

function chargerUtilisateur() {
    $.post("userAction_afficherUtilisateur.action", null, function(data) {
        alert("ID: " + data.id + ", Nom: " + data.nom + ", Sexe: " + data.sexe);
    });
}

4.8. Résultat attendu

En accédant à http://localhost:8080/Struts2+Ajax/test.html, une boîte de dialogue affiche : ID: 1, Nom: Martin, Sexe: M.

Principe de fonctionnement (diagramme de séquence)

Le plugin JSON intercepte le résultat de l'action, récupère les propriétés exposées par les getters et les sérialise en JSON. La réponse HTTP contient alors le JSON brut, que le client peut traiter directement.

Étiquettes: struts2 JSON AJAX plugin JSON jQuery

Publié le 23 juin à 23h55

L'Atelier Monstre