Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Matthew Smart
Matthew Smart
12,567 Points


On the video for a simple ajax example. i have written the same code, but it does not do anything at all.

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
          Document.getElementById('ajax').innerHTML = xhr.responseText; 

    xhr.open('GET', 'sidebar.html');

its just showing the h1

2 Answers

Hey Matthew,

I am not sure if this will help or not, but try making the "D" in Document that is inside your if statement lowercase so it reads:

if (xhr.readyState === 4) {
document.getElementById('ajax').innerHTML = xhr.responseText;

If you open your JS console in the browser on your page you may see a TypeError about how undefined is not a function. Basically Document is the typeof function, and document is the typeof of object. You can even check by typing in your console:

typeof Document

And hit enter, then:

typeof document

and hit enter. JS is case sensitive, and I know from personal experiences that many errors are related to something small like capitalization or a missing semi-colon.

I hope this helps!


Try writing document with a lower-case d and see if that works.