XMLHttpRequest (XHR)

Việc giới thiệu XMLHttpRequest (XHR) trong các trình duyệt vào giữa những năm 2000 là một thành công lớn cho Nền tảng web. Hãy xem nó hoạt động như thế nào.

Giới thiệu

Việc giới thiệu XMLHttpRequest (XHR) trong các trình duyệt vào giữa những năm 2000 là một thành công lớn cho Nền tảng web. Hãy xem nó hoạt động như thế nào.

Những thứ bây giờ trông bình thường, trở lại trong ngày, trông giống như chúng đến từ tương lai. Ví dụ, tôi đang nói về GMail hoặc Google Maps, tất cả đều dựa phần lớn vào XHR.

XHR được phát minh tại Microsoft vào những năm 90 và trở thành một tiêu chuẩn thực tế khi tất cả các trình duyệt triển khai nó trong giai đoạn 2002-2006. W3C chuẩn hóa XMLHttpRequest vào năm 2006.

Vì đôi khi nó có thể xảy ra trong Nền tảng web, ban đầu có một số mâu thuẫn khiến việc làm việc với XHR khá khác biệt trên nhiều trình duyệt.

Các thư viện như jQuery đã trở nên phổ biến hơn bằng cách cung cấp tính trừu tượng dễ sử dụng cho các nhà phát triển và điều này đã giúp phổ biến việc sử dụng công nghệ này.

Một yêu cầu XHR mẫu

Đoạn mã sau tạo một đối tượng yêu cầu XMLHttpRequest (XHR) và đính kèm một hàm gọi lại phản hồi trênonreadystatechangebiến cố.

Kết nối xhr được thiết lập để thực hiện yêu cầu GET đểhttps://yoursite.comvà nó bắt đầu vớisend()phương pháp:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

Tham số open () bổ sung

Trong ví dụ trên, chúng tôi chỉ chuyển phương thức và URL cho yêu cầu.

Chúng tôi cũng có thể chỉ định các phương thức HTTP khác - (get,post,head,put,delete,options).

Các thông số khác cho phép bạn chỉ định một cờ để làm cho yêu cầu đồng bộ nếu được đặt thành false và một tập hợp thông tin xác thực để xác thực HTTP:

open(method, url, asynchronous, username, password)

onreadystatechange

Cáconreadystatechangeđược gọi nhiều lần trong một yêu cầu XHR. Chúng tôi rõ ràng bỏ qua tất cả các trạng thái ngoàireadyState === 4, có nghĩa là yêu cầu đã được thực hiện.

Các tiểu bang là

  • 1 (ĐÃ MỞ): yêu cầu bắt đầu
  • 2 (HEADERS_RECEIVED): các tiêu đề HTTP đã được nhận
  • 3 (TẢI): phản hồi bắt đầu tải xuống
  • 4 (XONG): phản hồi đã được tải xuống

Hủy yêu cầu XHR

Yêu cầu XHR có thể bị hủy bỏ bằng cách gọiabort()phương pháp trênxhrvật.

So sánh với jQuery

Với jQuery, những dòng này có thể được dịch thành:

$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

So sánh với Tìm nạp

VớiAPI tìm nạpđây là mã tương đương:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

Yêu cầu tên miền chéo

Lưu ý rằng kết nối XMLHttpRequest phải tuân theo các giới hạn cụ thể được thực thi vì lý do bảo mật.

Một trong những điều rõ ràng nhất là việc thực thi chính sách cùng xuất xứ.

Bạn không thể truy cập tài nguyên trên máy chủ khác,trừ khimáy chủ hỗ trợ rõ ràng điều này bằng cách sử dụngCORS (Chia sẻ tài nguyên nguồn gốc chéo).

Tải lên tệp bằng XHR

Kiểm tra hướng dẫn của tôi vềcách tải tệp lên bằng XHR.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt:


Công nghệ Wiki trực tuyến!