JavaScript AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

Stuck, I've checked everything and It's still not working.

Heya'.

I can't seem to wrap my head around to why this is not working? Can anyone please help me with what the heck is going wrong in this code?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='http://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>

  // Step 1 // - Create XMLHTTP Request object.
  var xhr = new XMLHttpRequest();

  // Step 2 // - Create callback function. 
  //this is the code that is going to run when the server respons to your request.
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      document.getElementById('ajax').innerHTML = xhr.responseText;
    }
  };

  // Step 3 // - Open a request.
  xhr.open('GET', 'sidebar.html');


  //Step 4 // - Send Request 
  xhr.send();

  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <h1>Bring on the AJAX</h1>
          <ul id="ajax">

          </ul>
        </div>
      </div>
    </div>
  </div>



</body>
</html>
Adam Beer
Adam Beer
11,270 Points

This is looks good. Maybe you don't saved the file before check

1 Answer

Sean T. Unwin
MOD
Sean T. Unwin
Treehouse Moderator 28,388 Points

Missing the button that when pressed calls the the function which xhr.send(); is wrapped in. The function is missing as well.

Check the video from the 9:50 mark.

Fixed it thanks!