AJAX Response

When an AJAX request is sent to a server, the server responds with data. The XMLHttpRequest object provides properties and methods to access this response.

Server Response Properties

responseText

• Returns the response from the server as a string.
• Use this when the server sends plain text, HTML, or JSON (parse JSON if needed).

Example:

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if(xhttp.readyState === 4 && xhttp.status === 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

responseXML

• Returns the server response as an XML DOM object.
• Useful when the server sends XML data.
• Can be navigated using standard DOM methods like getElementsByTagName().

Example:

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if(xhttp.readyState === 4 && xhttp.status === 200) {
    const xmlDoc = xhttp.responseXML;
    const artists = xmlDoc.getElementsByTagName("ARTIST");

    let txt = "";
    for(let i = 0; i < artists.length; i++) {
      txt += artists[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
  }
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();

Server Response Methods

getResponseHeader(headerName)

• Returns the value of a specific HTTP response header.
• Useful for checking metadata like Content-Type, Last-Modified, etc.

Example:

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

getAllResponseHeaders()

• Returns all HTTP response headers as a single string.
• Headers are separated by CRLF (\\r\\n).

Example:

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