SlideShare une entreprise Scribd logo
1  sur  29
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Contenu connexe

Tendances

POO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismePOO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismeMouna Torjmen
 
POO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 EncapsulationPOO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 EncapsulationMouna Torjmen
 
Exercice 1 java Héritage
Exercice 1 java HéritageExercice 1 java Héritage
Exercice 1 java HéritageNadaBenLatifa
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correctionInes Ouaz
 
Chapitre8: Collections et Enumerations En Java
Chapitre8: Collections et Enumerations En JavaChapitre8: Collections et Enumerations En Java
Chapitre8: Collections et Enumerations En JavaAziz Darouichi
 
Chapitre 4 heritage et polymorphisme
Chapitre 4 heritage et polymorphismeChapitre 4 heritage et polymorphisme
Chapitre 4 heritage et polymorphismeAmir Souissi
 
Correction Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfCorrection Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfslimyaich3
 
Cours javascript
Cours javascriptCours javascript
Cours javascriptkrymo
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux javaInes Ouaz
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPYouness Boukouchi
 
Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-CorrectionLilia Sfaxi
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - CorrectionLilia Sfaxi
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 

Tendances (20)

POO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismePOO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et Polymorphisme
 
POO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 EncapsulationPOO Java Chapitre 2 Encapsulation
POO Java Chapitre 2 Encapsulation
 
Exercice 1 java Héritage
Exercice 1 java HéritageExercice 1 java Héritage
Exercice 1 java Héritage
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Chapitre8: Collections et Enumerations En Java
Chapitre8: Collections et Enumerations En JavaChapitre8: Collections et Enumerations En Java
Chapitre8: Collections et Enumerations En Java
 
Chapitre 4 heritage et polymorphisme
Chapitre 4 heritage et polymorphismeChapitre 4 heritage et polymorphisme
Chapitre 4 heritage et polymorphisme
 
Correction Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfCorrection Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdf
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
Cours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapterCours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapter
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 

Similaire à Requêtes HTTP synchrones et asynchrones

ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllElalami8
 
0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajax0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajaxMarouaneMyyara2
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Abdelouahed Abdou
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024YounesOuladSayad1
 
Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Bruno Delb
 
cours j2ee -présentation
cours  j2ee -présentationcours  j2ee -présentation
cours j2ee -présentationYassine Badri
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDOAbdoulaye Dieng
 
Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !Olivier Le Goaër
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Oxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewOxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewLudovic Piot
 

Similaire à Requêtes HTTP synchrones et asynchrones (20)

Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
 
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
 
ajax.pdf
ajax.pdfajax.pdf
ajax.pdf
 
0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajax0554-programmation-web-ajax programmation web ajax
0554-programmation-web-ajax programmation web ajax
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
 
Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)
 
Spring Batch
Spring BatchSpring Batch
Spring Batch
 
Serveur http
Serveur httpServeur http
Serveur http
 
cours j2ee -présentation
cours  j2ee -présentationcours  j2ee -présentation
cours j2ee -présentation
 
Serveurs
ServeursServeurs
Serveurs
 
Cours php
Cours phpCours php
Cours php
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
 
Rapport tp2 j2ee
Rapport tp2 j2eeRapport tp2 j2ee
Rapport tp2 j2ee
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Oxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewOxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overview
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturelAbdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API RESTAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express jsAbdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 

Requêtes HTTP synchrones et asynchrones

  • 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

Notes de l'éditeur

  1. https://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177
  2. Outlook Web App (anciennement Outlook Web Access) est un logiciel de messagerie web créé par Microsoft, et qui ressemble volontairement au logiciel Microsoft Outlook du même auteur. Il permet aux usagers d'accéder à leur courrier électronique à l'aide d'un navigateur web, en évitant la procédure préalable d'installation requise par Microsoft Outlook. Il est commercialisé au sein d'Office 365, de Microsoft Exchange Server ou d'Exchange Online.
  3. https://developer.mozilla.org/fr/docs/HTTP/M%C3%A9thode