Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
26 janvier 2011 3 26 /01 /janvier /2011 17:41

 

jquery.jpeg

Voici comment faire une requête Ajax de type GET avec JQuery coté navigateur, RESTEasy coté Serveur et JSON entre les 2.

 

Les sources complètes de ce projet sont disponible sous la forme d'un projet maven téléchargeable à la fin de ce billet.

 

 

Ajax, JQuery, JSON, RESTEasy qu'est ce que c'est ?

 

Ajax : Ajax est une technologie permettant de faire des requêtes asynchrones depuis un navigateur web vers un serveur web avec http en utilisant Javascript.  Ajax permet via du javascript d'aller faire un appel à n'importe quel serveur web sans changer de page web dans le navigateur. 

 

JQuery :  JQuery est une bibliothèque Javascript Crossbrowser, c'est a dire qu'un code javascript écrit avec Jquery fonctionnera aussi bien avec Firefox que IE ou Opera. JQuery permet de faire des requetes Ajax.

 

GET : Les méthodes d'appel Ajax dans une architecture REST sont les méthodes HTTP classiques principalement GET et POST. Dans ce billet nous allons faire un GET HTTP.

 

JSON : Un format de données utilisable directement en Javascript. Il ressemble à du XML ultra simplifié. C'est ce format qui sera utilisé pour les échanges de données entre le serveur web et jquery

 

RESTEasy : Une implementation de REST , repectant la spécification JAX-RS, proposé par JBOSS pour publier des ressources REST.

 

Voici comment vous s'enchaîner ces technologies lors de l'exécution du Hello world de ce tuto :

 

- L'utilisateur ouvre une page html qui contient du code JQuery

- Il clique sur le bouton d'essai, ce qui déclenche une fonction javascript

- Cette fonction javascript utilise JQuery pour faire un GET sur le serveur RESTEasy

- Le serveur RESTEasy génère un fichier JSON et l'envoie à JQuery

- JQuery récupère le fichier JSON et le fourni à javascript

- Une boite d'alerte javascript affiche le contenue du fichier JSON

 

 Assez de théories, passons à la pratique, grace à ce tutorial en 5 étapes.

 

 

Mise en place de la ressource REST avec RESTEasy

 

Mise en place du serveur REST . Cette partie à déjà été décrite dans mon précédant billet sur RESTEasy : Mini Tutorial : REST Web Service avec JBoss RESTEasy . Aussi je ne vais reprendre ici que les grandes lignes.

 

1 - Déclaration des dépendances et des repositories dans le pom maven :

    Le repository de jboss est nécessaire pour récupérer la version 2.0-beta-2 de RESTEasy.

 

<repositories>
        <repository>
            <id>maven repo</id>
            <name>maven repo</name>
            <url>http://repo1.maven.org/maven2/</url>
        </repository>
        <!-- For resteasy -->
        <repository>
            <id>jboss</id>
            <name>jboss repo</name>
            <url>http://repository.jboss.org/maven2</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jaxrs</artifactId>
            <version>2.0-beta-2</version>
            <!-- filter out unwanted jars -->
            <exclusions>
                <exclusion>
                    <groupId>commons-httpclient</groupId>
                    <artifactId>commons-httpclient</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>javax.servlet</groupId>
                    <artifactId>servlet-api</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jettison-provider</artifactId>
            <version>2.0-beta-2</version>
        </dependency>
    </dependencies>

 

2 - Déclaration de RESTEasy dans web.xml

 Voir ce billet : Mini Tutorial : REST Web Service avec JBoss RESTEasy

 

3 - Déclaration de la Classe World pour générer du JSON

Créons une classe World avec un champs message. Notre objectif est de faire passer un objet World Java avec son message dans le javascript du navigateur sous forme d'un objet World JSON avec le même message.

 

package com.davidgimelle.tutorial.resteasyjquerygetjson.element;

import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;

@XmlRootElement(name = "world")
public class World {

    private String message;

    @XmlElement
    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

 

Les annotations XML vont être transformées lors de l'utilisation de RESTEasy en JSON. Et ainsi l'instance Java suivante 

  World myWorld  = new World();

  myWorld.setMessage("Hi");

va devenir le fichier JSON suivant dans le navigateur

