Beginners AJAX. Tutorial series. Part 1

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…

Part 1.
AJAX Introduction.

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.

The word ‘AJAX’ comes from a contraction of ‘Asynchronous’, ‘Javascript’, ‘And’, ‘XML’, it’s purpose is to allow a web page to send and receive small bits of data ‘asynchronously’ while the user is still on the page and change the contents of parts of the page with the data received.

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.

As soon as you start typing something in the search box, the javascript on the page detects each key press and sends it to the server which then sends back any terms that have the same letters starting the term, as you continue to type it shows a narrowing set of options and how many results they each have. You can try it out yourself at http://labs.google.com/suggest

Here are some other examples of sites using AJAX.

• Google Maps
• Flickr
• Meebo

The important thing to remember is that AJAX is the term used when the page needs to send and/or receive data to the server asynchronously, whereas a sliding DIV or a dynamic menu is just Javascript or DHTML.

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!
Seriously though, javascript, css and html are used on the browser side and a scripting language is used on the server. The scripting language can be PHP, perl, asp or any kind of get-process-return language that runs on a server.

Really, javascript is the boss for all the actions as it is responsible for orchestrating everything on the client side. ie:
The javascript detects the click, text entry or other action which initiates a call to the script on the server which responds with the data requested, the javascript receives the data and by using css and html it is able to update the page, all without the user having to wait for a page load as with traditional web pages.

Take a look at this diagram:

1. The javascript detects an event and requests information from the server
2. The server accepts the request, processes it and returns it’s own data
3. The javascript accepts the data and uses CSS and HTML to put it on the page

Data types

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.

You could also use something called JSON (JavaScript Object Notation) but that’s for a later tutorial (and for geekier types!)

The Server role

It’s important to remember that AJAX is entirely dependent on a server program accepting requests and responding to them in some way. You can’t just make a web page with some Javascript on it and have an AJAX application, you need the javascript to send and receive information and do something with it.

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.

Simply, whatever the server or javascript does, it all comes down to ; request send, request received, data processed, data sent back, data used.

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?

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….