Đối tượng XMLHttpRequest trong AJAX - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Đối tượng XMLHttpRequest trong AJAX

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Yếu tố quyết định của AJAX là đối tượng XMLHttpRequest.

Đối tượng XMLHttpRequest

Tất cả các trình duyệt hiện nay đề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ột máy chủ web đằng sau hậu trường. Điều này có nghĩa là có thể cập nhật các phần của một trang web mà không cần tải lại toàn bộ trang.

Tạo một đối tượng XMLHttpRequest

Tất cả các trình duyệt hiện đại (Chrome, Firefox, IE7 +, Edge, Safari, Opera) đều có một đối tượng XMLHttpRequest. Cú pháp để tạo một đối tượng XMLHttpRequest:

variable = new XMLHttpRequest();

Ví dụ:

var xhttp = new XMLHttpRequest();

Truy cập qua các tên miền

Vì lý do bảo mật, các trình duyệt hiện nay không cho phép truy cập qua các tên miền. Điều này có nghĩa là cả trang web lẫn tệp tin XML mà nó cố tải phải nằm trên cùng một máy chủ.

Các ví dụ trong bài viết này được sử dụng tất cả các tệp XML mở nằm trên tên miền W3Schools.

Các trình duyệt cũ hơn (IE5 và IE6)

Các phiên bản cũ của Internet Explorer (5/6) sử dụng đối tượng ActiveX thay vì đối tượng XMLHttpRequest:

variable = new ActiveXObject(“Microsoft.XMLHTTP”);

Để xử lý IE5 và IE6, cần kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest hay không, tạo một đối tượng ActiveX:

if (window.XMLHttpRequest) {
    // code for modern browsers
    xmlhttp = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Phương thức đối tượng XMLHttpRequest

Phương thức Mô tả
new XMLHttpRequest() Tạo một đối tượng XMLHttpRequest mới
abort() Hủy yêu cầu hiện tại
getAllResponseHeaders() Trả về thông tin về phần header
getResponseHeader() Trả về thông tin cụ thể phần header
open(method, url, async, user, psw) Chỉ định yêu cầu:

method: yêu cầu GET hoặc POST
url: vị trí file
async: true (không đồng bộ) hoặc false (đồng bộ)
user: tùy chọn username
psw: tùy chọn mật khẩu

send() Gửi một yêu cầu đến máy chủ
Được sử dụng cho yêu cầu GET
send(string) Gửi yêu cầu đến máy chủ.
Được sử dụng cho các yêu cầu POST
setRequestHeader() Thêm một cặp nhãn / giá trị vào phần header được gửi.

Thuộc tính đối tượng XMLHttpRequest

Thuộc tính Mô tả
onreadystatechange Định nghĩa một hàm được gọi khi thuộc tính readyState thay đổi
readyState Giữ trạng thái của XMLHttpRequest.
0: yêu cầu không khởi tạo
1: thiết lập kết nối máy chủ
2: yêu cầu nhận được
3: yêu cầu xử lý
4: yêu cầu hoàn thành và phản hồi đã sẵn sàng
responseText Trả về dữ liệu phản hồi dưới dạng một chuỗi
responseXML Trả về dữ liệu phản hồi dưới dạng dữ liệu XML
status Trả về số trạng thái của một yêu cầu
200: “OK”
403: “Forbidden”
404: “Not Found”
statusText Trả về văn bản trạng thái (“OK” hoặc “Not Found”)