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

meghana Joshi
meghana Joshi
4,552 Points

The code is not working , I checked the syntax

<!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){
        documet.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>

3 Answers

Emmanuel C
Emmanuel C
7,608 Points

Hey meghana,

There is actually a syntax error, of document being misspelled in your if statement. But is there a sidebar.html? Since I dont have it, its coming back null then trying to put that null in the innerHTML of the element with id="ajax".

An awesome way to debug js this to open it open in your browser. I literally copied and pasted your code into a blank text file then renamed it to index.html and opended it up in my browser. Then i open the devTools with F12 and it showed me all the errors. Its very useful fixing bugs.

Roger Hwang
Roger Hwang
3,848 Points

I realized my code wasn't working since I was typing notes in Microsoft Word and copied code from there to Workspace. Unfortunately, the quote marks aren't the same.