twolfe2/HTTPRequestExample.html

## HTTPRequestExample.html
<!DOCTYPE html>
<html>

  <head>
    <script>
      //step 1
      var request = new XMLHttpRequest();

      //step 2, create the callback funciton
      request.onreadystatechange = function() {
          //4 means the request is complete
          if (request.readystate === 4) {
            //200 indicates there where no errors with the request
            if (request.status === 200) {
              //addMe.html will be added after Hello
              document.getElementById('addHere').innerHTML = request.response();

            }
            //if there is an error log it to the console (CMD+Option+J)
            else {
              console.log(request.statusText);
            }
          }
        }
        //step 3, get request for the addMe.html file
      request.open('GET', 'addMe.html');

      //add an event listener to the button, when the user clicks the button the request will be sent
      document.getElementById("initiate").addEventListener("click", function() {
        //step 4 send the request
        request.send();
        //hide the button
        doucment.getElementById('initiate').style.display = "none";

      });

    </script>
  </head>

  <body>
    <div>
      <h1>Hello <span id="addHere"></span></h1>
      <button id="initiate">Show me the AJAX!</button>
    </div>


  </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<script>
	//step 1
	var request = new XMLHttpRequest();

	//step 2, create the callback funciton
	request.onreadystatechange = function() {
	//4 means the request is complete
	if (request.readystate === 4) {
	//200 indicates there where no errors with the request
	if (request.status === 200) {
	//addMe.html will be added after Hello
	document.getElementById('addHere').innerHTML = request.response();

	}
	//if there is an error log it to the console (CMD+Option+J)
	else {
	console.log(request.statusText);
	}
	}
	}
	//step 3, get request for the addMe.html file
	request.open('GET', 'addMe.html');

	//add an event listener to the button, when the user clicks the button the request will be sent
	document.getElementById("initiate").addEventListener("click", function() {
	//step 4 send the request
	request.send();
	//hide the button
	doucment.getElementById('initiate').style.display = "none";

	});

	</script>
	</head>

	<body>
	<div>
	<h1>Hello <span id="addHere"></span></h1>
	<button id="initiate">Show me the AJAX!</button>
	</div>


	</body>

	</html>