This is the first in a series of tutorials about AJAX and how to use it on your site. Each new tutorial will take the subject a little bit further and hopefully, it wont be long before you start creating your own AJAX applications for your own site and revel in the wonderness of geekdom
It seems more and more people want to use this type of programming method to bling their blog up to 2.0 level including me!, so come along as I traverse the wonders of AJAX. I am learning this as I go so it’s not really fair to call it a tutorial series but you get the idea!
First off, we need to know what AJAX is…
The first thing to know about AJAX is that in fact, it isn’t actually a programming language. It’s just a way of using other languages together to create an ‘application’ style of interface for a web page.
It could be something simple like automatically updating a shipping charge after a customer enters their postal code in a form or it could be something more familiar like the Google auto-guess/complete that happens when you start typing in a search term.
Here are some other examples of sites using AJAX.
The difference between normal and AJAX web applications
A traditional web application(using a shopping cart form example)
.. a user enters their shipping details and clicks submit, the page sends the form details and reloads again showing the shipping charge.
AJAX web application
.. a user enters their postal code and the server automatically calculates the shipping charge and returns it to the original page, all without the user having to wait for another page load. Much more efficient!
How does it do it?
It’s the work of the devil! that’s how!
Take a look at this diagram:
- The server accepts the request, processes it and returns it’s own data
Probably the best data type used is XML, simply because it is a standard capable of representing complex data that would otherwise be difficult to represent. But, that doesn’t mean that XML is the only type of data that can be used. You could use plain text if there was only a small amount of simple data to be sent like a name or value.
The Server role
You don’t have to use the same server as the web page to do the processing, you could just as easily use a script on a remote server.
Places like Google, Flickr and others allow people to use an API (Application Programming Interface) to request information from one of their scripts on their server. Flickr for example could send back information listing a users photo locations so the AJAX page could display them.
Ok! that’s the introduction dealt with, I hope that clears up exactly what AJAX is for you!
On the next part of this series, we will get into the guts of an AJAX application and show you just how it works and how you can change it yourself. For now, here is an example of what you should be able to do after a couple more tutorials..
It detects a click on the pink area and sends a request to a PHP script that reads a text file containing a number, adds one to it, saves it and sends back the number to be displayed on the page. Try it yourself, it may take a couple of seconds to show the number (this is just an example, later we will add a nice AJAX’y type of wait animation). I wonder how high this number will/can go?
- Click Me! clicks so far :
Come back next week for the second part of the series where we will get into the innards of AJAX and show you just whats needed to make the traditional ‘hello world’ program….