XMLHttpRequest: событие loadend

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузера. Она доступна в браузерах с июля 2015 года.

Примечание: Эта функция доступна в Потоках Web Workers, за исключением Рабочих потоков Service Workers.

Событие loadend срабатывает, когда запрос завершен, будь то успешно (после load) или неудачно (после abort или error).

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("loadend", (event) => {});

onloadend = (event) => {};

Тип события

Объект ProgressEvent. Наследуется от Event.

Свойства события

Помимо перечисленных ниже свойств, доступны свойства из родительского интерфейса Event.

lengthComputable Только для чтения: Логическое значение, указывающее, можно ли вычислить общий объем работы, и объем уже выполненной работы, подлежащей обработке. Другими словами, оно показывает, измеряется ли прогресс.
loaded Только для чтения: Целое число без знака 64-разрядной точности, указывающее объем работы, уже выполненной подлежащей обработке. Пропорцию выполненной работы можно рассчитать, разделив значение этого свойства на total. При загрузке ресурса по протоколу HTTP, учитывается только тело HTTP сообщения, заголовки и другие накладные расходы не включаются.
total Только для чтения: Целое число без знака 64-разрядной точности, представляющее общий объем работы, выполняемой в процессе. При загрузке ресурса по протоколу HTTP, это Content-Length (размер тела сообщения), заголовки и другие накладные расходы не включаются.

Примеры

Отображаемый пример

HTML

<div class="controls">
  <input
    class="xhr success"
    type="button"
    name="xhr"
    value="Click to start XHR (success)" />
  <input
    class="xhr error"
    type="button"
    name="xhr"
    value="Click to start XHR (error)" />
  <input
    class="xhr abort"
    type="button"
    name="xhr"
    value="Click to start XHR (abort)" />
</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} bytes transferred\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/en-us/_wikihistory.json",
  );
});

xhrButtonError.addEventListener("click", () => {
  runXHR("http://i-dont-exist");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR(
    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",
  ).abort();
});

Результат

Спецификации

Спецификация
XMLHttpRequest # event-xhr-loadend
XMLHttpRequest # handler-xhr-onloadend

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`loadend_event`	18	12	5	≤12.1	4	18	5	≤12.1	3	1.0	4.4

См. также

Связанные события: loadstart, load, progress, error, abort
Отслеживание прогресса

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/loadend_event