AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
It is the exchanging data with a server phrase which interests me.
I used the same concept in the 90's in a VB application I created for the WA Trotting Association to help them maintain a database of competition entrants. So that idea is not new, but I guess doing it on a web page must be.
Apparently modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) support
the keystone of AJAX, the XMLHttpRequest object. Earlier versions of Internet Explorer (IE5 and IE6) use the MS ActiveXObject. The code examples in the tutorial allow for older IE versions, but in the example quoted below, I have edited this out for simplicity of analysis.
if (xmlhttp.readyState==4 && xmlhttp.status==200)
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
The HTML code above sets out a web page comprising a header and a button (see below).
The header is enclosed within the
<div> tag. A
<div> tag usually divides a big web page into sections. It seems a bit redundant here, so I tried removing it, and labeling the header instead:
<h2 id="myDiv">Let AJAX change this text</h2>
It still worked, but the text, invoked by the button click, all appeared in the header style.
loadXMLDoc, which is called by the button click event.
Within the function, the variable
xmlhttp is declared and set as a new
XMLHttpRequest object. I'd love to find this
open() method seems to require the following parameters:
method- the type of request:
url- the location of the file on the server
send() method allows the following parameter:
string: Used for POST requests
In the code above, the
open() method is used with
async = true.
The text contained in the file
<p>AJAX is not a new programming language.</p>
<p>AJAX is a technique for creating fast and dynamic web pages.</p>
Now from the code, it seems the
XMLHttpRequest object has at least 3 properties:
Just by reading the code it is not clear whether
.responseText is populated by
.send. Intuitive logic would suggest the former, but in that case it is not clear what
.send doing in there as well, although in the tutorial it says:
To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object
And it shows the two methods being used one after the other, as they are in the code. The lesson then goes on to say a little more about the
.responseText property and one more:
.responseText- holds the response data as a string
.responseXML- holds the response data as a XML data
It gives a further example using XML, which I shall skip at this stage, because on the next page we get clarification on the
.status properties, together with one I had failed to notice,
.onreadystatechange. The last one appears to be both a property and an event:
onreadystatechangeevent is triggered every time the readyState changes.
onreadystatechangeproperty stores a function (or the name of a function) to be called automatically each time the
readyStateproperty holds the status of the XMLHttpRequest.
I have to say this leaves a question mark over what the
.status property holds - a question not answered by the tutorial. What it does give is a list of acceptable values for these properties. For
.readyState these are:
- 0: request not initialized
- 1: server connection established
- 2: request received
- 3: processing request
- 4: request finished and response is ready
.status these are:
- 200: "OK"
- 404: Page not found
By my calculation the property changes four times with every server request, so the
onreadystatechange event must be triggered four times. I guess that explains the conditional clause in the function:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
This function is called four times, but it only does anything on the fourth occasion, when "the request finished and response is ready" and the
.status property is "OK". (And on closer reading this is mentioned in the tutorial.)
At first I was confused by the above code segment, because I didn't realize it is an unnamed function within the function
loadXMLDoc() and is called by a different event. The
loadXMLDoc() function is called be the button click event, while the unnamed function is both contained by the
onreadystatechange property and called by the
So when the button is clicked, everything inside the tag labeled "myDiv" is replaced with the text in the file. In its original version this appears as regular text (see below).
In my alternative version both paragraphs appear as headers because they both fall within the header tag (see below).
If the button is clicked again, nothing appears to happen, because the text is replaced by identical text. Again, I was initially confused here, because I thought the conditional clause had something to do with what was being displayed.
Anyway, this is all a bit disappointing, because I also misunderstood the exchanging data with a server phrase to mean exchanging data with a database on a server, not a measly old text file.