AJAX and JSON

Sometime in the not too distant past I had an interest in all this. It seems that things have gone full circle and I am looking at it again.

I am now looking again at the DOM (Document Object Model) and how I can develop a behaviour for pages like my Site Map. The Button Expand used in my accordion implementatioon seems to work, I now want to get it to work from a menu option.

I think that things have moved on

Since I was looking at this i was investigating "dependent" drop-down lists inspired by Brent Ashley.

Below is an example taken from the W3C Schools website that opens a file (on the server) and then echos its contents in the div below.

The button calls the function loadDoc().

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "site_config.txt", true);
  xhttp.send();
}

The text below is stored in "site_config.txt"

This text is stored on the server and the intention is to use it for site configuration.

The colours for the website are to be stored here

The text is displayed in this example are a replacement of the content of a div on an already loaded page.
The text here is html, but eventually the text will be used to change DOM elements.

The XMLHttpRequest object can be used to exchange data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

onreadystatechange

This needs to be explained in more detail.