5 Practical Ways for Using Ajax

February 3, 2010 • By

Over the past few years we’ve seen an increase in awareness and interactive use for AJAX, it’s becoming more and more popular and it has empowered web apps with the functionality of desktop applications.

This is Ajax, a powerful web-based scripting language that stands for Asynchronous JavaScript and XML. It’s main use is to allow an application to communicate with a server without having to refresh your web page.

Within this article we’ll discuss a variety of ways for you to embed AJAX into your web designs, we will also touch base on how they can benefit you.

Web Forms and Validation

Working with forms for the most part can be a hassle, however, using AJAX you can develop much better web forms with several features such as validation. You can also use AJAX to set-up fields that are auto-complete and call onto a server to cross reference if a user name (i.e.) has been taken or not.

AJAX can be utilized for the entire process of entering and submitting details on a web form. Another common use for AJAX in web forms is the measurement of a passwords strength, or the instant-communication with a user if a field is missing certain details.

Examples and Resources

Interacting With Users Through Updates and Notification

AJAX can also be used to diversify the way a system or database interacts with a user. For example let’s take a look at Twitter, this social phenomenon took rise and became extremely popular not just because of the service it offers, but also due to the simple and super-functional web interface.

When you’re viewing tweets and you’ve been staring at the same page for a couple seconds, Twitter uses AJAX to send you a small notification of how many new tweets there are, all without having to refresh the page.

Where-as other scripting languages require you to refresh the page before you can view any changes. This is now called the “Reverse Ajax Technique”. You can implement this sort of functionality into your applications as well, it’s just a matter of finding the most effective way to accomplish it.

Examples and Resources

Instant Messaging and Chatting

Chatting and Instant Messaging through the browser has opened doors for new technologies and applications (such as Twitter, and Facebook), however, what made them standout was their ability to relay information back and forth at an instant without having to open a new window or load a new page.

The way AJAX is used in instant messaging or chatting is these apps update the server by letting it know that you have sent a message/said something and they also check the server at certain intervals to see if you’ve received a new message.

Another way IM and Chat Rooms use AJAX is by updating your profile or user interface with the new message that was delivered after it checked the servers and found a new message.

Examples and Resources

“Collaborative” Graphical User Interfaces

With the rise of new and “improved” design trends you really have to use some heavy artillery to have your user interface stand out from the rest. What artillery may be this be (you ask)? Why AJAX of course! With AJAX we can develop not only cleaner and much more functional interfaces, but we can create features that can make a user feel like a kid in a candy store.

You can virtually accomplish more on a single page then on any other number of pages put together. Your web applications will look good, but it they will also feel good with increments of speed. AJAX simply makes things faster for users. Using AJAX can also limit the number of requests to a server which ultimately reduces bandwidth and speeds up the loading of your web pages.

One application that stands out from the heard is Google Maps, the interface is simple, maps load fast (may somewhat depend on your Internet Connection), and you feel as though you have full control over the application. Thumbs up for Google.

Examples and Resources

Adding External Widgets

Most sites use widgets calling for an external source for monetary reasons such as ads or for displaying RSS feeds, and updates via Twitter. Because when you’re using AJAX, whatever page that’s using the JavaScript is not limited to whichever server it’s located on.

With AJAX you can call on a server at anytime (24/7). And because of this, a variety of sidebar plugins for CMS’s like WordPress, Joomla, and Drupal (to name a few) can be used. A good example of an external widget utilizing AJAX is Google Adsense and Google’s Ajax Feed API.

Examples and Resources

Got a question about this article? – Ask it here!