Analyzing the first “Try it Yourself” example in the w3schools “AJAX Intro” lesson

Reference: http://www.w3schools.com/xml/tryit.asp?filename=tryajax_first

in http://www.w3schools.com/xml/ajax_intro.asp

This file is: ualr.edu/jdberleant/courses/IFSC3300/AJAXexample1analysis.htm

which is linked from ualr.edu/jdberleant/courses/IFSC3300/courseGuidelines.html

function loadDoc() {
var xhttp = new XMLHttpRequest();

// Declare a variable, call it xhttp

// Set it to a new object, an XMLHttpRequest object

//    XMLHttpRequest() is its constructor, so you are creating it

xhttp.onreadystatechange = function() {

// Let’s analyze this.

// There is a readyState property (member variable) in the object.

// readystatechange is an event.

//   It is triggered by a change in the value of readyState.

// Events can have event handlers.

// onreadystatechange is an aptly named member variable of the object.

//   We define a function to be its value.

//   The function will handle the event the way we want.

if (this.readyState == 4 && this.status == 200) {

// Check for the object’s member variables to have particular values

// Note that readyState must have been different from 4 before (why?)

// What is “this”?

document.getElementById("demo").innerHTML = this.responseText;

// The object has another member variable, responseText

//    responseText contains some text data. But what data?

}
};
xhttp.open("GET", "ajax_info.txt", true);

// The object’s open method (function) initializes things.

// For example, it resets readyState to 1

// The http GET command will soon be sent to a remote http server

// The remote http server will then respond with the content of a file

//     JavaScript does not send the GET command just yet,

we’re still setting it up to send later

// We can even look at the ajax_info.txt file in a browser

//     See what’s in it!

xhttp.send();

// Finally, we now send the GET command out to the web

// The remote server’s response will be stored in responseText

// This changes readyState, etc.,

// ...triggering the readyStateChange event,

// ...which causes the event handler to run,

// ...which was defined as the value of onreadystatechange.

// Whew!!

}