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

Chp1 - Introduction à l'AGL
Chp1 - Introduction à l'AGLChp1 - Introduction à l'AGL
Chp1 - Introduction à l'AGL
Lilia Sfaxi
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
Lilia Sfaxi
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Faycel Chaoua
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
Youness Boukouchi
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
ENSET, Université Hassan II Casablanca
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
Ines Ouaz
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Mehdi Hamime
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
Florian Beaufumé
 
diagramme de séquence UML
diagramme de séquence UMLdiagramme de séquence UML
diagramme de séquence UML
Amir Souissi
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
Lilia Sfaxi
 
Cours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweightCours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweight
ENSET, Université Hassan II Casablanca
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Ippon
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
DNG Consulting
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Base de donnees Avancees et Intro à NoSQL.ppt
Base de donnees Avancees et Intro à  NoSQL.pptBase de donnees Avancees et Intro à  NoSQL.ppt
Base de donnees Avancees et Intro à NoSQL.ppt
Idriss22
 
CV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EECV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EE
Sid Ahmed Benkraoua
 

Tendances (20)

Chp1 - Introduction à l'AGL
Chp1 - Introduction à l'AGLChp1 - Introduction à l'AGL
Chp1 - Introduction à l'AGL
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
 
Microservices avec Spring Cloud
Microservices avec Spring CloudMicroservices avec Spring Cloud
Microservices avec Spring Cloud
 
diagramme de séquence UML
diagramme de séquence UMLdiagramme de séquence UML
diagramme de séquence UML
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Cours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweightCours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweight
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Base de donnees Avancees et Intro à NoSQL.ppt
Base de donnees Avancees et Intro à  NoSQL.pptBase de donnees Avancees et Intro à  NoSQL.ppt
Base de donnees Avancees et Intro à NoSQL.ppt
 
CV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EECV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EE
 

Similaire à Requêtes HTTP synchrones et asynchrones

Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
Abdoulaye Dieng
 
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllllajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
ajqxè_àànndkllllllllllllllllllllllllllllllllllllllllll
Elalami8
 
ajax.pdf
ajax.pdfajax.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
MarouaneMyyara2
 
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 2024
YounesOuladSayad1
 
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
 
Spring Batch
Spring BatchSpring Batch
Spring Batch
victor_gallet
 
Introduction to prograaming using ajax PHP JS
Introduction to prograaming using ajax PHP JSIntroduction to prograaming using ajax PHP JS
Introduction to prograaming using ajax PHP JS
AliHusseini14
 
cours j2ee -présentation
cours  j2ee -présentationcours  j2ee -présentation
cours j2ee -présentation
Yassine Badri
 
Serveurs
ServeursServeurs
Serveurs
Doha Smaili
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
 
Services rest & jersey
Services rest & jerseyServices rest & jersey
Services rest & jersey
Mathieu Hicauber
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
borhen boukthir
 
Rapport tp2 j2ee
Rapport tp2 j2eeRapport tp2 j2ee
Rapport tp2 j2ee
Soukaina Boujadi
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye 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
 
Oxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overviewOxalide Workshop #3 - Elasticearch, an overview
Oxalide Workshop #3 - Elasticearch, an overview
Ludovic 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
 
Introduction to prograaming using ajax PHP JS
Introduction to prograaming using ajax PHP JSIntroduction to prograaming using ajax PHP JS
Introduction to prograaming using ajax PHP JS
 
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 !
 
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 naturel
Abdoulaye Dieng
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
Abdoulaye Dieng
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
Abdoulaye Dieng
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
Abdoulaye Dieng
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
Abdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

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
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 

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