XMLHttpRequestEventTarget : évènement loadend
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Note : Cette fonctionnalité est disponible via les Web Workers, sauf pour les Service Workers.
L'évènement loadend est déclenché lorsqu'une requête est terminée, que ce soit avec succès (après load) ou en échec (après abort ou error).
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("loadend", (event) => { })
onloadend = (event) => { }
Type d'évènement
Un objet ProgressEvent. Hérite de Event.
Exemples
Utiliser XMLHttpRequest
HTML
<div class="controls">
<input
class="xhr success"
type="button"
name="xhr"
value="Cliquez pour démarrer XHR (succès)" />
<input
class="xhr error"
type="button"
name="xhr"
value="Cliquez pour démarrer XHR (erreur)" />
<input
class="xhr abort"
type="button"
name="xhr"
value="Cliquez pour démarrer XHR (annulation)" />
</div>
<textarea readonly class="event-log"></textarea>
JavaScript
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");
function handleEvent(e) {
log.textContent = `${log.textContent}${e.type} : ${e.loaded} octets transférés\n`;
}
function addListeners(xhr) {
xhr.addEventListener("loadstart", handleEvent);
xhr.addEventListener("load", handleEvent);
xhr.addEventListener("loadend", handleEvent);
xhr.addEventListener("progress", handleEvent);
xhr.addEventListener("error", handleEvent);
xhr.addEventListener("abort", handleEvent);
}
function runXHR(url) {
log.textContent = "";
const xhr = new XMLHttpRequest();
addListeners(xhr);
xhr.open("GET", url);
xhr.send();
return xhr;
}
xhrButtonSuccess.addEventListener("click", () => {
runXHR(
"https://raw.githubusercontent.com/mdn/content/main/files/fr/_wikihistory.json",
);
});
xhrButtonError.addEventListener("click", () => {
runXHR("http://i-dont-exist");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR(
"https://raw.githubusercontent.com/mdn/content/main/files/fr/_wikihistory.json",
).abort();
});
Résultat
Utiliser XMLHttpRequestUpload
Vous pouvez utiliser l'évènement loadend pour détecter la fin (qu'elle soit réussie ou non) d'un téléchargement. Pour un exemple de code complet qui télécharge un fichier et affiche une barre de progression, consultez la page principale XMLHttpRequestUpload.
// Lorsqu'un téléchargement est terminé, nous masquons la barre de progression.
xhr.upload.addEventListener("loadend", (event) => {
progressBar.classList.remove("visible");
if (event.loaded !== 0) {
// Terminaison réussie
log.textContent = "Téléversement terminé.";
}
abortButton.disabled = true;
});
Spécifications
| Spécification |
|---|
| XMLHttpRequest # event-xhr-loadend |
| XMLHttpRequest # handler-xhr-onloadend |