This is part 5 of the AJAX Tutorial Series.
You can see the other Beginners AJAX Tutorials here.

• Part 1 - An introduction to AJAX
• Part 2 - Hello world!
• Part 3 - The Object of my desire
• Part 4 - Are you ready?

Hurrah! this tutorial will actually download some data (yey!) We will use everything we have learned so far and add just a little bit that will allow us to download data from the server and put it somewhere on the page without a refresh. (I know, you must have goosebumps!)

XMLHttpRequestObject.send(null);

We need this command to initiate the object send. We created an object, created a place for the data to go, we created a routine to wait patiently for the object to be ready and sent the object to the data source using the above command. The patient routine for the waiting will take the response to the data source and put it in the div we created in the HTML of the page.

We can replace the bit from the last bit of complete code (on part 4) with this command and instead of it saying it’s ready to download, it will actually do the fetching for the obj.innerHTML=XMLHttpRequestObject.responseText; which is called when the readyState and Status are ok.

[HTML]

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=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}

Fetching data with Ajax

[/HTML]

I’ll try and make this code easier to understand with a picture using pretty colours!

The blue bit gets called when the user clicks the button, if the object was successfully created then create a routine that ‘listens’ to the objects readyState and status. Then the XMLHttpRequestObject.send(null); command does the action and when that goes ahead and activates XMLHttpRequestObject.open(”GET”, dataSource); which goes off and gets the data pointed to by dataSource which of course changes the objects status and readyState. When it is at what we want, we inject the responseText to the div pointed to by divID.

Simple! :-/

You can see it in action here

Exciting huh? LOL . It’ll display anything that is in the oranges.txt file, not much use yet but at least we know we can fetch data!

What if, instead of displaying the contents of a text file, we used a php script to ‘echo’ out something?.. replace oranges.txt with this code..

[PHP]
echo “these are some oranges created by php!”;
echo “
ooooooooooooooooooooooooooooooooo”;
?>
[/PHP]

(don’t forget to enclose any php script with <?php and ?> or it wont work - I cant put them in here otherwise it will run the script instead of showing the code. Also, change the onclick event in the html to call oranges.php (if you saved the php with that name) instead of oranges.txt

You can see that in action here

There may be a pause between you clicking and the message being displayed. We can let the user know that something is happening by adding another if condition to look for a readyState of 1 (loading) and displaying the message “off to get oranges…” like this..

[html]
if (XMLHttpRequestObject.readyState == 1)
{
obj.innerHTML=”off to get oranges…”;
}[/html]

we just chuck that into the anonymous function that is called when the readyState changes…
[html]
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML=XMLHttpRequestObject.responseText;

}
if (XMLHttpRequestObject.readyState == 1)
{
obj.innerHTML=”off to get oranges…”;
}
}
[/html]

See that in action here

You can download all the files used in this tutorial here.

Now we’re getting somewhere! But, what if we want to send data to the php file so it can do something more than print a hardcoded message?
Actually, it’s quite easy! come back next week to see the final part where we’ll send something to the php file and have it send back something it made with what we sent. (it could be a username or contents of a text field - think form validation!)

You can subscribe to my feed with the button at the top right of this blog or add your email to the box on the sidebar of the main page to subscribe by email. I hope you can come back and learn a bit more, enough at least to make your own php script and AJAX page….

Filed under: Code, PHP, ajax | Tagged: ajax, ajaxseries, Code, javascript, PHP, tutorial, web 2.0