XMLHttpRequestEventTarget: abort 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 abort được kích hoạt khi một yêu cầu đã bị hủy, ví dụ vì chương trình đã gọi XMLHttpRequest.abort().
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("abort", (event) => { })
onabort = (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("/shared-assets/images/examples/balloon.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://example.com/some-path");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("/shared-assets/images/examples/balloon.jpg").abort();
});
Kết quả
Dùng với XMLHttpRequestUpload
Bạn có thể dùng sự kiện abort để dừng việc tải lên trước khi nó hoàn tất. Để 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.
// Trong trường hợp bị hủy, chúng ta ẩn thanh tiến trình
// Lưu ý rằng sự kiện này cũng có thể được lắng nghe trên đối tượng xhr
function errorAction(event) {
progressBar.classList.remove("visible");
log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("abort", errorAction);
Thông số kỹ thuật
| Specification |
|---|
| XMLHttpRequest # event-xhr-abort |
| XMLHttpRequest # handler-xhr-onabort |