XML file wont parse - synchronous XMLHttpRequest depreciated

The warning regarding synchronous XMLHttpRequest is just that, a warning. Testing locally, the request is still performed and properly parsed under Firefox, Chrome and Safari. However, it's not clear what you mean by "no longer fully works", so perhaps you could elaborate on what exactly is/isn't working in this case.

Looks to me that synchronous use of XMLHttpRequest has been deprecated, because it sometimes freezes the page while waiting for a response.

Actually, what you are likely experiencing there is an example of the "detrimental effects" mentioned in your warning message.

My notes say that asynchronized loading is off to prevent the script from running before the document is fully loaded.

The more appropriate way to do this is to add a listener to the load event fired by Window, however, it will still be best to also perform the request asynchronously. Below is a modified version of your posted code, with:

• execution waiting on the load event
• performing the request asynchronously
• testing the response to ensure it is valid

// 1) Wait for the Window `load` event to be fired
window.addEventListener('load', () => {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', 'note.xml');
  // 2) Wait for the XMLHttpRequest `load` event to be fired
  xmlhttp.addEventListener('load', ({ target }) => {
    // 3) Ensure that the response is valid
    if (target.status < 200 || 300 <= target.status) {
      console.error(`Received status "${target.status}"`);
      return;
    }

    const contentType = target.getResponseHeader('Content-Type');
    if (contentType !== 'application/xml') {
      console.error(`Received Content-Type "${contentType}"`);
      return;
    }

    const xmlDoc = target.responseXML;
    if (xmlDoc === null) {
      console.error('Unable to parse XML response');
      return;
    }

    document.getElementById('to').innerHTML = xmlDoc.getElementsByTagName('to')[0].childNodes[0].nodeValue;
    document.getElementById('from').innerHTML = xmlDoc.getElementsByTagName('from')[0].childNodes[0].nodeValue;
    document.getElementById('message').innerHTML = xmlDoc.getElementsByTagName('body')[0].childNodes[0].nodeValue;
  });
  xmlhttp.addEventListener('error', error => {
    console.error(`Received error "${error}"`);
  });
  xmlhttp.send();
});

As for the XML parsing, my understanding is that the parsing to Document using the responseXML property is orthogonal to whether the request is performed synchronously or asynchronously. If you want to handle the parsing explicitly, you can replace the use of responseXML with the following use of DOMParser and parseFromString:

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(target.responseText, contentType);
if (xmlDoc.querySelector('parsererror') !== null) {
  console.error('Unable to parse XML response');
  return;
}

Finally, if you've come this far, consider moving over to using the Fetch API which is a more modern, more ergonomic way of performing these asynchronous requests in the browser, using Promises and thus open to use of async/await to clean up the flow. Using that, the code could become:

window.addEventListener('load', async () => {
  const request = new Request('note.xml');
  try {
    const response = await fetch(request);
    if (response.ok === false) {
      console.error('Response was not ok');
      return;
    }

    const contentType = response.headers.get('Content-Type');
    if (contentType !== 'application/xml') {
      console.error(`Received Content-Type "${contentType}"`);
      return;
    }

    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(await response.text(), contentType);
    if (xmlDoc.querySelector('parsererror') !== null) {
      console.error('Unable to parse XML response');
      return;
    }

    document.getElementById('to').innerHTML = xmlDoc.getElementsByTagName('to')[0].childNodes[0].nodeValue;
    document.getElementById('from').innerHTML = xmlDoc.getElementsByTagName('from')[0].childNodes[0].nodeValue;
    document.getElementById('message').innerHTML = xmlDoc.getElementsByTagName('body')[0].childNodes[0].nodeValue;
  } catch (error) {
    console.error(`Received error "${error}"`);
  }
});