JavaScript AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

Pitrov Secondary
Pitrov Secondary
5,119 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
173,991 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,119 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
173,991 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,119 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
173,991 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.

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.

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,119 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

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,119 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
173,991 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.