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

meghana Joshi
meghana Joshi
4,596 Points

The code is not working , I checked the syntax

<!DOCTYPE html>
  <meta charset="utf-8">
  <link href='//' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <title>AJAX with JavaScript</title>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4){
        documet.getElementById("ajax").innerHTML = xhr.responseText;
    };'GET', 'sidebar.html');

  <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 id="ajax">


3 Answers

Emmanuel C
Emmanuel C
7,633 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.