Objectifs généraux : Savoir effectuer une requête HTTP synchrone ou asynchrone Savoir effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE Objectifs opérationnels : Comprendre une requête synchrone Effectuer une requête synchrone Lire, d’une manière synchrone, le contenu d’un fichier local Comprendre une requête asynchrone Effectuer une requête asynchrone Récupérer des données à partir d’un serveur avec une requête asynchrone Comprendre les méthodes de requête RESTful Effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE

1. Requêtes HTTP
synchrones & asynchrones
Avril 2018Abdoulaye Dieng 1

2. Objectifs généraux
• Savoir effectuer une requête HTTP synchrone ou
asynchrone
• Savoir effectuer des requêtes RESTful avec les
méthodes GET, POST, PUT, PATCH et DELETE
2

3. Objectifs opérationnels
• Comprendre une requête synchrone
• Effectuer une requête synchrone
• Lire, d’une manière synchrone, le contenu d’un fichier
local
• Comprendre une requête asynchrone
• Effectuer une requête asynchrone
• Récupérer des données à partir d’un serveur avec une
requête asynchrone
• Comprendre les méthodes de requête RESTful
• Effectuer des requêtes RESTful avec les méthodes GET,
POST, PUT, PATCH et DELETE
3

4. Sommaire
1) Requête synchrone
2) Requête asynchrone
3) Objet XMLHttpRequest
4) Requêtes HTTP et jQuery
5) Méthodes de requête HTTP
4

5. Requête synchrone
• Requête synchrone = requête où le navigateur est bloqué durant
l’attente de la réponse
• Exemples
 Clic sur un lien hypertexte
 Soumission d’un formulaire
• Inconvénient : caractère bloquant qui peut figer un navigateur et
entamer l’expérience utilisateur
5

6. Requête asynchrone
• Requête asynchrone = requête où le navigateur peut s’occuper
sur une autre tâche durant l’attente de la réponse
• Exemples
 Recharge partielle d’une page
 Soumission de données
• Avantages
 moins de latence
 applications plus réactives
 moins de trafic réseau
 moins de charge sur le serveur
• Inconvénient : flot d’exécution non linéaire => difficulté à
programmer /debugger
6

7. Objet XMLHttpRequest
présentation
• XMLHttpRequest : objet JavaScript permettant de faire des
requêtes HTTP asynchrone et synchrone.
• Élément fondamental de la technologie AJAX (Asynchronous
JavaScript And XML)
• Initialement développé par MicroSoft (en 1998), en tant
qu’objet ActiveX, pour Outlook Web Access via IE 5.0
• Ajouté ensuite à ECMAScript et implémenté en tant qu’objet
JavaScript par les autres navigateurs à partir de 2002.
• Son instanciation se fait différemment selon le navigateur
• Toutefois, ses propriétés et méthodes sont les mêmes pour
tous les navigateurs.
7

8. Objet XMLHttpRequest
quelques propriétés
• readyState : état de l’objet XHR au cours de la requête
0 : non initialisé, 1 : requête en cours d’envoi,
2 : requête envoyée, 3 : réponse en cours de réception,
4 : complétude de la réponse
• onreadystatechange : contient le gestionnaire d’évènement à
appeler à chaque changement de readyState.
• responseText : réponse du serveur sous format chaîne de
caractères.
• responseXML : réponse du serveur sous format XML.
• status : code de la réponse HTTP reçue depuis le serveur.
• statusText : libellé du code de la réponse HTTP reçue depuis le
serveur.
8

9. Objet XMLHttpRequest
quelques méthodes
• open(requestMethod, url, asynchronousFlag) : prépare
l’envoi de la requête
• send(bodyContent) : envoie le corps du message
(éventuellement null par exemple lors de l’exploitation de la
méthode GET)
• setRequestHeader(headerField, headerValue) : ajoute
une paire champ/valeur à l’en-tête lors de l’envoi de la
requête
• abort() : stoppe la requête et réinitialise la valeur de
readyState à 0
9

10. Objet XMLHttpRequest
étapes de lancement d’une requête
1) Évènement déclencheur
2) Instanciation de l’objet
XMLHttpRequest
3) Envoi de la requête HTTP
4) Traitement de la requête
5) Réponse du serveur
6) Traitement de la réponse
10
1
2
3
4
5
6

11. Objet XMLHttpRequest
Création d’un déclencheur et d’une zone d’affichage de la réponse
Cette étape consiste à la création d’une page HTML intégrant :
• un déclencheur (un lien, bouton ou n'importe quel contrôle que
l'utilisateur peut manipuler pour lancer une action).
Exemple
• une zone où sera affichée la réponse de l'action de l’utilisateur.
Exemple
<p> Entrez un entier SVP : <input type="number" >
</p>
<p> <button> pair ou impair ? <button/> </p>
<p id="resultat"> ... </p>
11

12. Objet XMLHttpRequest
Création d’un déclencheur et d’une zone d’affichage de la réponse
TP
1) Créez le sous-répertoire tps-sync-async-req dans le Webroot
de votre serveur Web
2) Dans tps-sync-async-req, créez le sous-réperoire js et le
fichier entier.html contenant
<script src="js/instancierXHR.js" ></script>
<p>
Entrez un entier SVP : <input type="number" >
</p>
<p>
<button> pair ou impair ? </button>
</p>
<p id="resultat"> ... </p>
<script src="js/entier.js"></script>
12

