Fast Track to Ajax: Introduction

Published Date
09 - Apr - 2009
| Last Updated
09 - Apr - 2009
 
Fast Track to Ajax: Introduction

AJAX

Introduction

The web has seen a huge change over the last couple of years. Gone are the days when clicking on a link mean a long wait staring at a blank screen, while the next page loaded. In what is popularly known as Web 2.0, today we see websites behaving more and more like applications. AJAX has been instrumental in this paradigm shift. No web developer today can afford to ignore AJAX, as the benefits it brings are substantial.

People have a lot of misconceptions about AJAX, and what it is. AJAX is not a programming language, it is not a software or an SDK / framework. AJAX stands for Asynchronous JavaScript and XML, it combines the scripting power of JavaScript with XML to provide data for modifying an HTML web page so that HTML is the canvas on which AJAX operates. Javascript is like the paintbrush and XML is the paint. 

The definition of AJAX has now however been expanded to include scripting languages other than JavaScript, and other ways of serializing data than XML. In-fact an application need not even be asynchronous to be AJAX. It has been made from an acronym to the term Ajax, as it is much less confusing then calling it AAAT for Asynchronous ActionScript And Text or AJAJ for Asynchronous JavaScript And JSON! Besides Ajax sounds cooler.

However for this article we will focus on Ajax in its simple form as Asynchronous JavaScript And XML.

Getting Started

So what do you need to get started with AJAX? Working with AJAX becomes much easier if you have the right tools, and the right background. Here are some of its basic requirements.

What you need to know

  • Basic HTML, and XML concepts
  • Basic JavaScript and browser DOM

What you need to start working

In all essence you could probably make an AJAX application using just notepad, but it isn't a very efficient approach. For best coding comfort it is recommended that you use some kind of IDE that has HTML and Javascript support. To run AJAX based applications, all you need is a browser (you probably already have one of those!). If you don't already have something set up I would recommend the following:

What is AJAX

Its Asynchronous

The Asynchronous nature of AJAX application is perhaps the most important. So what exactly does the Asynchronous in AJAX mean? It means that different parts of a page can load at different times. If you've used G-Mail, or Yahoo Mail, you will see that when you click on an e-mail, it opens in the same window, in minimal time.

Just a few years ago, clicking on a link meant a long wait, while the server processed your request. generated a new page, and then downloaded it to your computer. Now days most web-sites have pages divided into separate widgets, each of which gets data from the server whenever it is available. Each part of the page can load it's content separately, so you have something to look at while the rest of the page loads.

It runs on Javascript

Javascript is the part of AJAX which makes it dynamic in the first place. For those of you who aren't familiar with JavaScript, it is a scripting language that can be used inside a web page to make it more dynamic. From simple cases such as checking whether the information entered in a form is correct, to creating highly interactive web applications, JavaScript is the scripting language of the web.

It uses XML

For anyone who's familiar with HTML, XML is just a stone throw away. XML (Extensible Markup Language), despite its name, is less of a language, than it is a specification of how once can be created. It is composed of data encapsulated within tags, and is designed to be human readable. Here is an example of how one could use XML to store your contact data:

Why do we need AJAX

Using the internet has always seemed to be a much different process than using an application installed on your computer. This is one of the impressions developers want to change, and Ajax allows them to do exactly that. If you use Yahoo Mail's new interface, you will see that it resembles a desktop application more than an internet page. Clicking on an email instantly starts loading it in its pane, or in a new tab, the kind of interaction that had, till now, always been associated with desktop applications. This is very advantageous for people who are new to computer, or the internet, and for novices. To this effect AJAX based sites are known more as web applications or Rich Internet Applications (RIA) than websites.

Designing how a user interacts with an application is a field in itself, called Interaction Design or IxD. A very import factor is how the user expects to interact with the application. By making the web appear and interact more like a desktop application, there is no learning curve involved, and the user can jump right into sending email, or chatting or browsing their image gallery.

Ajax loads data asynchronously, so while you are reading your first email message, other's can be loaded in the background, making them readily available when you decide to open them. You can load the structure of the page initially so that something is readily visible, and load the content separately. This also means that if some of the content changes, that whole page need not be loaded, instead we can just reload the content. This is considerably faster and requires less bandwidth.

Benefits of using AJAX

The benefits of Ajax are only limited by the imagination of the one developing with it. The most common benefits you can immediately see when you use Ajax are:

How is AJAX used with other technologies

Since it is only a concept, a tool of design, it can be used anywhere, not just the web. Using Adobe's AIR SDK, you can make installable applications using Ajax concepts with JavaScript and HTML. It can be used with ActionScript for powering Flash based applications using Flex or Flash. Websites like Youtube use Ajax concepts along with Flash for their videos. Any language which provides facilities like JavaScript can be used, and any means of data communication can be used. XML can be very verbose, so some application use JSON. JSON, or JavaScript Object Notation is a very compact way of representing data, it is the method used by JavaScript itself and as such requires no processing on the client side. Being merely a concept, it has no requirements and as such can be used anywhere.

Ajax: Prosecution and Defense

With so much hype surrounding AJAX, there is sure to be criticism. So what flaws does AJAX have? How would it hold up in Court? We interrogated Ajax these are the proceeds:

Judge: You have been known to be lazy, slowing down our browsers as we interact with your website. What say you?
Ajax: I have only ever tried to do my duty! If my maker makes me slow, then so will I be. The very browsers you speak of are now at their best trying to come up with faster and faster engines to run JavaScript. Increases in speed of as much as 10 times are in the offing! Nonetheless your aging computer offers me no support, but better things are to come.

Judge: hmm... I grant you that, but what excuse do you give for depriving me of the comforts of my browser's back and forward buttons? Of bookmarking my favorite pages?
Ajax: What you have, sir, is a poorly designed website. If the maker had so desired, he could have used one of the endless measures available against such a thing. The Lord of the Browsers has given them the ability to use the part of the URL that follows '#' in the address to their own means. By other means they may use an invisible 'iframe' that my friend HTML so kindly provides.
I am but a tool your Honor. A poor user does not make me a poor product.

Judge: Boldly said! But did you know you are responsible for pages not appearing in the search results, and on Mobile devices? Why should I not check my email on the go? Your insistence on using JavaScript that the web crawlers do not, makes it ever more difficult for me to find you!
Ajax: I was never meant to be a solution for everything nor a replacement for effort. A hard working user will go through the effort of providing another alternative to these primitive crawlers and low powered devices. I assure you, a day will come when all will understand my tongue.

The case went on for a few days, and the Judge and Ajax came out sharing a pitcher of beer, so I think it all went well.

Ajax is a powerful tool to wield and as with anything powerful, it has the capability to do as much harm as good. If poorly designed a website wont appear in search engine results, its pages wont be bookmark-able, history wont work and site may be unusably slow, all in all a disaster!

To see the benefits yourself, try browsing GMail in its 'basic HTML' mode and compare it with the 'Standard' mode, and you will see for yourself how effective Ajax is.

Team DigitTeam Digit  teamdigit@digit.in

All of us are better than one of us.