This tutorial is intended to give the reader some initial understanding of the power of using Ajax as a tool on a web page. The web pages are growing larger and larger due to more and more bandwidth around the globe.
This is nice since the web is getting more readable and more visual appealing. But if your web host have a traffic limit per day the size of the total files requested by each visitor becomes critical, at least if you have many visitors
Ajax is a way to update a part of a web page without the nessisity to reload the whole page
For this tutorial we are going to create three files:
Let’s start with the markup
Small huh? Well since we are going to fetch data from another file we need to declare the file which in this case is page.html
. This is the page the Ajax.Updater is fetching for us and outputs it to the ‘update’ div without reloading the whole page. The Ajax.Updater takes two parameters which is the id of the div to be updated and an url from where we fetch our data.
<ul> <li>Apples</li> <li>Oranges</li> <li>Elephants</li> </ul>
All put together there is not much code to get this working and there are endless possibilities. I’ve set up a demo where you can see the action live. Good luck.