Beginning Ajax

Ajax is often mistaken for a programming language, when in reality it is more of a standard or technique used to create better, more interactive web applications. It is used to create more responsive web pages by loading certain areas of a page, instead of an entire page. In this tutorial, and the ones that follow, we will learn to work with it to build dynamic web sites.

Ajax is an acronym that stands for Asynchronous Javascript and XML. It work across a multitude of platforms and is compatible with all of the major browsers. The "asynchronous" portion of its name comes from its ability to request data from the server using the XMLHttpRequest Object and store it in the background without changing the appearance or behavior of the page.

Typically JavaScript is used to make the Ajax function calls. For browsers that do not support XMLHttpRequests, remote scripting can be used.

In this article we will learn the basics of this technique, along with its history. I will make some assumptions. I will assume that you have some knowledge of HTML or XHTML and JavaScript. An understanding of other web technologies, such as XML and CSS would also be helpful. I add CSS in that mix because CSS is also part of the standard that comprises the makeup of Ajax.

It's All in a Name

I'm sure you all know of the mythological figure Ajax? No? How about Ajax the Lesser, who was given the smack down by Poseidon and his trident? Ajax the cleaner? Ah there we go.

Asynchronous techniques can be dated back to the days of DHTML, or even earlier with the src attribute. It could be used to load JavaScript into a page, mimicking some of the AJAX type effects. Remote Scripting, introduced in 1998 by Microsoft, acted as a replacement for these techniques, using Java applets to give the client side the opportunity to communicate via JavaScript. Later on Microsoft would go on to create the XMLHttp Request with its release of Internet Explorer 5.

Then finally, in 2005 (I've skipped a little bit of history to ensure you stay awake), Google popularized Ajax techniques with its Google Suggest in an effort to rule the world. Now today, a short three years later, we are all slaves to the Lord and Master Goog. It commands and we search. All Hail the Goog!

Advantages of Using Ajax

Before we actually learn the techniques, it may help to understand why you would want to and compare the advantages and disadvantages of using Ajax. I would say for the most part that the advantages far outweigh the disadvantages, but you may disagree.

So without further ado, here are the advantages:

-Consistency

Ajax allows for a consistent view in that it does not need to reload the entire page like traditional methods. Instead it can reload specific elements, so the page does not need to flash on and off or reposition itself.

-Fluidity

Instead of loading different pages to display information, you can load the data in the same window, making your web page feel and behave more like a Flash or a desktop application.

-Usability

As stated above, you can make your web pages feel more like an application, allowing for enhanced user experiences and easier controls.

-Bandwidth Friendly

Since Ajax updates portions of the web page instead of the whole thing, and handles data in the background, it typically results in faster page loads. And honestly, even if the page does not actually load faster, it feels that way because the page does not flicker or seem to change much at all.

-Interactivity

Due to the increased speed of the pages loaded (or the illusion of increased speed), visitors to your site are more likely to interact with all of the elements on your site. If you have a rating system on your website or a choice of options, in traditional web sites the user chooses some options and has to wait for the page to reload and store the data before displaying more options. With Ajax, it all happens on the fly. I know when I visit a website and after every decision the page has to reload, I get pretty irked, pretty fast. Yet if just the page section updates, I tend to stay.

That isn't to say that as Ajax gets more popular and we get more used to it, that we won't get impatient with it as well. Consider cooking something in the microwave for five minutes. It seems like a hassle to us now, but back when they were first invented, it was a godsend.

Disadvantages of Using Ajax

Believe it or not, even Ajax has some disadvantages to it. Here are some things to consider when deciding whether or not to use it:

-Security

Ajax has been around for a few years now, but it is really still an infant in terms of technology. And like all new (and old) technologies, it is vulnerable to exploits. Of course if this were to stop you, you may as well give up on the web altogether.

-Accessibility

As we've seen before with new technologies, Ajax can sometimes be lacking when it comes to meeting certain accessibility standards.

-Search Engine Optimization

It seems these days that the Internet is only about two things, one of which I can't mention here in this article. The other of course is SEO. Since Ajax loads content after the page loads sometimes, there aren't always good ways to optimize your site so that spiders can crawl it. That isn't to say you can't, but just be aware of the issues and educate yourself.

-Weirdness

Ajax is an evolving technique and as such certain behaviors can occur that you may not expect. It can also be argued that users who are used to traditional web pages might find a page that acts more like an application more difficult to comprehend.

-Timeliness

Even though Ajax should typically speed up your web page, it ultimately is dependent upon the same hardware as other web technologies and thus is subject to the same problems as normal web pages. If a server is experiencing difficulties, it won't matter what you are programming your site with.

Conclusion

Well that is all the time we have for this article. In our next episode we will begin learning the basics of Ajax and how to work with the XMLHttp Request Object. In the meantime you may wish to brush up on your HTML and JavaScript.

Till then...

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.