Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by A X
A X
12,842 Points

The following errors in the JS Console in Chrome appear in my Code, when I run Workspaces (Unsolved)

In Dave's Video "A Simple AJAX Example" I followed along in Workspaces, and when I ran the code and nothing happened, I went into Chrome's Developer tools and saw the following 2 errors:

  • (index):9 Uncaught ReferenceError: newXMLHttpRequest is not defined
  • 3(index):17 Uncaught TypeError: Cannot read property 'send' of undefined

So I'm pretty sure I followed Dave's code exactly, so why am I getting these errors? Anyone have any ideas?

<!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>
//This is the code that was inserted in the video
 var xhr = newXMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
      document.getElementById('ajax').innerHTML = xhr.responseText;
      }
    };
xhr.open('GET', 'sidebar.html');    
    function sendAJAX() {
    xhr.send();
      document.getElementById('load').style.display = "none";
    }
//end modification for a bit 
  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
//This was also inserted in the video
            <h1>Bring on the AJAX</h1>
            <button id="load" onclick="sendAJAX()">Bring it!</button>
//End insertion
          </div>
          <div id="ajax">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

I took another spin at it and adding the space did the trick for me.

1 Answer

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

new XMLHttpRequest(); you're missing a space. So the object isn't created, hence is undefined when you call the send on it.

A X
A X
12,842 Points

I can't make this run, and I checked and spaces are irrelevant in JS. To further point this out, in the code challenge ahead, there's no space:

var request = new XMLHttpRequest();
request.onreadystatechange = function () {
  if (request.readyState === 4) {
    document.getElementById("footer").innerHTML = request.responseText;
  }
};

I suspect it has to do with the fact that Dave didn't load any libraries that reference the XMLHttpRequest object.

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

i created the workspace associated with your video, copied your code across. Ran it. it failed. Changed the space, saved and refreshed the page. It worked fine. Without the space you get an uncaught reference error ("VM140:1 Uncaught ReferenceError: newXMLHttpRequest is not defined"). It's looking to something called "newXMLHttpRequest ", not to create an new instance of XMLHttpRequest. The space matters here. I've tested your code twice and demoed the bug twice using developer tools. A snapshot should be available at https://w.trhou.se/si4etkcdoi . It's your code with one space, and it's working.