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:
- IDE
– Aptana Studio (Included in Digit DVD)
– Dreamweaver
Aptana is free Eclipse based web development platform which can run on Windows, Linux and MacOS. It supports all major web technologies and has tons of free plug-ins available since it is based on Eclipse. It also comes preloaded with everything you need to start working with AJAX frameworks.
For most people Dreamweaver will need no introduction. It is a very powerful and versatile web development software, however it costs quite a bit to be used by a casual developer. - Browser– Firefox
It is a browser that is very standards compliant, fast and full featured, with the FireBug add-on, it can become a full debugging platform. Of course every web developer should test his application on multiple browsers running on multiple Operating Systems. - Code Editor– Notepad
A free open-source text editor with powerful features for working with code. This may seem redundant when you already have an IDE, however starting up an IDE just to make minor changes in the code can sometimes be an overkill. A small light code editor is always a good thing to have around.
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:
- You have the ability to make richer, better looking web applications, which behave more like desktop applications.
- For users this means that the application is easier to use, and faster to use
- For developers this means they have less support requests
- For enterprises this means less training costs
- The application can be made more responsive
- For users this means less waiting and more work
- For enterprises this means less bandwidth costs, as only a fraction of the page is loaded most of the times instead of the whole
- There are a large no of AJAX frameworks available
- For developers this means less effort is required to develop and application
- For enterprises this means that their product is easier and cheaper to maintain
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.