Master 2 SID
Développement avec
l’Approche
Web Services
Année Universitaire 2020-2021 Mme L . BAGDADI
03 Chapitre 3 :
Les web services
REST & AJAX (suite)
03 Web intéractif : AJAX
(Asynchronous JavaScript and XML)
AJAX n’est pas une technlogie, n’est pas un logiciel.
C’est l’utilisation conjointe de l’HTML, CSS, l’API DOM
(javascript), XML & JSON et XMLHttpRequest (objet
javascript).
La particularité d’AJAX est d’assurer une
communication asynchrone entre un client et un
serveur : elle permet d'effectuer des requêtes au
serveur web et, en conséquence, de modifier
partiellement la page web affichée sur le poste client
sans avoir à afficher une nouvelle page complète.
3/13
03
url
Client
Communication synchrone
Serveur
Demande de la page
Traitement
clic
Envoi de la page
Demande de la page
Traitement
clic
Envoi de la page
Demande de la page
Traitement
Envoi de la page
4/13
03
Communication asynchrone
Serveur
url Client
Demande de la page
Traitement
clic
Envoi de la page
JavaScript Demande de données
Traitement
clic
JavaScript Envoi des données
JavaScript Demande de données
Traitement
JavaScript Envoi des données
5/13
03
Principe de fonctionnement d’AJAX
6/13
03
Principe de fonctionnement d’AJAX
1
Evenement onKeyDown=function(){script};
2
HTTPRequest
1 Réseau
HTTPResponse 5
6
java javascript java java java javafx javafx
download 64 bits jdk
7
En format JSON ou XML
(voir annexe JSON) 4
3
Client
Server
7/13
03
Principe de fonctionnement d’AJAX
1. Demande de chargement d’une page web suite à l’évènement
"onClick" sur l’élement "button"
2. Création de l’objet XMLHttpRequest par JavaScript.
3.L’envoie de la demande au serveur Web par l’objet XMLHttpRequest
[Link] de la demande par le serveur
[Link]éation et renvoie de la réponse par le serveur web
[Link] réponse est lue par JavaScript
7. Une mise à jour de page est effectuée par JavaScript.
8/13
03 Propriétés de l’objet XMLHTTPRequest
onreadystatechange Définit la fonction à appeler quand le statut de
l’objet change. (readyState)
readyState Statut de l'objet.
4 : requête effectuée, réponse prête
responseText Réponse sous forme de chaîne de
caractères.
responseXML Réponse sous forme d'objet DOM.
status Code numérique de réponse du serveur
HTTP.
200 : OK
403 : Forbidden
404 ; Not Found
statusText OK or Not Found
9/13
03
Propriétés de l’objet XMLHTTPRequest
open Prépare une requête HTTP en
indiquant ses paramètres.
open(method,url,asyn)
method :GET ou POST
url : localisation du fichier
Asyn : true (asyn) ou false (syn)
send Effectue la requête HTTP, en
envoyant les données.
RQ : dans le cas d’utilisation de la méthode GET, les données à
passer au script côté serveur sont envoyèes via l’URL, par contre dans le
cas d’utilisation de la méthode POST, les données sont envoyées via le
send ( )
10/13
03
<html>
Exemple simple d’AJAX
<head><script type="text/javascript" src="[Link]"></script></head>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadTextDoc()">Change Content</button>
</body>
</html>
function loadDoc() {
[Link]
var xhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
[Link]("demo").innerHTML = [Link];
}
};
[Link]("GET", "ajax_info.txt", true);
[Link]();
}
it Works !!! ajax_info.txt
11/13
03
Exemple 2 : AJAX/Web service REST
Réponse de type JSON
@Path("wilaya") [Link]
public class RestWilaya{
@GET
@Path("/AllWilayas")
@Produces(MediaType.APPLICATION_JSON)
public String AllWilayas() {
jdbcBean jb = new jdbcBean();
ArrayList<Wilaya> list=[Link]();
String json = new Gson().toJson(list);
return json;
}
<html> [Link]
<head> …... <script type="text/javascript" src="js/[Link]"></script>…...</head>
<body>
<div id="div1"></div>
<button onclick="AllWilayas();">Get All Wilayas jax-rs WS</button>
</body>
function AllWilayas() { [Link]
xhr= new XMLHttpRequest();
var url="[Link]
[Link]=function(){
if([Link]==4 && [Link]==200) wilayaResponse([Link]);
};
[Link]("GET",url,true);
[Link]();
} 12/13
03
Exemple 3 : AJAX/Web service REST
Réponse de type textPlain
……... [Link]
@GET
@Path("/getWilayaById/{id}")
@Produces(MediaType.TEXT_PLAIN)
public String getWilayaById(@PathParam("id") int id) {
jdbcBean jb = new jdbcBean();
String w=[Link](id);
return w;
}
………...…..
<input type="number" name="wilaya_id" id="wilaya_id"/> [Link]
<button onclick="WilayaByID();">Get Wilaya By ID jax-rs WS</button>
<div id="div2"></div>
……………..
function WilayaByID() {
xhr= new XMLHttpRequest(); [Link]
var wilaya_id = [Link]("wilaya_id").value;
var url="[Link]
[Link]=function(){
if([Link]==4 && [Link]==200) alert([Link]);
};
[Link]("GET",url,true);
[Link]();
}
13/13
