1. Thuộc tính phản hồi từ Server trong Ajax

Để nhận phản hồi Response từ một Server , ta sử dụng thuộc tính responseText hoặc responseXML của đối tượng XMLHttpRequest .

  • Thuộc tính responseText nhận dữ liệu phản hồi dưới dạng chuỗi
  • Thuộc tính responseXML nhận dữ liệu phản hồi dưới dạng XML

1.1. Thuộc tính responseText

Thuộc tính responseText trả về dữ liệu phản hồi của máy chủ dưới dạng một chuỗi Js. Nếu Response từ một Server không phải là dữ liệu dưới dạng XML , ta nên sử dụng thuộc tính responseText này.

Ví dụ:

<div id="demo">
<h2>XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Click</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

1.2. Thuộc tính responseXML

Đối tượng XMLHttpRequest có trình phân tích cú pháp XML được tích hợp sẵn. Thuộc tính responseXML trả về phản hồi máy chủ dưới dạng đối tượng DOM XML . Sử dụng thuộc tính này, ta có thể phân tích cú pháp phản hồi dưới dạng đối tượng DOM XML . Nếu Response từ một Server là dữ liệu dưới dạng XML ta nên sử dụng thuộc tính responseXML

Ví dụ:

<html>
<body>

<button type="button" onclick="loadDoc()">Hiển thị danh sách đĩa CD</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp, xmlDoc, txt, x, i;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    xmlDoc = xhttp.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("ARTIST");
    for (i = 0; i < x.length; i++) {
      txt = txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
</script>

</body>
</html>

2. Phương thức phản hồi từ Server trong Ajax

Ta có 2 phương thức chính được sử dụng trong đối tượng XMLHttpRequest .

  • Phương thức getResponseHeader() : Trả về thông tin header cụ thể từ tài nguyên Server
  • Phương thức getAllResponseHeaders() : Trả về tất cả thông tin header từ tài nguyên Server

2.1. Phương thức getAllResponseHeaders()

Phương thức getAllResponseHeaders() trả về tất cả thông tin header từ phản hồi của server cho HTTP request dưới dạng cặp key/value .

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>XMLHttpRequest Object</h2>
<p>Hàm getAllResponseHeaders() trả về tất cả thông tin tiêu đề của tài nguyên, như độ dài, loại máy chủ, loại nội dung, sửa đổi lần cuối, v.v.:</p>

<p id="demo"></p>

<script>
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  document.getElementById("demo").innerHTML =
  this.getAllResponseHeaders();
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
</script>

</body>
</html>

2.2. Phương thức getResponseHeader()

Phương thức getResponseHeader() trả về thông tin header cụ thể từ phản hồi của server . Nó sẽ trả về giá trị kiểu string của header được xác định.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>XMLHttpRequest Object</h2>

<p>Hàm getResponseHeader() được sử dụng để trả về thông tin tiêu đề cụ thể từ một tài nguyên, như độ dài, loại máy chủ, loại nội dung, sửa đổi lần cuối,...</p>

<p>Sửa đổi lần cuối vào: <span id="demo"></span></p>

<script>
const xhttp=new XMLHttpRequest();
xhttp.onload = function() {
  document.getElementById("demo").innerHTML =
  this.getResponseHeader("Last-Modified");
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
</script>

</body>
</html>