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!

  • Pingback: 5 Practical Ways for Using Ajax | Lively Design Tuts

  • http://vsensors.com Ray Mercer

    Amazing post, thanks for the outline of how ajax is used. seems as though google is somewhat of a pioneer when it comes to using ajax, i’ve never really noticed. huh, what you learn.

  • Taha

    nice post. The post like this clear lots of confusion. Every one knows about the latest technologies like JQuery and Ajax but doesn’t know their differences and where to use them properly. An article on this topic will be very helpful.

  • http://www.crearecommunications.co.uk Mike

    Does look like a great way of making interactive content. I do like the fact that you can update pages without refreshing. I think that when you’re using a web service having to refresh the page is a real nuisance so this is a great solution.

  • http://albism.me Albis M.

    informative and concise, I would love to see more posts like this. Also, I’m in love with your new questions and answers section!

  • http://grindsmart.com Joel Reyes

    @Taha

    Thank you for your input! That would definitely make a great post, we’ll put that into motion ;)

  • http://www.impressivewebs.com Louis

    Thanks for posting this, good overview of what Ajax is capable of.

    I just wanted to clear up a few things that were slightly in error in your explanations, though.

    First, you described Ajax as a “web-based scripting language”. It’s not a language. In fact, it’s not even a “technology”; it’s a “methodology”, because it involves the use of a number of technologies and languages.

    Secondy, although you were technically correct in saying that Ajax stands for “Asynchronous JavaScript and XML”, it really doesn’t stand for that anymore. Ajax doesn’t require the use of XML, so nowadays it is commonly accepted that Ajax is not an acronym. Which brings me to my next point…

    Third, because XML is not required, Ajax is probably best not to be written in all caps, although you still see that often. It’s no longer an acronym, it’s simply a word standing for a methodology used to speed up pages and enhance the user experience.

    But thanks again for posting this, it’s good to see stuff on Ajax on sites that are usually more focused on design.

  • http://www.forbetterdesigns.com A.D.K.

    NIce infor here, thanks for this

  • Marj

    You used Dustin Diaz’s contact form from 2005 (5 years ago)!

  • http://www.tilomitra.com Tilo

    Good post, but Google Maps does not rely on AJAX. Open Firebug and check – there are no AJAX requests going through.

  • Pingback: Notable Tech Posts – 2010.02.07 | The Life of Lew Ayotte

  • http://codehill.com Amgad

    Thank you for including my AJAX and C# blog post :)

  • Pingback: This Weeks Twitter Design News Roundup N.23 - Speckyboy Design Magazine

  • http://www.aarson.com Web Design Philadelphia

    A do agree that AJAX has been a very big contributor to way we use the internet today. For a while it seemed like javascript was becoming another one of the those useless programming langauges from the past, but once I got myself knee deep in some AJAX my opinions took a quick turn.

  • Pingback: ? ?????? Feb 3, 201014 « 3d max

  • Pingback: Cloud Computing in a Nutshell | TechGenii, Inc. | Digital Strategy, New Media Services, Technology Strategy