AJAX - Đối tượng XMLHttpRequest
- Trang trước Giới thiệu AJAX
- Trang tiếp theo Yêu cầu AJAX
Đối tượng XMLHttpRequest là nền tảng của AJAX.
- Tạo đối tượng XMLHttpRequest
- Định nghĩa hàm gọi lại
- Mở đối tượng XMLHttpRequest
- Gửi yêu cầu đến máy chủ
Đối tượng XMLHttpRequest
Tất cả các trình duyệt hiện đại đều hỗ trợ Đối tượng XMLHttpRequest.
Đối tượng XMLHttpRequest có thể được sử dụng để trao đổi dữ liệu với máy chủ web. Điều này có nghĩa là có thể cập nhật một phần nội dung trang web mà không cần tải lại toàn bộ trang.
Tạo đối tượng XMLHttpRequest
Tất cả các trình duyệt hiện đại (Chrome, Firefox, IE, Edge, Safari, Opera) đều có Đối tượng XMLHttpRequest.
Cú pháp tạo đối tượng XMLHttpRequest:
variable = new XMLHttpRequest();
Định nghĩa hàm gọi lại
Hàm gọi lại là hàm được truyền làm tham số cho hàm khác.
Trong trường hợp này, hàm gọi lại nên chứa mã cần thực hiện khi phản hồi sẵn sàng.
xhttp.onload = function() {
// Làm gì khi phản hồi sẵn sàng
}
Gửi yêu cầu
Để gửi yêu cầu đến máy chủ, bạn có thể sử dụng đối tượng XMLHttpRequest. open() và send() Phương pháp:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Ví dụ
// Tạo đối tượng XMLHttpRequest
const xhttp = new XMLHttpRequest();
// Định nghĩa hàm gọi lại
xhttp.onload = function() {
// Bạn có thể sử dụng dữ liệu ở đây
}
// Gửi yêu cầu
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Truy cập chéo域 (Access Across Domains)
Do lý do an toàn, các trình duyệt hiện đại không cho phép truy cập chéo域.
Điều này có nghĩa là trang web và tệp XML mà nó cố gắng tải lên phải nằm trên cùng một máy chủ.
Các ví dụ trên CodeW3C.com mở tệp XML nằm trong域 CodeW3C.com.
Nếu bạn muốn sử dụng ví dụ trên trong một trong các trang web của mình, tệp XML mà bạn tải lên phải nằm trên máy chủ của bạn.
Phương pháp của đối tượng XMLHttpRequest
| Phương pháp | Mô tả |
|---|---|
| new XMLHttpRequest() | Tạo đối tượng XMLHttpRequest mới. |
| abort() | Hủy yêu cầu hiện tại. |
| getAllResponseHeaders() | Trả về thông tin tiêu đề. |
| getResponseHeader() | Trả về thông tin tiêu đề cụ thể. |
| open(method, url, async, user, psw) |
Định nghĩa yêu cầu.
|
| send() | Gửi yêu cầu đến máy chủ, sử dụng cho yêu cầu GET. |
| send(string) | Gửi yêu cầu đến máy chủ, sử dụng cho yêu cầu POST. |
| setRequestHeader() | Thêm cặp thẻ/giá trị vào tiêu đề cần gửi. |
Thuộc tính của đối tượng XMLHttpRequest
| Thuộc tính | Mô tả |
|---|---|
| onload | Định nghĩa hàm được gọi khi nhận được yêu cầu (tải lên). |
| onreadystatechange | Định nghĩa hàm được gọi khi thuộc tính readyState thay đổi. |
| readyState |
Lưu trạng thái XMLHttpRequest.
|
| responseText | Trả về dữ liệu phản hồi dưới dạng chuỗi. |
| responseXML | Trả về dữ liệu phản hồi dưới dạng dữ liệu XML. |
| trạng thái |
Trả về mã trạng thái yêu cầu
Để xem danh sách đầy đủ, vui lòng truy cập Http Thông tin thông điệp tham khảo |
| statusText | Trả về văn bản trạng thái (ví dụ "OK" hoặc "Not Found") |
Thuộc tính onload
Khi sử dụng XMLHttpRequest, bạn có thể định nghĩa một hàm gọi lại để thực thi khi nhận được phản hồi của yêu cầu.
Vui lòng định nghĩa hàm này trong đối tượng XMLHttpRequest: onload Hàm được định nghĩa trong thuộc tính:
Ví dụ
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Nhiều hàm gọi lại
Nếu có nhiều nhiệm vụ AJAX trong trang web, bạn nên tạo một hàm thực thi đối tượng XMLHttpRequest và tạo một hàm gọi lại cho mỗi nhiệm vụ AJAX.
Hàm gọi phải chứa URL và hàm được gọi khi phản hồi sẵn sàng.
Ví dụ
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// Đây là hành động
}
function myFunction2(xhttp) {
// Đây là hành động
}
Thuộc tính onreadystatechange
readyState Thuộc tính lưu trữ trạng thái của XMLHttpRequest.
onreadystatechange Thuộc tính định nghĩa một hàm gọi lại, được thực thi khi thuộc tính readyState thay đổi.
trạng thái Thuộc tính và statusText Thuộc tính lưu trữ trạng thái của đối tượng XMLHttpRequest.
| Thuộc tính | Mô tả |
|---|---|
| onreadystatechange | Định nghĩa hàm được gọi khi thuộc tính readyState thay đổi. |
| readyState |
Lưu trạng thái XMLHttpRequest.
|
| trạng thái |
Trả về mã trạng thái yêu cầu
Để xem danh sách đầy đủ, vui lòng truy cập Http Thông tin thông điệp tham khảo |
| statusText | statusText |
Trả về văn bản trạng thái (ví dụ như "OK" hoặc "Not Found").
Mỗi khi readyState thay đổi, hàm onreadystatechange sẽ được gọi. 4 và status là 200 Khi, phản hồi sẵn sàng:
Ví dụ
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
Sự kiện onreadystatechange được kích hoạt bốn lần (1-4), mỗi lần thay đổi readyState một lần.
- Trang trước Giới thiệu AJAX
- Trang tiếp theo Yêu cầu AJAX
