AJAX - phản hồi từ máy chủ

Thuộc tính onreadystatechange

readyState Thuộc tính lưu lại trạng thái XMLHttpRequest.

onreadystatechange Thuộc tính định nghĩa hàm được thực thi khi thuộc tính readyState thay đổi.

status Thuộc tính và statusText Thuộc tính lưu lại trạng thái đố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 lại trạng thái XMLHttpRequest.

  • 0: Yêu cầu chưa được khởi tạo
  • 1: Kết nối với máy chủ đã được thiết lập
  • 2: Yêu cầu đã được nhận
  • 3: Đang xử lý yêu cầu
  • 4: Yêu cầu đã hoàn thành và phản hồi đã sẵn sàng
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

Để xem danh sách đầy đủ, vui lòng truy cập Tài liệu tham khảo thông điệp HTTP
statusText trả về trạng thái văn bản (ví dụ "OK" hoặc "Not Found")

Mỗi khi readyState thay đổi, hàm onreadystatechange sẽ được gọi.

Khi readyState cho 4,status cho 200 thì phản hồi đã sẵn sàng:

Mẫu

function loadDoc() {
    var 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", true);
    xhttp.send(); 
}

Thử trực tiếp

Ghi chú:onreadystatechange được kích hoạt năm lần (0-4), mỗi lần readyState đều thay đổi.

Sử dụng hàm hồi gọi

Hàm hồi gọi là một hàm được truyền làm tham số vào một hàm khác.

Nếu trang web của bạn có nhiều nhiệm vụ AJAX, bạn nên tạo một hàm thực thi đối tượng XMLHttpRequest và một hàm hồi gọi cho mỗi nhiệm vụ AJAX.

Hàm này nên chứa URL và hàm được gọi khi phản hồi sẵn sàng.

Mẫu

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Hành động ở đây
 } 
function myFunction2(xhttp) {
  // Hành động ở đây
 }

Thử trực tiếp

Thuộc tính phản hồi của máy chủ

Thuộc tính Mô tả
responseText Lấy dữ liệu phản hồi dưới dạng chuỗi
responseXML Lấy dữ liệu phản hồi dưới dạng XML

Phương pháp phản hồi của máy chủ

Phương pháp Mô tả
getResponseHeader() Trả về thông tin đầu cuối cụ thể từ máy chủ
getAllResponseHeaders() Trả về tất cả các thông tin đầu cuối từ máy chủ

thuộc tính responseText

responseText thuộc tính trả về phản hồi của máy chủ dưới dạng chuỗi JavaScript, vì vậy bạn có thể sử dụng nó như sau:

Mẫu

document.getElementById("demo").innerHTML = xhttp.responseText;

Thử trực tiếp

thuộc tính responseXML

Đối tượng XML HttpRequest có bộ giải mã XML tích hợp.

ResponseXML trả về thuộc tính dưới dạng đối tượng XML DOM.

Sử dụng thuộc tính này, bạn có thể lấy phản hồiGiải mãcho đối tượng XML DOM:

Mẫu

Yêu cầu tệp music_list.xmlvà phân tích phản hồi:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

Thử trực tiếp

Bạn sẽ học thêm về XML DOM trong phần DOM của hướng dẫn này.

Phương thức getAllResponseHeaders()

getAllResponseHeaders() Phương thức trả về tất cả thông tin tiêu đề từ phản hồi của máy chủ.

Mẫu

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

Thử trực tiếp

Phương thức getResponseHeader()

getResponseHeader() Phương thức trả về thông tin tiêu đề cụ thể từ phản hồi của máy chủ.

Mẫu

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Thử trực tiếp