Er zijn veel manieren om HTTP-verzoeken te maken in JavaScript, waaronder fetch API, XMLHTTPRequest, en het gebruik van bibliotheken zoals jQuery, axios en nog veel meer. Hier zal ik voorbeelden geven met behulp van de fetch API en XMLHTTPRequest.
Voorbeeld met Fetch API:
// GET Request
fetch(‘https://api.example.com/data’, {
method: ‘GET’,
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => {
console.error(‘Error:’, error);
});
// POST Request
fetch(‘https://api.example.com/data’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => console.log(‘Success:’, data))
.catch((error) => {
console.error(‘Error:’, error);
});
// PUT & DELETE verzoeken zijn vergelijkbaar met POST. Verander gewoon de method naar PUT of DELETE.
Voorbeeld met XMLHTTPRequest:
// GET Request
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();
// POST Request
var xhr = new XMLHttpRequest();
var data = JSON.stringify({ “name”: “John”, “age”: 30 });
xhr.open(“POST”, ‘https://api.example.com/data’, true);
xhr.setRequestHeader(“Content-Type”, “application/json”);
xhr.onreadystatechange = function () {
if (xhr.readyState = 4 && xhr.status = 200) {
console.log(JSON.parse(xhr.responseText));
}
}
xhr.send(data);
// PUT & DELETE verzoeken zijn vergelijkbaar met POST. Verander gewoon de open-methode naar PUT of DELETE, respectievelijk.
Houd er rekening mee dat deze voorbeelden niet de mogelijke beveiligingsproblemen behandelen. Ze zijn puur illustratief voor hoe u http-aanroepen kunt doen in JS. Zorg ervoor dat uw werkelijke code beveiligingsproblemen correct afhandelt, zoals bijvoorbeeld CORS.
Zorg er ook voor dat de URL’s en de data/body die u doorstuurt correct zijn volgens uw API-schema.
