|
With AJAX you can update the content on your pages automatically — every day
and every hour without changing the page itself.
|
|
The heart of Ajax is a small javascript function that retrieves data for
your page. You can keep your data in the database, xml file, even in a text
file. When you find out how trivial this javascript call is - the word AJAX
will start to sound not so "hi-tech". (actually I like "call back" - it
is what we called this technique before "web2.0"! ).
The example below is just a starting point in AJAXing your site. Suppose you
have a web page with a photo story about Africa. And you want to show your
visitors a new photograph every hour.
Congratulations! You have accomplished 90% of the task! You have formulated it.
|
Step 1. Data storage.
We have 24 images to show (1 image for every hour). We want to provide a link
to the "Image details" page, place a short description of this photo and, of
course, we know how important "alt"s in the image tag are - we need this
information too.
So, we have decided that for every image we will keep the information below:
1. image url
2. image details page link
3. image description
4. alt tag text
For the first image we will save information in our xml file as:
<item>
<imagefile>../FI/Thumb300V/20070211/Abu-Simbel-Heads-Egypt-Africa-218157.jpg</imagefile>
<imageurl>http://www.featurepics.com/online/Abu-Simbel-Heads-Egypt-Africa-Pictures218157.aspx</imageurl>
<description>Abu Simbel heads, Egypt, Africa</description>
<alttext>Abu Simbel Heads</alttext>
</item>
( Simular to HTML containers, isn't it? )
|
2. The next step is to find a good spot on your page for the dynamic content. I
will place the images and description right below this text in the rectangle
with a dark green border.
|
| The Image container is a spot for my image and the Text Container is a place
where you will find a description of the image.
|
3. This step is to write a javascript function that will first answer
the question "What Time is It?" Then find an appropriate content
for this time, and then nicely insert it inside the above containers.
a. What Time is It?
var now = new Date();
var Hours = now.getHours();
You have opened this page,
and our "Hours" variable is equal to
(we will count hours from 0 to 23)
Hopefully we won't need to write our own functions to read the content of the
xml file. They exist already. We will use getElementsByTagName function to get
back an array of all elements with a specified name. (we are interested in
'imagefile', 'imageurl', 'description', and 'alttext'),
then we will take only the data we need from the array:
var imagefile
=res.getElementsByTagName('imagefile')[n].firstChild.data;
var imageurl =res.getElementsByTagName('imageurl')[n].firstChild.data;
var description =res.getElementsByTagName('description')[n].firstChild.data;
var alttext =res.getElementsByTagName('alttext')[n].firstChild.data;
|
4. And the last step is to place the content we have retrieved into our
containers. Just like this:
var ImageContainer=document.getElementById('ImageContainer');
var ImageDescription = document.getElementById("ImageDescription");
var img="<a href='"+imageurl+"' target=_blank><img src='"+imagefile+"'
border=0 alt='"+alttext+"'></a>"
var imgdesc="<b>"+alttext+"</b> -- "+description
ImageContainer.innerHTML = img;
ImageDescription.innerHTML = imgdesc;
|
To run this example on your computer you will need:
1. Javascript functions:
|
|
|
| 2. Containers
|
|
|
| 3. xml file: Africa.xml.
|
The Blogger.com: AJAX your photography site
|