How to print the response using AJAX/Javascript? [duplicate]

Question

I am learning about AJAX and am trying to get the contents of my file "info.txt" to be displayed inside a div with id "demo". However it keeps returning blank. Unfortunately, in order to test this you would have to try this code on an actual server (which I am) and have to supply your own "info.txt" file. I please supply a standard javascript answer (non-JQuery), please!

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "info.txt", true);
  xhttp.send();
  document.getElementById("demo").innerHTML = xhttp.responseText;
}

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

Your problem is the first "A" in AJAX, meaning it is asynchronous. You have to register a callback to handle the response. Look here for a start: developer.mozilla.org/en-US/docs/AJAX/Getting_Started — Quagaar
– Quagaar, Commented Dec 23, 2016 at 22:44

Jack · Accepted Answer · 2016-12-23 22:48:20Z

2

The true you're passing to xhttp.open is saying your request is async, which means it's not going to wait for the response.

You need to either remove that true (unrecommended) or properly set a callback for when the response is received:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "info.txt", true);
  xhttp.onreadystatechange = function () {
    if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.send();
}

answered Dec 23, 2016 at 22:48

Jack

21.3k12 gold badges51 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Govind Rai Over a year ago

ah... that's what I wasn't getting. thanks jack. could you please explain why the send() is after onreadystatechange()?

Jack Over a year ago

@GovindRai because you're defining a callback with onreadystatechange that runs when any changes happen...or in this case there's if to check if it's complete (DONE). An easy/simplified way to think of this is if you're asking someone to go to the store for you, and do something with the stuff. You're going to tell them what you want (open) and what do with it when they get back (onreadystatechange) before you send (send) them on their way to the store.

Collectives™ on Stack Overflow

How to print the response using AJAX/Javascript? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related