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) Programming AJAX Check for the correct ready state

How to complete check for correct ready state task

I'm struggling to complete this I understand the videos; but I can't get the final bit. Using .innerHTML to set the sidebar element to the servers response. I don't understand what I am supposed to put here. Evertyhing I have tried just throws an error and keeps saying Task 1 no longer passing I have to go back to the start again.

Could someone explain what I am doing wrong?

app.js
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    return xhr.status === 200;
  }
document.getElementById('sidebar').innerHTML = xhr.response;
};
xhr.open('GET', 'sidebar.html');
xhr.send();
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with JavaScript</title>
  <script src="app.js"></script>
</head>
<body>
  <div id="main">
    <h1>AJAX!</h1>
  </div>
  <div id="sidebar"></div>
</body>
</html>

6 Answers

trio-group I.AM
trio-group I.AM
24,756 Points

I see now. You are writing your code outside of your conditional statement. This code will pass:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    return xhr.status = 200;
    document.getElementById('sidebar').innerHTML = xhr.responseText;
  }  
};

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

What I meant by 'nesting' is that the check if the status code is OK should be nested inside the readyState check (since the challenge instructions state 'also TEST if the server responds with a status code of OK'). So strictly speaking, the following code is what TH is looking for:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    if (xhr.status === 200) {
    document.getElementById('sidebar').innerHTML = xhr.responseText;
    }
  }  
};

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

Yours will pass too though, as soon as you put your code in your conditional statement.

Hope this helps!

trio-group I.AM
trio-group I.AM
24,756 Points

Hey,

make sure you are reading the instructions carefully. First of all, you need to "check" whether the server responds with a status code of 200 (hint hint conditional statement). If so, THEN you would want to insert the response as HTML, but while you're at it, don't forget to use the correct property on the response object which returns the text of the response.

I appreciate the response. I have a conditional statement in my code which passes that part of the task. The only part that doesn't pass the task is the final part with innerHTML so I'm not sure which bit is wrong if the rest of the task passes?

trio-group I.AM
trio-group I.AM
24,756 Points

Hey! Sorry for the late response.

You need to nest your conditional statements. Also, use responseText to parse the data as innerHTML.

Hope this helps.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4){
    return xhr.status = 200;
  }
  document.getElementById('sidebar').innerHTML = xhr.responseText;
};

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

Nope I cannot get it to pass the final part and I still don't understand why. I've tried responseText but that doesn't work. I don't understand what you mean by nesting conditional statements there is only one? The rest of the task passes its literally the final part that fails.

Oh I see so what I had written was correct just in the right place. Now it passes and that does make sense. Thanks.