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

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 :-)