Ajax xhr request

data.json

{"foo": 1, "bar": 2}

index.html

<p>This page gets the following data from <a href="data.json" title="Data file in JSON format">data.json</a>:</p>
<div id="data"></div>
<script src="xhr.js"></script>

xhr.js

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    document.querySelector("#data").innerHTML = JSON.stringify(data);
  }
}

/* 
// can do this in Chrome, Firefox, etc.:
xhr.onload = function(event) {
  var data = JSON.parse(this.response);
  document.querySelector("#data").innerHTML = JSON.stringify(data);
}
*/

xhr.send();