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

Posted by Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

A Simple AJAX Example

In this example Dave writes:

INDEX.HTML

<!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();
xhr.onreadystatechange = 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>

SIDEBAR.HTML

<section>
<h2>Welcome to the wonderful world of AJAX</h2>
<p>This content provided to you dynamically by the XMLHTTP Request Object</p>
</section>

my question is, what exactly is this "xhr.responseText" how does the .responseText know to get the information that is located in the sidebar.html, was just a little confused, thanks guys.

1 Answer

edinjusupovic
edinjusupovic
5,664 Points

The XMLHTTPRequest is defined here as "xhr"

I'll break it down for you.

xhr.onreadystatechange // we detect any sort of change in the xhr object, because when you send a request (which you will later) the xhr status code changes - this status code can be used to later identify exactly what's happening with your request.

if (xhr.readyState === 4) // we test to see if the xhr object readyStatus is 4 - this means the request was done succesfully; see documentation here - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

document.getElementById("ajax").innerHTML = xhr.responseText; // we inject the sidebar.html data into the DOM