Requêtes HTTPsynchrones et asynchrones

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

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

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

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

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

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

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

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

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

é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

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

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

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

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

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

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

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

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

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

envoi de la requête - TP
var entier = document.querySelector("input").value;
objetXHR.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
objetXHR.send("entier="+entier);
objetXHR.send(null);
…
20

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

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

traitement de la réponse - TP
function actualiserPage() {
if (objetXHR.readyState == 4) {
if (objetXHR.status == 200) {
var resultat=
document.getElementById("resultat");
resultat.innerHTML=objetXHR.responseText;
}
}
}
console.log(objetXHR.responseText);
23

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

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

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

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

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

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

Requêtes HTTPsynchrones et asynchrones

Contenu connexe

Tendances (20)

Similaire à Requêtes HTTPsynchrones et asynchrones (20)

Plus de Abdoulaye Dieng (20)