Is using XMLHttpRequest() an outdated way to make an Ajax call?

Question

I'm simply using an example from a book I'm reading. The example is labeled, "Loading HTML with Ajax." This is the JS portion of the code:

var xhr = new XMLHttpRequest();

xhr.onload = function() {
  if(xhr.status === 200) {
    document.getElementById('content').innerHTML = xhr.responseText;
  }
};

xhr.open('GET', 'data/data.html', true);
xhr.send(null);

I'm getting the CSS portion of the code (headers, etc.) when I load the page onto the browser but none of the JS (there should be maps which would load onto the page). The example says I should comment out this portion of the code above:

xhr.onload = function() {
  if(xhr.status === 200) {
    document.getElementById('content').innerHTML = xhr.responseText;

...if I'm running the code locally without a server but that's not working, either.

Answer 1

Is using XMLHttpRequest() an outdated way to make an Ajax call?

Yes, but it still works and that's not the problem. The more modern way is fetch .

I'm getting the CSS portion of the code (headers, etc.) when I load the page onto the browser but none of the JS (there should be maps which would load onto the page).

That's because assigning HTML that contains script tags to innerHTML doesn't run the script defined by those tags. The script tags are effectively ignored.

To run those scripts, you'll need to find them in the result and then recreate them, something along these lines:

var content = document.getElementById('content');
content.innerHTML = xhr.responseText;
content.querySelectorAll("script").forEach(function(script) {
    var newScript = document.createElement("script");
    newScript.type = script.type;
    if (script.src) {
        newScript.src = script.src;
    } else {
        newScript.textContent = script.textContent;
    }
    document.body.appendChild(newScript);
});

Note that this is not the same as loading the page with script elements in it directly. The code within script tags without async or defer or type="module" is executed immediately when the closing script tag is encountered when loading a page directly (so that the loaded script can use document.write to output to the HTML stream; this is very mid 1990s). Whereas in the above, they're run afterward .

Note that on older browsers, querySelectorAll 's NodeList may not have forEach , that was added just a few years ago. See my answer here if you need to polyfill it.

Answer 2

Because I didn't completely understand TJ's answer (no offense, TJ), I wanted to provide a simple answer for anyone who might be reading this. I only recently found this answer on Mozilla.org: How do you set up a local testing server? ( https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server ). I won't go into details, I'll just leave the answer up to Mozilla. (Scroll down the page to the section titled, "Running a simple local HTTP server.")