13. Objet XMLHttpRequest
instanciation
function instancierXHR() {
var resultat=null;
try { // Test pour Chrome, Mozilla, Opera, ...
resultat= new XMLHttpRequest();
}
catch (Error) {
try { // Test pour les navigateurs Internet Explorer > 5.0
resultat= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (Error) {
try { // Test pour le navigateur Internet Explorer 5.0
resultat= new ActiveXObject("Microsoft.XMLHTTP");
}
catch (Error) {
resultat= null;
}
}
}
return resultat;
}
L’objet XMLHttpRequest est créé par l’instruction:
var objetXHR = instancierXHR()
13

14. Objet XMLHttpRequest
instanciation - TP
1. Dans le sous-dossier js créez les fichiers
a) instancierXHR.js contenant le code JS de la diapo
précédente
b) entier.js et lire-fichier-local-en-sync.js contenant tous
les deux le code :
var objetXHR = instancierXHR();
…
2. Dans le sous-dossier tps-sync-async-req créez le fichier
contact.txt contenant
Nom Prénom Tel
Dia Alpha 771234568
14

15. Objet XMLHttpRequest
désignation de la fonction de rappel (mode asynchrone)
• La fonction de rappel (ou callback) devra être appelée à
chaque fois que l’état de l’objet XMLHttpRequest change
(requête en cours d’envoi, requête envoyée, réponse en cours
de réception, complétude de la réponse).
• Pour cela, on renseigne la propriété onreadystatechange de
l'objet.
Par exemple :
objetXHR.onreadystatechange = actualiserPage;
• Cette fonction n’est nécessaire qu’en mode asynchrone et est
surtout utilisée pour le traitement de la réponse complète du
serveur
15

16. Objet XMLHttpRequest
désignation de la fonction de rappel - TP
Ajoutez au fichier entier.js le code :
var bouton = document.querySelector("button");
bouton.addEventListener("click", function() {
objetXHR.onreadystatechange = actualiserPage;
…
}
)
16

17. Objet XMLHttpRequest
initialisation de la requête
• La requête est initialisée par la méthode open() qui reçoit :
 la méthode d’envoi (GET, POST, PUT, DELETE, …) ;
 l'adresse du fichier cible, ainsi qu’éventuellement, la liste
des paramètres à passer à celui-ci, dans le cas où la
requête est effectuée en mode GET ;
 false(synchrone) ou true (asynchrone : mode par défaut).
• Exemple avec POST :
objetXHR.open("post", "parite.php", true);
• Exemple avec GET :
var entier=document.querySelector("input").value;
objetXHR.open("get", "parite.php?entier="+entier, true);
• Exemple : ouverture d’un fichier local en mode synchrone
objetXHR.open('GET', './contact.txt', false);
17

18. Objet XMLHttpRequest
initialisation de la requête - TP
1. Ajoutez au fichier entier.js le code
objetXHR.open("post", "./parite.php");
…
2. Ajoutez au fichier lire-fichier-local-en-sync.js le code
objetXHR.open("get", "./contact.txt", false);
…
18

19. Objet XMLHttpRequest
envoi de la requête
• La requête est envoyée par la méthode send() qui reçoit :
 ou bien NULL si la méthode d’envoi est GET ;
 ou bien la liste des paramètres à passer au programme
chargé de traiter la requête, si la méthode d’envoi est
POST, PUT ou DELETE.
• Exemple avec GET :
objetXHR.send(null);
• Exemple avec POST :
var entier=document.querySelector("input").value;
objetXHR.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
objetXHR.send("entier="+entier);
19

20. Objet XMLHttpRequest
envoi de la requête - TP
1. Ajoutez au fichier entier.js le code
var entier = document.querySelector("input").value;
objetXHR.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
objetXHR.send("entier="+entier);
2. Ajoutez au fichier lire-fichier-local-en-sync.js le code
objetXHR.send(null);
…
20

21. Objet XMLHttpRequest
traitement de la requête par le serveur
• La requête peut être traitée par un script .php
• Exemple : (parite.php dans tps-sync-async-req)
<?php
header("Content-Type: text/plain");//la réponse est du
texte
if(!empty($_REQUEST["entier"])){
$entier = $_REQUEST["entier"];
if($entier%2==0){
echo $entier.' est pair';
}else{
echo $entier.' est impair';
}
}else{
echo "Aucune donnée reçue";
}
21

