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
