AJAX – XMLHttpRequest

XMLHttpRequest là chìa khóa của AJAX. Nó đã có sẵn kể từ khi Internet Explorer 5.5 được phát hành vào tháng 7 năm 2000. Nhưng không được phát hiện đầy đủ cho đến khi AJAX và Web 2.0 vào năm 2005 trở nên phổ biến.

XMLHttpRequest (XHR) là một API. Nó có thể được sử dụng bởi JavaScript, JScript, VBScript và các ngôn ngữ kịch bản trình duyệt web khác. Để truyền, thao tác dữ liệu XML đi và đến một máy chủ web bằng HTTP. Thiết lập một kênh kết nối độc lập giữa Server Client.

Dữ liệu trả về từ khi gọi XMLHttpRequest thường sẽ được cung cấp bởi cơ sở dữ liệu phía sau. Bên cạnh XML, XMLHttpRequest có thể được sử dụng để tìm nạp dữ liệu ở các định dạng khác. Ví dụ: JSON hoặc thậm chí văn bản thuần túy.

Bạn đã thấy một vài ví dụ về cách tạo một đối tượng XMLHttpRequest ở các phần trước.

Dưới đây là một số phương thức và thuộc tính mà bạn phải làm quen.

Phương thức XMLHttpRequest

  • abort() – Hủy yêu cầu hiện tại.
  • getAllResponseHeaders() – Trả về tập hợp đầy đủ các tiêu đề HTTP dưới dạng một chuỗi.
  • getResponseHeader(headerName) – Trả về giá trị của tiêu đề HTTP được chỉ định.
  • open( method, URL )
  • open( method, URL, async )
  • open( method, URL, async, userName )
  • open( method, URL, async, userName, password )
- Chỉ định phương thức, URL và các thuộc tính tùy chọn khác của một yêu cầu. 
- Tham số phương thức có thể có giá trị là "GET", "POST" hoặc "HEAD". Có thể có các phương thức HTTP khác như "PUT" và "DELETE" (chủ yếu được sử dụng trong các ứng dụng REST).
- Tham số "async" chỉ định, liệu yêu cầu có nên được xử lý theo cách không đồng bộ hay không?. "true" có nghĩa là quá trình xử lý tập lệnh được tiếp tục sau phương thức send () mà không cần đợi phản hồi và "false" có nghĩa là tập lệnh chờ phản hồi trước khi tiếp tục xử lý tập lệnh. 
  • send( content ) – Gửi yêu cầu.
  • setRequestHeader( label, value ) – Thêm một cặp nhãn/giá trị vào tiêu đề HTTP sẽ được gửi.

Thuộc tính XMLHttpRequest

  • onreadystatechange – Một trình xử lý sự kiện cho một sự kiện xảy ra ở mọi thay đổi trạng thái.
  • readyState – Thuộc tính readyState xác định trạng thái hiện tại của đối tượng XMLHttpRequest. Bảng sau cung cấp danh sách các giá trị có thể có cho thuộc tính readyState
StateDescription
0Yêu cầu không được khởi tạo.
1Yêu cầu đã được thiết lập.
2Yêu cầu đã được gửi đi.
3Yêu cầu đang được xử lý.
4Yêu cầu đã hoàn thành.
readyState = 0 Sau khi bạn đã tạo đối tượng XMLHttpRequest, nhưng trước khi bạn gọi phương thức open().
readyState = 1 Sau khi bạn gọi phương thức open(), nhưng trước khi bạn gọi send().
readyState = 2 Sau khi bạn gọi send().
readyState = 3 Sau khi trình duyệt thiết lập kết nối với máy chủ, nhưng trước khi máy chủ hoàn thành phản hồi.
readyState = 4 Sau khi yêu cầu được hoàn thành và dữ liệu phản hồi đã được nhận hoàn toàn từ máy chủ. 
  • responseText – Trả về phản hồi dưới dạng một chuỗi.
  • responseXML – Trả về phản hồi dưới dạng XML. Thuộc tính này trả về một đối tượng tài liệu XML, đối tượng này có thể được kiểm tra và phân tích cú pháp bằng cách sử dụng các phương thức và thuộc tính của cây nút DOM W3C.
  • status – Trả về trạng thái dưới dạng số (VD : 404 là “Not Found” và 200 là “OK“).
  • statusText – Trả về trạng thái dưới dạng một chuỗi (VD : “Not Found” hoặc “OK“).