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 AJAX Concepts A Simple AJAX Example

Michael Murray
Michael Murray
6,037 Points
Posted by Michael Murray
Michael Murray
6,037 Points

Script in index.html file doesn't appear to be running.

Still only getting "Bring on the AJAX". Am I missing something?? <!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> var xhr = new XMLHttpRequest(); console.log = xhr.readyState; xhr.onredystatechange = function() { if (xhr.readyState === 4) { document.getElementById("ajax").innerHTML = xhr.responseText; } }; xhr.open('GET', 'sidebar.html'); xhr.send(); </script> </head> <body> <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> <div id="ajax">

      </div>
    </div>
  </div>
</div>

</div> </body> </html>

4 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

You have two issues:

1) This:

console.log = xhr.readyState;

should be:

console.log(xhr.readyState);

2) And a typo with redy instead of ready

xhr.onredystatechange = function()

should be:

xhr.onreadystatechange = function()
Michael Murray
Michael Murray
6,037 Points
Michael Murray
Michael Murray
6,037 Points

I thank you for the best answer Kris.

Michael Murray
Michael Murray
6,037 Points
Michael Murray
Michael Murray
6,037 Points

I did find out after correcting my console.log(xhr.readyState) line that it returns 0 (ZERO) instead of 4. Any ideas on the cause?

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

From MDN

A state of 0 means: Client has been created. open() not called yet.

If you add another log at the beginning of your function you'll see all the states

Michael Murray
Michael Murray
6,037 Points
Michael Murray
Michael Murray
6,037 Points

I found that by using the handler onload instead of onredystatechange worked. I give thanks to the question asked by Routine Poutine Posted on Jun 2, 2019.