---
title: Formation XHR Request
tags: javascript
robots: noindex, nofollow
author: Julien Noyer
---
# XMLHttpRequest : les requête XHR
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>XMLHttpRequest : les requête XHR</title>
</head>
<body>
<h1>XMLHttpRequest : les requête XHR</h1>
<script>
/*
Configuration de la requête XHR
XMLHttpRequest est un objet JavaScript qui permet de récupérer des données via HTTP
*/
// Instanciation de l'objet XMLHttpRequest
const XHRrequest = new XMLHttpRequest();
// Définition de la fonction (ES5) de callback
XHRrequest.onreadystatechange = function(event) {
if (this.readyState == XMLHttpRequest.DONE) {
console.log('Requête XHR terminée.');
// Vérification de l'état de la requête
switch(this.status){
case 200:
console.log("Content-Type: %s", XHRrequest.getResponseHeader("Content-Type"));
console.log("Données reçues: %s", this.responseText);
break;
case 201:
console.log("Content-Type: %s", XHRrequest.getResponseHeader("Content-Type"));
console.log("Données crées: %s", this.responseText);
break;
default:
console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
break;
};
}
else { console.log('Requête XHR en cours...') };
};
//
/*
Lancer la requête XHR
Toutes les méthodes du CRUD sont possibles en XHR
*/
// Définition d'une variable pour tester les différentes méthodes
const requestType = 'POST';
if( requestType === 'GET' ){
// Méthode GET
XHRrequest.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
XHRrequest.send(null);
}
else if(requestType === 'POST'){
// Méthode POST : configurer le header de la requête et envoyer des données
XHRrequest.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
XHRrequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XHRrequest.send('title=Foo&body=bar');
}
else if(requestType === 'PUT'){
// Méthode PUT : configurer le header de la requête et envoyer des données
XHRrequest.open('PUT', 'https://jsonplaceholder.typicode.com/posts/1', true);
XHRrequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XHRrequest.send('title=Foo&body=bar');
}
else if(requestType === 'DELETE'){
// Méthode DELETE
XHRrequest.open('DELETE', 'https://jsonplaceholder.typicode.com/posts/1', true);
XHRrequest.send(null);
};
//
</script>
</body>
</html>
```
# $.ajax() : la méthode jQuery
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$.ajax() : la méthode jQuery</title>
</head>
<body>
<h1>$.ajax() : la méthode jQuery</h1>
<ul></ul>
<!-- Importer jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*
Définition d'une fonction Ajax en jQuery
La méthode Ajax de jQuery est une fonction qui intégrer les notions de requête XHR
*/
const AJAXrequest = (url, requestType, data = null) => {
// Utilisation de la méthode $.ajax()
$.ajax({
// Définition du header de la requête
url: url,
method: requestType,
data: data,
// Fonction de callback en cas de succès
success: (response) => {
console.log(`Succès de la requête ${requestType} AJAX.`);
console.log(response);
for( let post of response ){
document.querySelector('ul').innerHTML += `
<li>
<h2>${post.title}</h2>
<a href="${post.id}">Lire la suite</a>
</li>
`
};
},
// Fonction de callback en cas d'erreur
error: (err) => {
console.log(`Erreur de la requête ${requestType} AJAX.`);
console.error(err);
},
// Fonction de callback en fin de requête
complete: () => {
console.log(`${requestType} Requête AJAX terminée.`);
// Manipuler les éléments dynamiques du DOM
for( let link of document.querySelectorAll('a') ){
link.addEventListener('click', (event) => {
event.preventDefault();
console.log(`L'ID du post est ${link.getAttribute('href')}`);
})
}
}
});
};
//
/*
Lancer la requête AJAX
Toutes les méthodes du CRUD sont possibles en AJAX
*/
AJAXrequest(
'https://jsonplaceholder.typicode.com/posts',
'GET'
);
/* AJAXrequest(
'https://jsonplaceholder.typicode.com/posts',
'POST',
{ "title": "Foo", "body": "Bar" }
);
AJAXrequest(
'https://jsonplaceholder.typicode.com/posts/1',
'PUT',
{ "title": "Foo", "body": "Bar" }
);
AJAXrequest(
'https://jsonplaceholder.typicode.com/posts/1',
'DELETE'
); */
//
</script>
</body>
</html>
```
# FETCH : la nouvelle API pour les requêtes AJAX
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FETCH : la nouvelle API pour les requêtes AJAX</title>
</head>
<body>
<h1>FETCH : la nouvelle API pour les requêtes AJAX</h1>
<script>
/*
Définition d'une fonction FETCH
L'API FETCH est présente dans les navigateurs et permet d'exécuter des requête AAJX
*/
const FETCHrequest = ( url, requestType, data = null ) => {
console.log(`${requestType} Requête FETCH en cours...`);
// Définition du header de la requête
let requestHeader = {
method: requestType,
headers: {
'Content-Type': 'application/json'
}
};
// Ajouter les données dans les requêtes POST et PUT
if( requestType === 'POST' || requestType === 'PUT'){
requestHeader.body = JSON.stringify(data);
};
// Lancer la requête fetch
fetch( url, requestHeader )
.then( apiResponse => {
// Vérifier le status de la requête
if( apiResponse.ok ){
// Extraire les données JSON de la réponse
return apiResponse.json();
}
else{
console.error(apiResponse.statusText);
};
})
.then( jsonData => {
console.log(jsonData);
})
.catch( apiError => {
console.error(apiError);
});
};
//
/*
Lancer la requête FETCH
Toutes les méthodes du CRUD sont possibles avec l'API FETCH
*/
FETCHrequest(
'https://jsonplaceholder.typicode.com/posts',
'GET'
);
FETCHrequest(
'https://jsonplaceholder.typicode.com/posts',
'POST',
{ "title": "Foo", "body": "bar" }
);
FETCHrequest(
'https://jsonplaceholder.typicode.com/posts/1',
'PUT',
{ "title": "Foo", "body": "bar" }
);
FETCHrequest(
'https://jsonplaceholder.typicode.com/posts/1',
'DELETE'
);
//
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet