XMLHttpRequest API

Khái niệm và cách dùng

Giao diện trung tâm trong XMLHttpRequest API là XMLHttpRequest. Để tạo một yêu cầu HTTP:

1. Tạo một thể hiện XMLHttpRequest mới bằng cách gọi constructor của nó.
2. Khởi tạo nó bằng cách gọi XMLHttpRequest.open(). Tại đây bạn cung cấp URL cho yêu cầu, phương thức HTTP cần dùng, và tùy chọn tên người dùng cùng mật khẩu.
3. Gắn các bộ xử lý sự kiện để nhận kết quả của yêu cầu. Ví dụ, sự kiện load được kích hoạt khi yêu cầu hoàn tất thành công, còn sự kiện error được kích hoạt trong nhiều điều kiện lỗi khác nhau.
4. Gửi yêu cầu bằng cách gọi XMLHttpRequest.send().

Để xem hướng dẫn chi tiết về XMLHttpRequest API, hãy xem Using XMLHttpRequest.

Giao diện

FormData

Đối tượng biểu diễn các trường và giá trị của <form>, có thể gửi đến máy chủ bằng XMLHttpRequest hoặc fetch().

ProgressEvent

Một lớp con của Event được truyền vào sự kiện progress, và chứa thông tin về lượng yêu cầu đã hoàn tất.

XMLHttpRequest

Đại diện cho một yêu cầu HTTP đơn lẻ.

XMLHttpRequestEventTarget

Lớp cha của cả XMLHttpRequest và XMLHttpRequestUpload, định nghĩa các sự kiện có sẵn trong cả hai giao diện này.

XMLHttpRequestUpload

Đại diện cho tiến trình tải lên của một upload HTTP. Cung cấp các sự kiện để theo dõi tiến trình tải lên.

Ví dụ

Lấy dữ liệu JSON từ máy chủ

Trong ví dụ này, chúng ta lấy một tệp JSON từ https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json, đồng thời thêm các bộ lắng nghe sự kiện để hiển thị tiến trình.

HTML

<div class="controls">
  <button class="xhr" type="button">Click to start XHR</button>
</div>

<textarea readonly class="event-log"></textarea>

.event-log {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}

JavaScript

const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";

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);
}

xhrButton.addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  addListeners(xhr);
  xhr.send();
});

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Fetch API