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

Pitrov Secondary
Pitrov Secondary
5,121 Points
Posted by Pitrov Secondary
Pitrov Secondary
5,121 Points

Should the examples work, to me they don't.

I think that I copied eveerything but it doesent work, then I try to preview the examples, they dont work either, is it the workspace problem or I need to recheck my code?

5 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

There's no way for us to check without seeing your code. But if you're concerned about copying errors, you could download the project files and compare your code against them or use them directly.

If you need to share your code, a great way is to make a snapshot of your workspace and post the link to it here.

Pitrov Secondary
Pitrov Secondary
5,121 Points
Pitrov Secondary
Pitrov Secondary
5,121 Points

can u try tthe examples? here is my code var xhr = new XMLHttpRequest(); xhr.open('GET', 'sidebar.html'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { document.getElementById('ajax').innerHTML = xhr.responseText; } }; xhr.send();

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I see 3 issues in the snapshot (same as in Amber's posted code):

  • the function "sendAJAX" is missing a closing brace at the end (})
  • the function tries to update an element with the ID of "load", but there is not one in the HTML
  • the function is never called, so "xhr.send" is not performed
Pitrov Secondary
Pitrov Secondary
5,121 Points
Pitrov Secondary
Pitrov Secondary
5,121 Points

I Think that I fixed the problems. I think i did the 3th problem wrong, how do I call the "xhr.send"? It still doesn't work

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You could either call "sendAJAX" or get rid of "sendAJAX" and just call "xhr.send" directly as in the comment you posted to this answer the first time.

Amber Fuller
Amber Fuller
4,598 Points
Amber Fuller
Amber Fuller
4,598 Points

I agree with Steven, can you take a snapshot of what you're working on and link your snapshot? I completed the same course a few days ago and my code issues were some minor mistakes that I didn't catch.

Amber Fuller
Amber Fuller
4,598 Points
Amber Fuller
Amber Fuller
4,598 Points

Ok, I think I have it figured out as comparing to what I have. line 12 should read as follows: document.getElementById('ajax').innerHTML = xhr.responseText;

Also, on line 16 you may want to change it to this: xhr.open('GET', 'sidebar.html');

Pitrov Secondary
Pitrov Secondary
5,121 Points
Pitrov Secondary
Pitrov Secondary
5,121 Points

Thanks, I copied ur lines in my document, but it still doesn't work. When I refresh my page with google developer tools on, it doesn't say anything, and it doesn't show anything. I really do not know why it not working. This is how it looks like now: http://prntscr.com/jdsl5w

Amber Fuller
Amber Fuller
4,598 Points
Amber Fuller
Amber Fuller
4,598 Points

Are you doing the part where it sets an element's display to "none"? If so, here's what I have:

let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if(xhr.readyState === 4) {
        document.getElementById('ajax').innerHTML = xhr.responseText;
      }
    };
    xhr.open('GET', 'sidebar.html');
    function sendAJAX() {
      xhr.send();
      document.getElementById('load').style.display = "none";
Pitrov Secondary
Pitrov Secondary
5,121 Points
Pitrov Secondary
Pitrov Secondary
5,121 Points

I copied all of that and pasted it in the script tags. IT STILL DOESN'T WORK! I do not know what I am doing wrong ( I am using workspace) is there something else I have to do?

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

FYI: The snapshot I was suggesting is very different from a "screenshot". The screenshot is just an image but the snapshot allows the complete workspace environment to be reconstructed and analyzed.