En JavaScript, il existe différentes façons de faire des requêtes HTTP, notamment en utilisant les objets XMLHttpRequest, Fetch API, ou des libraires tierces comme Axios et jQuery. Voici un aperçu de la façon dont vous pouvez réaliser cela avec chaque méthode :
1. XMLHttpRequest:
Pour une requête GET :
```
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘https://api.example.com/data’, true);
xhr.onreadystatechange = function () {
if (xhr.readyState 4 && xhr.status 200)
console.log(JSON.parse(xhr.responseText));
}
xhr.send();
```
Pour un POST:
```
var xhr = new XMLHttpRequest();
var url = ‘https://api.example.com/data’;
xhr.open(‘POST’, url, true);
xhr.setRequestHeader(‘Content-type’, ‘application/json’);
xhr.onreadystatechange = function () {
if (xhr.readyState 4 && xhr.status 200)
console.log(xhr.responseText);
}
xhr.send(JSON.stringify({key:‘value’}));
```
1. Fetch API:
Pour une requête GET :
```
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
```
Pour un POST:
```
fetch(‘https://api.example.com/data’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ key: ‘value’ })
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error(‘Error:’, error));
```
1. Axios:
Axios est une librairie Promise-based pour les requêtes HTTP, elle simplifie le traitement des erreurs et est également capable d’exécuter simultanément plusieurs requêtes.
Pour une requête GET :
```
axios.get(‘https://api.example.com/data’)
.then(response => {
console.log(response.data);
});
```
Pour un POST:
```
axios.post(‘https://api.example.com/data’, {
key: ‘value‘
})
.then(response => {
console.log(response.data);
});
```
1. jQuery
Pour une requête GET :
```
$.get(‘https://api.example.com/data’, function(data, status){
console.log(data);
});
```
Pour un POST:
```
$.post(‘https://api.example.com/data’,
{
key : ‘value‘
},
function(data, status){
console.log(data);
}
);
```
Pour les PUT et DELETE vous pouvez utiliser le même processus, juste un changement de méthode d’appel respectivement ‘PUT’ et ‘DELETE’.
Remarque: Les requêtes HTTP doivent être effectuées en asynchrone dans une réelle application pour éviter le blocage de l’interface utilisateur, XMLHttpRequest open() a un paramètre pour cela qui est généralement mis à true pour les requêtes asynchrones.
