sundaycrafts/ajax.html

## ajax.html
<h1>Hello world!</h1>

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    window.onload = function() {
      var xhr = new XMLHttpRequest();
      var data;
      xhr.onload = function() {
      // For IE
      // xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
          data = xhr.responseText;
        }
      }
      xhr.open('GET', 'ajax.html');
      xhr.send();

      var btn = document.querySelector('#btn');
      var txt = document.querySelector('#txt');

      btn.addEventListener('click', function(){
        txt.innerHTML = data;
        console.log(typeof data); // string
      });
    }
  </script>
</head>
<body>
  <div id="cont">
    <button id="btn">push</button>
    <div id="txt"></div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	window.onload = function() {
	var xhr = new XMLHttpRequest();
	var data;
	xhr.onload = function() {
	// For IE
	// xhr.onreadystatechange = function() {
	if(xhr.readyState == 4 && xhr.status == 200) {
	data = xhr.responseText;
	}
	}
	xhr.open('GET', 'ajax.html');
	xhr.send();

	var btn = document.querySelector('#btn');
	var txt = document.querySelector('#txt');

	btn.addEventListener('click', function(){
	txt.innerHTML = data;
	console.log(typeof data); // string
	});
	}
	</script>
	</head>
	<body>
	<div id="cont">
	<button id="btn">push</button>
	<div id="txt"></div>
	</div>
	</body>
	</html>