Phản hồi máy chủ trong AJAX

Thuộc tính onreadystatechange

Thuộc tính readyState giữ trạng thái của XMLHttpRequest. Thuộc tính onreadystatechange định nghĩa một hàm sẽ được thực hiện khi readyState thay đổi.

Thuộc tính status và thuộc tính statusText giữ trạng thái của đối tượng XMLHttpRequest.

Hàm onreadystatechange được gọi là mỗi khi readyState thay đổi. Khi readyState là 4 và trạng thái là 200, phản hồi sẵn sàng:

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(); 
}

Sự kiện onreadystatechange được kích hoạt bốn lần (1-4), một lần cho mỗi thay đổi trong readyState.

Sử dụng hàm gọi lại

Hàm gọi lại là một hàm truyền như một tham số cho một hàm khác. Nếu bạn có nhiều hơn một tác vụ AJAX trong một trang web, bạn nên tạo một hàm để thực hiện đối tượng XMLHttpRequest và một hàm gọi lại cho mỗi tác vụ AJAX.

Các cuộc gọi hàm nên có URL và hàm để gọi khi đáp ứng đã sẵn sàng.

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) {
  // action goes here
} 
function myFunction2(xhttp) {
  // action goes here
}

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

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

Thuộc tính responseText

Thuộc tính responseText trả về phản hồi của máy chủ dưới dạng một chuỗi JavaScript và bạn có thể sử dụng cho phù hợp:

document.getElementById(“demo”).innerHTML = xhttp.responseText;

Thuộc tính responseXML

Đối tượng XML HttpRequest có trình phân tích cú pháp XML. Thuộc tính responseXML trả về phản hồi của máy chủ như một đối tượng XML DOM.

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

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", "cd_catalog.xml", true);
xhttp.send();

Phương thức getAllResponseHeaders()

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

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

Phương thức getResponseHeader()

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

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();