Introduction

The evolution of AJAX has a rather funny beginning--to me anyway. The story goes that AJAX was something that was lying around in the tools of existing standards for years until the folks at GOOGLE decided to find a way to make their search form more interactive. The idea they came up with was that as you started typing, a little list of close results would drop down under the form, and that as you typed, this list narrowed down until it closely matched what you were looking for. I call it "predictive Text", the guys at Google called it "Google Suggest". It's still a major feature on the google.com search engine to this day.

The problem that existed, however, was that before then there was no real way to query a webserver and return a result without reloading the web page. We all know that reloading, or loading a page queries the server with an executable runtime compiled script such as PHP or ASP which returns a result to a browser, right? So how do we get a narrowed down list of "LIKE" terms from the server if the page is not reloading with every keystroke? Well, the boys at Google found a way to exploit the already-existant XMLHttpRequest Object (introduced in the first version of the Java language in 1995) in order to query a server (or in Google's case, about 700 servers) and update the content of an element on the webpage without reloading all the content. The nice effect is the real-time updating as you type, and since then AJAX has become a very popular source of web- wizardry, albeit sometimes over-used in my humble opinion. I still like using it, and I believe it definately has a purpose. I do NOT believe it should be the focal point of a website, but that's just me.

Let's count down the Top Ten Advantages of using Ajax.

10 - Page Load

One of my pet peevs! If a webpage takes longer than 10 seconds to load I AM GONE. Sorry, but I really do not have the time. However, even if you have quite a large loading page, its quite nice to be able to load certain content dynamically. This could be content, images, etc. The boys at Facebook seem to do it nicely. Does the ENTIRE PAGE really need to refresh just becuase I have chosen to ignore someone who poked me? Nope. It shouldn't. Process and refresh only the content that needs refreshing. You are not only building a faster website, you are saving your visitors MONEY in bandwidth and it looks pretty cool too.

9 - Server VS Browser

Ok, yes. If I really have to I could dynamically load a second drop-down when the first one changes by using JavaScript alone. I know this because I have actually done that (he says shamefully). But I would not recommend it. Not only are there BROWSER / OS / JAVASCRIPT VERSION concerns, it just looks awful when you view the source. Also, we get back to point 10. Have a huge list you need to populate? How about 200 000 entries. Are you SURE you want to load all that on every pageload? With AJAX you query the server, get what you need from the database and ignore the rest.

8 - User Simplicity

Ever had to click on a link, only to have the page reload, and then you end up on a new page with the content you require somewhere in the scrolling labyrinths below? It happens all the time, and annoys me. I probably already used a search engine once just to get here, please do not make me search again? With AJAX, ask me to click a link and then you can simply load the content right there, below the link. Not only will I use your site again, I will probably bookmark it, just because it made things simple.

7 - Interaction

Interaction to me is a large part of development. From the moment I begin the software design phase of a project, my thinking revolves around one thing: how will this affect the user? This is quite an important thing to think about as it is going to make or break your application / website. With AJAX, interaction queues can be made slicker, smoother and faster. I do not have to reload the page to tell the user that something has happened that affects him / her in any way.

6 - Speed

It's a biggy. Like it or not I do not want to sit around the whole day while your lovely images keep reloading every time I do something on your website. As we mentioned before, AJAX makes changing content fast and simple, and it looks awesome.

5 - Functionality

I have said it before and I'll say it again: functionality beats wizardry every time save once. Yeah, the first time I'll be really impressed when it looks good. But after that I'm going to wonder why clicking that link didn't do what I wanted it to. Or I am going to be annoyed that when I am urgently looking for something and I have to wait for your fancy effect to do its thing, or the page to redirect. AJAX removes all the fanciness most bad developers use to try to cover up the glaring gaps in their logic. It's simple, and it works.

4 - Backend Bliss

Backend processing--particularly bad processing or processing happening on a slow server--results in about 60% of pageload problems. But with AJAX processing you simply replace the processing element with a nice little AJAX loading gif and all is forgiven.

3 - Style

There is absolutely nothing better than smooth transitions between user interaction and server reaction. This is probably what makes AJAX one of the nicest effects available without going extreme in the line of Flash, etc. Whats nice about it too, is if you are a JavaScript moron like I can sometimes be, AJAX is easy to understand, and most of the work can be done in the server-side language of your choice. Mine happens to be PHP, which is a very popular way of going about integrating AJAX.

2 - Bandwidth Usage

Again, because pages do not have to completely reload you are really using less server bandwidth, and when you are in countries or places that charge for your hosting bandwith, it really is something to think about.

1 - Form Validation

This is the biggest one for me. Form validation should be instant, seemless and unobtrusive. AJAX gives you all of that, and more. Done properly AJAX form validation is probably the easist way to get a mediocre site looking professional without spending money on it.

Conclusion

AJAX is not only smooth and sleek, it is neat and precise too. Using it can make your website more professional and enticing to visitors, which is what we all want, right? But please be cautioned: use it sparingly, in the right place, in the right way. It is not meant to be flashy. Unobtrusive is nice. Think about it.

Original article