AJAX XML File

AJAX XML File Parsing

While JSON has largely taken over as the primary web data format, many legacy APIs still return XML.

The XMLHttpRequest object was originally designed specifically to handle XML files effortlessly.

The responseXML Property

If the requested file is an XML document, you cannot parse it using responseText.

Instead, you must use the responseXML property.

This automatically parses the XML string into an XML DOM object, which you can manipulate using standard JavaScript methods!

Parsing XML Data

Once you have the XML DOM object, you can use methods like getElementsByTagName().

This allows you to extract specific values from the XML tree and format them into an HTML table or list.

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  // The server returns an XML file
  const xmlDoc = this.responseXML;
  
  // Finding all "ARTIST" tags inside the XML
  const artists = xmlDoc.getElementsByTagName("ARTIST");
  // Extracting the text from the first artist tag
  let firstArtist = artists[0].childNodes[0].nodeValue;
  console.log(firstArtist);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();