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!

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

Aaron Selonke
Aaron Selonke
10,323 Points

The #ajax element is not being updated with the new HTML

Followed line by line from the video

Here is the JavaScript

<script> //For each Ajax request, should create new XMLHttpRequest Object
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readtstate === 4){
       document.getElementById("ajax").innerHTML = xhr.responseText;
    xhr.open('GET', 'sidebar.html');


Here is a screenshot on the DEVtools console, looks like the GET request was processed http://uploadpie.com/Fhncb

Here is the page rendered without the updated #ajax html element http://uploadpie.com/4YzEv

Not sure how it went wrong...

3 Answers

hi, only thing i see is that readystate should be readyState

if (xhr.readyState === 4) 

I found the error. you had a type in your if statement.

if(xhr.readtstate === 4){

should be:

if(xhr.readyState === 4){

I tried this in a workspace and it does work.

I deleted my comment from earlier. I hope this helps.

I've got this problem too. When I open the JavaScript console in Chrome and log XMHHTTPRequests it is showing up as "finished loading" so I'm not sure where I am going wrong.

Here's a snapshot of my workspace:-


Thanks for any help Don :-)