  {"world":{"message":"Hi"}}

 

4 - Déclaration du service RESTEasy pour publier la classe World

Cette classe va lire un message reçu depuis le navigateur, générer une instance de World et la transformer en JSON.

A ce stade du projet, une fois déployée cette ressource est disponible sous l'url :  http://localhost:8080/RESTEasyTutorialJQueryGetJSON/rest/hello/world/Hi

 

L'annotation @Produces(MediaType.APPLICATION_JSON) précise que le format envoyé par la ressources est JSON. Mais il aurait très bien pu être du XML, ATOM ou autres.

Pour comprendre la significations des autres annotations consulter ce billet : Mini Tutorial : REST Web Service avec JBoss RESTEasy

 

package com.davidgimelle.tutorial.resteasyjquerygetjson;

import com.davidgimelle.tutorial.resteasyjquerygetjson.element.World;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

@Path("hello")
public class HelloWorld {

    @GET
    @Path("/world/{message}")
    @Produces(MediaType.APPLICATION_JSON)
    public World helloWorldJSON(@PathParam("message") String message){
        World res=new World();
        res.setMessage(message);
        return res;
    }

}

 

La partie serveur RESTEasy est terminée, passons à la partie client.

 

 

Ecriture d'une fonction d'appel Ajax avec JQuery

 

5 Déclaration d'une page HTML executant JQuery

 

  <html>
    <head>
        <title>RESTEasy Tutorial JQuery Get JSON</title>

         <script type="text/javascript" src="inc/jquery-1.4.2.min.js" language="JavaScript"></script>
         <script type="text/javascript">
            function getHelloWorld(message){
                $.getJSON("./rest/hello/world/"+message,
                    function(dataJson){
                        alert("Message extract from Json:"+dataJson.world.message);
                    }
                );
            }
         </script>

    </head>
    <body>
        For try an Get JQUERY with 'Salut' value, try this button : <button onclick="getHelloWorld('Salut');" >Salut</button>
    </body>
</html>

 

- La ligne <script type="text/javascript" src="inc/jquery-1.4.2.min.js" language="JavaScript"></script> permet d'inclure dans la page la bibliothèque JQuery qui se trouve sur le même serveur que la page html dans le repertoire inc

 

- Le script javascript est la  function getHelloWorld(message)

 

- La fonction JSON est

$.getJSON("./rest/hello/world/"+message,
                    function(dataJson){
                        alert("Message extract from Json:"+dataJson.world.message);
                    }
                );

 

- Le $ est un alias pour appeler la bibliothèque JQuery

- getJSON est la fonction jquery qui va faire un appel GET Ajax sur une ressources JSON

./rest/hello/world/"+message est l'url du serveur, plus la valeur du message à envoyer au serveur

 

- function(dataJson) est la fonction de callback qui est executée dès que JQuery a recu la reponse du serveur. 

dataJson contient les infos json renvoyées par le serveur

dataJson.world.message permet de récupérer la valeur du message dans l'objet JSON

 

C'est terminé. :)

 

 

Sources : 

Les sources complétes de ce tutorial sont disponibles sous forme d'un projet maven  téléchargable : RESTEasyTutorialJQueryGetJSON-src

 

Testé le 18 juillet 2010 avec :

resteasy-jaxrs 2.0-beta-2 , JBoss 4.2.3, Java jdk 1.5_20, maven 2.0.9 et netbeans 6.7.1

 

Liens et références :  

Mini tutorial sur RESTEasy : Mini Tutorial : REST Web Service avec JBoss RESTEasy

Ajax : http://en.wikipedia.org/wiki/Ajax_%28programming%29

Crossbrowser : http://en.wikipedia.org/wiki/Cross-browser

JQuery : http://jquery.com/

JSON : http://www.json.org/

Les exemples de RESTEasy : http://sourceforge.net/projects/resteasy/files/Resteasy%20JAX-RS/

JQuery et JSON: http://api.jquery.com/jQuery.getJSON/

RESTFull : http://tomayko.com/writings/rest-to-my-wife

REST: http://en.wikipedia.org/wiki/Representational_State_Transfer

 

Partager cet article

Repost 0
Published by David Gimelle - dans Tutorial
commenter cet article

commentaires

sun java 26/05/2011 12:36






Merci pour le mini-tutorial mais ce que j’ignore c’est qu’où on va mettre les commandes Json.





David Gimelle 27/05/2011 10:43



Bonjour,


Je ne suis pas certain de comprendre ta question. Le contenu JSON est cree par les librairies de RESTEasy en analysant les annotations de la Class Word.


 



Summary

  • : GetJ2ee -Java development
  • : Articles about Java and EE
  • Contact

Profil

  • David Gimelle
  • Java Developer for more 10 years. I worked in France, Canada and Switzerland. I am contractor in London since 2010.
  • Java Developer for more 10 years. I worked in France, Canada and Switzerland. I am contractor in London since 2010.

Contact

You can contact me here

or by Twitter

Search

Archives