XMLHttpRequestEventTarget: progress event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers, except for Service Workers.
Sự kiện progress được kích hoạt định kỳ khi một yêu cầu nhận thêm dữ liệu.
Cú pháp
Dùng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt một thuộc tính xử lý sự kiện.
addEventListener("progress", (event) => { })
onprogress = (event) => { }
Kiểu sự kiện
Một ProgressEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Ngoài các thuộc tính được liệt kê bên dưới, các thuộc tính từ giao diện cha là Event cũng có sẵn.
lengthComputableRead only-
Cờ boolean cho biết tổng lượng công việc cần làm và lượng công việc đã hoàn thành bởi tiến trình nền có thể tính được hay không. Nói cách khác, nó cho biết mức tiến triển có đo được hay không.
loadedRead only-
Giá trị số nguyên không dấu 64 bit cho biết lượng công việc mà tiến trình nền đã thực hiện. Tỷ lệ công việc đã làm có thể được tính bằng cách chia giá trị thuộc tính này cho
total. Khi tải một tài nguyên bằng HTTP, giá trị này chỉ tính phần thân của thông điệp HTTP, không gồm header và phần phụ trội khác. totalRead only-
Giá trị số nguyên không dấu 64 bit biểu thị tổng lượng công việc mà tiến trình nền đang thực hiện. Khi tải một tài nguyên bằng HTTP, đây là
Content-Length(kích thước phần thân của thông điệp), không gồm các header và phần phụ trội khác.
Ví dụ
Dùng với XMLHttpRequest
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();
});
Kết quả
Dùng với XMLHttpRequestUpload
Bạn có thể dùng sự kiện progress để lấy thông tin về tiến trình của một lượt tải lên dài. Để xem ví dụ mã đầy đủ tải lên tệp và hiển thị thanh tiến trình, hãy xem trang XMLHttpRequestUpload chính.
// Mỗi khi nhận được một sự kiện progress, chúng ta cập nhật thanh tiến trình
// và thông báo tiến trình
xhr.upload.addEventListener("progress", (event) => {
progressBar.value = event.loaded; // Cập nhật thanh tiến trình
log.textContent = `Uploading (${((event.loaded / event.total) * 100).toFixed(
2,
)}%)…`;
});
Thông số kỹ thuật
| Specification |
|---|
| XMLHttpRequest # event-xhr-progress |
| XMLHttpRequest # handler-xhr-onprogress |