A Simple AJAX Example

Question

In the video "A Simple AJAX Example" the following code is written that displays some content from another page titled "sidebar.html". I wrote exactly how is it written in the video. Yet, my results do not show any returned "sidebar.html" content. It's blank. What is missing that they don't provide in the video?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
 <title>AJAX with JavaScript</title>
  <script>
    var xhr = new XMLHTTPRequest();
    xhr.onreadystatechange = function(){
      if (xhr.readyState === 4){
        document.getElementById('ajax').innerHTML = xhr.responseText;
      }
    };
xhr.open('GET', 'sidebar.html');
xhr.send();
  </script>
    </head>
    <body>
      <div class="grid-container centered">
        <div class="grid-100">
          <div class="contained">
            <div class="grid-100">
              <div class="heading">
            <h1>Bring on the AJAX</h1>
          </div>
          <div id="ajax">

          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

In the video they save the page and preview it. My code does not produce what the show in the video even though what I have is exactly what the lecturer has. What am I missing? Thank you.

Answer 1 · 2016-09-09T13:50:00Z

September 9, 2016 1:50pm

If your markup is correct (I didn't check it), then there must be something wrong with the file you're trying to get.

The first thing that comes to mind is the following:

Does the file "sidebar.html" even exist?
If it does, where is it located, in what folder? The way your code is, it has to be in the same folder as your html-file

Welcome to the Treehouse Community

Looking to learn something new?

Milton Centeno

Milton Centeno

A Simple AJAX Example

1 Answer

Christian Andersson

Christian Andersson