22. Objet XMLHttpRequest
traitement de la réponse par le navigateur
• Réponse traitée grâce à l’une des propriétés responseText et
responseXML
• Dans le corps de la fonction de rappel en mode asynchrone.
• Exemple
function actualiserPage() {
if (objetXHR.readyState == 4) {
if (objetXHR.status == 200) {
var resultat=
document.getElementById("resultat");
resultat.innerHTML=objetXHR.responseText;
}
}
}
• Exemple : ouverture d’un fichier local en mode synchrone
console.log(objetXHR.responseText); 22

23. Objet XMLHttpRequest
traitement de la réponse - TP
1. Ajoutez au fichier entier.js le code
function actualiserPage() {
if (objetXHR.readyState == 4) {
if (objetXHR.status == 200) {
var resultat=
document.getElementById("resultat");
resultat.innerHTML=objetXHR.responseText;
}
}
}
2. Ajoutez au fichier lire-fichier-local-en-sync.js le code
console.log(objetXHR.responseText);
23

24. Requêtes HTTP et jQuery
méthode $.ajax()
• jQuery: bibliothèque javascript open-source et cross-browser
permettant, entre autres, de manipuler le DOM et de simplifier le
dialogue client/serveur
• Méthode $.ajax()
 Reçoit des options sous la forme {clef1:val1, clef2:val2, …}
 Envoie une requête asynchrone par défaut
 Retourne l'objet jqXHR (sur-ensemble de XMLHttpRequest)
contenant les infos sur la requête et sa réponse
 Principales clefs des options
• url:"URL_cible", URL du script qui reçoit la requête
• method:"GET"|"POST"|"PUT"|"DELETE", méthode
HTTP
• data:{key1:value1, key2:value2, …}, données à envoyer
• dataType:"text"|"html"|"json"|"xml"|… , type de données
attendu
24

25. Requêtes HTTP et jQuery
méthodes .done() et .fail() de l’objet jqXHR
• Méthodes alternatives et différées
• .done() reçoit la fonction de rappel à exécuter en cas de succès
de la requête et retourne l’objet jqXHR (=> chaînabilité)
• La callback reçoit la réponse puis une chaîne (« success »)
indiquant l’état de l’opération et enfin l’objet jqXHR
• .fail() reçoit la fonction de rappel à exécuter en cas d’échec de la
requête et retourne l’objet jqXHR
• La callback reçoit l’objet jqXHR puis une chaîne (« timeout », «
error », « abort » ou « parsererror ») indiquant l’état de
l’opération et enfin un texte (« Not Found », « Internal Server
Error ») donnant l'information sur l'erreur.
25

26. Requêtes HTTP et jQuery
exemple : Récupérer des données distantes
• Télécharger la biblio. jquery à partir de http://jquery.com/download/
• Dans le Webroot d’un serveur, créez le sous-rep exemple-asyn qui
contiendra les fichiers hello.html et fetch-remote-data.html
• Contenu de hello.html : <p>hello front-end !!!</p>
• Contenu de fetch-remote-data.html
<script src="chemin/vers/jquery.js"></script>
<script>
$.ajax({ url: "http://localhost/jquery-backend/hello.html",
dataType:"html" })
.done(function(data) { alert("Données reçues : "+data); })
.fail(function(jqXHR, textStatus,errorThrown) {
alert( "Echec de la requete");
console.log( "Error: " + errorThrown );
console.log( "Status: " + textStatus ); console.dir( jqXHR );
});
</script>
• Tester .fail() en modifiant les valeurs de url et de dataType
26

27. Méthodes de requête HTTP
présentation
• Méthode de requête indiquent l'action que l'on souhaite réaliser
sur la ressource demandée
• Quelques méthodes (ou verbes) HTTP
 GET : adaptée pour récupérer des données
 POST : adaptée pour envoyer des données
 PUT : adaptée pour remplacer entièrement des données
 DELETE : adaptée pour supprimer des données
 PATCH : adaptée pour remplacer partiellement des données
27

28. Méthodes de requête HTTP
outils des travaux pratiques
• Téléchargez et installez npm à travers NodeJS
https://nodejs.org/en/download/current/
• Installez le serveur REST factice : JSON server
npm install –g json-server
• Installez un client REST sous forme d’une extension navigateur
Postman, Advanced Rest Client ou un autre
• Démarrez JSON server
json-server --watch db.json
• NB : db.json est un fichier texte contenant les données au
format JSON. Vous pouvez créer votre propre fichier et
l’indiquer à JSON server lors de son démarrage
28

29. Méthodes de requête HTTP
Travaux pratiques
Avec le client REST, requêtez l’URL http://localhost:3000/ suffixée
d’une des routes suivantes :
1) GET /posts
2) POST /posts avec deux posts à ajouter
3) GET /posts/2
4) PUT /posts/2 avec les modifications
5) PATCH /posts/3 avec les modifications partielles
6) DELETE /posts/3
29