Sự Kiện

Khi gửi yêu cầu tới máy chủ sử dụng AJAX thì thông thường chúng ta sẽ muốn đăng ký một hay nhiều nhiệm vụ cần thực hiện nhận được kết quả gửi về từ máy chủ. Sự kiện máy chủ gửi về kết quả cho trình duyệt sẽ được theo dõi sử dụng thuộc tính onreadystatechange của đối tượng XMLHttpRequest .

Trước tiên chúng ta cần tìm hiểu hai thuộc tính readyStatestatus của đối tượng XMLHttpRequest.

Thuộc Tính readyState

Thuộc tính readyState của đối tượng XMLHttpRequest được sử dụng để đặc trưng cho trạng thái của yêu cầu (request) gửi tới máy chủ. Thuộc tính này có các giá trị sau:

  • 0: Yêu cầu chưa được gửi đi.
  • 1: Đã thiết lập kết nối với máy chủ thành công.
  • 2: Máy chủ đã nhận được yêu cầu gửi tới.
  • 3: Máy chủ đang xử lý yêu cầu gửi tới.
  • 4: Yêu cầu được xử lý thành công và máy chủ hoàn tất việc gửi về kết quả cho trình duyệt.

Thuộc Tính status

Thuộc tính này được dùng để xác định trạng thái của kết quả gửi về trình duyệt từ server. Thuộc tính status có những giá trị sau:

  • 200: Trang yêu cầu đã được tìm thấy và máy chủ trả về kết quả.
  • 404: Trang yêu cầu không tồn tại.

Thuộc Tính onreadystatechange

Sử dụng thuộc tính onreadystatechange của đối tượng XMLHttpRequest chúng ta có thể bắt được sự kiện diễn ra khi thuộc tính readyState của đối tượng này thay đổi. Thuộc tính này nhận giá trị là một hàm và đoạn mã của hàm sẽ được thực thi khi giá trị của thuộc tính readyState thay đổi:

// cấu hình XMLHttpRequest
var xhttp = new XMLHttpRequest();

// đăng ký các nhiệm vụ sẽ được thực hiện sử dụng onreadystatechange
xhttp.onreadystatechange = function() {
   // mã lệnh sẽ được thực hiện
}

Ví dụ để bắt sự kiện máy chủ đã hoàn tất việc xử lý yêu cầu và gửi về kết quả cho trình duyệt chúng ta dùng đoạn mã sau:

// cấu hình XMLHttpRequest
xhttp.open("GET", "/get-name.php?id=1", true);

xhttp.onreadystatechange = function() {
    // mã lệnh sẽ được thực thi khi máy chủ gửi về kết quả (readyState = 4)
    // và trang yêu cầu đã được tìm thấy (status = 200)
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        alert("OK");
    }
};

// gửi request
xhttp.send();
JavaScript Ajax
Thêm Bình Luận: