window.onload = function(){
console.log('window.onload function')
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var presta = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < presta.length; i++) {
var option = document.createElement('option');
option.value = presta[i].codePrestation;
option.text = presta[i].prestation;
document.getElementById('p-designation').appendChild(option);
}
}
};
xmlhttp.open('GET', '/api/products', true);
xmlhttp.send();
}
Ce code JavaScript est conçu pour s'exécuter une fois que la fenêtre a entièrement chargé, comme indiqué par l'événement window.onload
. La fonction attachée à cet événement commence par enregistrer un message dans la console à des fins de débogage.
Ensuite, il crée une nouvelle instance de XMLHttpRequest
, qui est un objet intégré au navigateur qui permet de faire des requêtes HTTP pour récupérer des données d'un serveur. Cela est utilisé pour récupérer des données à partir d'un point de terminaison API.
La propriété onreadystatechange
de l'objet XMLHttpRequest
est assignée à une fonction qui sera exécutée chaque fois que le readyState
change. La propriété readyState
contient le statut de l'XMLHttpRequest
. Un readyState
de 4 signifie que l'opération est terminée, et un status
de 200 signifie que la requête a réussi.
Lorsque le readyState
est 4 et le status
est 200, la fonction analyse le texte de réponse JSON en un objet JavaScript et le stocke dans la variable presta
.
Le code entre ensuite dans une boucle qui itère sur le tableau presta
. Pour chaque élément du tableau, il crée un nouvel élément option
pour une liste déroulante (ou élément select
). Il définit la value
de l'option comme étant la propriété codePrestation
de l'élément actuel, et le texte d'affichage de l'option comme étant la propriété prestation
de l'élément actuel. Cette nouvelle option est ensuite ajoutée à l'élément select
avec l'id p-designation
.
Enfin, la méthode open
est appelée sur l'objet XMLHttpRequest
pour initialiser une nouvelle requête. Le premier argument est la méthode HTTP à utiliser (GET
), le deuxième argument est l'URL du point de terminaison de l'API (/api/products
), et le troisième argument est une valeur booléenne indiquant si la requête doit être faite de manière asynchrone (true
). La méthode send
est ensuite appelée pour envoyer la requête.