This is part 4 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.
In this part of the tutorial series we will get ready to rumble! download data using the object we created in the last part...
onreadystatechange
What the hell is that? lol, it's not move states when you're ready.. it's what we use on the object we created to see what state it is in, the different states are:
- 0 - Uninitialized
- 1 - Loading
- 2 - Loaded
- 3 - Interactive
- 4 - Complete
We can check for an objects state to see where it's at to decide if we can output the result or not, we can combine this with a test for the HTTP status of a download to see if it was successful, we can check for a value of 200 which means everything went ok. (a value of 404 would mean file not found just like normal HTTP status codes).
To use the readystate property, just bang it on the end of the object name and put that in an 'if' statement. Ie...
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{do something}
(the && means AND, so we check the readystate AND the status, if they are BOTH correct then execute the code in the curly brackets)
To put that in the code of the last tutorial, replace the bit that outputs the message about the oranges box being collected with an anonymous function that is attached to the objects readystate. It's not named an anonymous function because it has a secret identity, it is just a nice way of running a function with no name when a certain thing happens like the objects' readystate being changed.
For example, if we put
XMLHttpReqestObject.onreadystatechange = function()
{
do something
}
We have attached the onreadystatechange to the object we created, as soon as that objects readystate has altered, the anonymous function takes action and executes the commands contained in the curly brackets ({do something }).
That's exactly where we put the test to see what the HTTP status and readystate number is. Ie.
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
data downloaded, do something with it...
}
}
You may have noticed little graphics that are synonymous with web 2.0 and AJAX ( 
). You can add one of those to let the user see something is happening. In the code above, you can check for a readyState of 1 (loading) and add some text like this:
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 1)
{
obj.innerHtml="Loading...";
}
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
data downloaded, do something with it...
}
}
The FiddyP amazing analogy:
Last time we had created a box for the oranges that we want from the AJAX shop
XMLHttpRequestObject = new XMLHttpRequest();
then we opened it and sent it to the AJAX shop with a label of what we want.
XMLHttpRequestObject.open("GET", dataSource);
And we wait for the signal that the box we sent was filled ok and ready to go
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
Your whole code will now look like this...
HTML:
-
-
-
<title>FiddyP AJAX Tutorial Series Part 4
</title>
-
-
var XMLHttpRequestObject = false;
-
if (window.XMLHttpRequest) {
-
XMLHttpRequestObject = new XMLHttpRequest();
-
} else if (window.ActiveXObject) {
-
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
function getData(dataSource, divID)
-
{
-
if(XMLHttpRequestObject) {
-
var obj = document.getElementById(divID);
-
XMLHttpRequestObject.open("GET", dataSource);
-
-
XMLHttpRequestObject.onreadystatechange = function()
-
{
-
if (XMLHttpRequestObject.readyState == 4 &&
-
XMLHttpRequestObject.status == 200) {
-
}
-
}
-
obj.innerHTML = "Ready to download";
-
-
}
-
}
-
</script>
-
</head>
-
-
<H1>Fetching data with Ajax
</H1>
-
-
<input type = "button" value = "Display Message"
-
onclick = "getData('oranges.txt', 'targetDiv')">
-
</form>
-
-
<p>The fetched data will go here.
</p>
-
</div>
-
</body>
-
</html>
OK, so you have your box at the AJAX shop full of oranges.txt, next tutorial we'll do something with the oranges...
If you've been following the other tutorials then the code above shouldn't be so hard to understand (shyeah right!), it's just a bit more added to what we've already covered. You can copy the code from above and try it out yourself or you can click here to see it in action (hold on to your hat :-P)
We're still in the AJAX starting blocks waiting for the bang to start us on the AJAX runway but don't despair, next tutorial we will actually download data from a server and display it on the page without a reload which is what AJAX is all about. Once we can actually display the data, we can start doing things with it and then we can start to make pretty little scripts that do amazing things like count the amount of times a pink box has been clicked. hehehe, we'll do more than that I promise!
Popularity: 8% [?]
![[Slashdot]](http://slashdot.org/favicon.ico)
![[Digg]](http://digg.com/favicon.ico)
![[Reddit]](http://reddit.com/favicon.ico)
![[del.icio.us]](http://del.icio.us/favicon.ico)
![[Facebook]](http://www.facebook.com/favicon.ico)
![[Technorati]](http://technorati.com/favicon.ico)
![[Google]](http://www.google.com/favicon.ico)
![[StumbleUpon]](http://www.stumbleupon.com/favicon.ico)
