Design

How AJAX Works: 10 Practical Uses For AJAX

June 14th, 2009

AJAX has gotten more and more popular over the years, and has allowed web applications to act more and more like desktop applications. AJAX can provide a lot of additional functionality that could not be accomplished any other way.

What Is AJAX? How Does It Work?

AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communitcate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another.

Here is how the usual AJAX script goes:

  • Some action triggers the event, like the user clicking a button.
  • The AJAX call fires, and sends a request to a server-side script, using XML
  • The server-side script (PHP, ASP, or whatever) takes the input from JavaScript, can access the database if it needs to, and processes the data.
  • Using XML again, the script sends the data back to the original client-side page that made the request
  • A second JavaScript function, called a callback function,catches the data, and updates the web page

Throughout this tutorial, we will discuss how various scripts use this routine to accomplish a wide variety of effects.

1. Login Forms

Ajax Post Image

Instead of going to a login page, and then navigating back to the page you originally wanted, with AJAX, a user can type in their user name and password directly into the original page. From there AJAX will send a request to the server to log them in. The server let’s the page know they’ve been logged in, and the page you are on can update as needed. Digg has a login-system that works like this.

Example: Digg.com (top of page)

Plugin: jQuery Form Plugin

2. Auto-Complete

Ajax Post Image

Google was one of the first major companies to start using AJAX, and Google’s search suggestion tool was one of the first ways they used it, and one of the first auto-complete tools made. When typing into the Google search bar, it starts to use AJAX to get common results from the database on each keystroke. Auto-Complete is great for forms where you have a lot of possible inputs, and making a select drop down would be too long and cumbersome.

Example: Google Search

Plugin:  jq autocomplete

3. Voting and Rating

Ajax Post Image

Social bookmarking sites like Digg and Reddit let the users decide the main content of the site by voting on content that the users like. They use AJAX to handle all of the voting, so that the users are able to voice their opinions on a number of stories quickly and easily.

Example: Reddit

4. Updating With User Content

Ajax Post Image

One of the things that made Twitter so popular was their simple and easy-to-use interface. When someone makes a ‘tweet’, it is instantly added to their feed, and everything is updated. Recently, Twitter has started using AJAX with their ‘trending topics’ pages. Every few seconds, the page lets the user know that more tweets have been made about the subject, giving them up-to-the-second updates.

Example: Twitter

5. Form Submission & Validation

Ajax Post Image

Forms have always tricky to work with, but AJAX can make them a lot better for the users. AJAX can be used in a variety of ways, from the auto complete mentioned above, to validation and submission as well. Some sites use AJAX to check if a form meets certain requirements, such as password strength, or if something is a valid email or URL.

Example: 10 Cool jQuery Form Plugins

6. Chat Rooms And Instant Messaging

Ajax Post Image

Chatting online has come a long way from the days of IRC. Chat rooms and instant messaging can now be handled in the browser completely. There are two main AJAX processes in a chat room or IM application. Think of one of them as your ears, and one of them as your mouth. Your ‘mouth’ updates the server and lets it know that you have sent a message. The ‘ears’ check with the server constantly, and updates your page with messages that have been sent by whoever you are chatting with.

Example: Meebo Chat (Uses Ajax)

Plugin: GMail/Facebook Style Chat Script

7. Slicker UIs

Ajax Post Image

Creating a clean, slick user interface is a very popular use of AJAX. It allows users to accomplish more on a single page. The benefits of this are twofold: First, it makes using the web application quicker and easier for the user; Secondly, it cuts down on the number of requests you have to make to the server, which cuts down on bandwidth and load times. A free file upload service called Drop.io uses this well. Google has also really pushed the envelope of what is possible with AJAX by making desktop-like applications like Google Docs and Google Maps.

jQuery UI Library

8. External Widgets

Ajax Post Image

When using AJAX, the page that is using the JavaScript isn’t just limited to the server it is located on. The AJAX can make a call to any server online. This is how a number of plug-ins for Content Management Systems like WordPress work, and other various scripts like Google Adsense.

Example: Google Adsense

Plugin: Script for loading external content into div

9. Lightboxes instead of pop-ups

Ajax Post Image

Pop-up blockers are very common place these days, and for a good reason: pop-ups are annoying. Using light boxes, which are pop-ups inside the browser window, the pop-up blocker can’t stop it, and they aren’t quite as irritating to the user. Some people use them for advertising, like on Darren Rowe’s ProBlogger.com. They can also be used for something like a login or register box, like Reddit does when you try to vote and you are not logged in.

Example: Logo Sauce

Plugin: Lightbox Plugin

10. Using AJAX With Flash

Ajax Post Image

Using AJAX along with Flash is a rarely used technique, but it can be used to generate some impressive results. The flash game website Kongregate uses this to great effect. Using their API, they have their own achievement system that involves winning ‘badges’ for completing various accomplishments in games. When a badge is earned, the API in Flash sends a response back to JavaScript, which then uses AJAX to update the user’s profile with the newly earned award.

Example: Kongregate

Plugin: jQuery Flash Plugin

I hope this article has given you a lot of ideas of how you can use AJAX to improve and expand your web applications. What are some other uses you can think of for AJAX?

Author: Joel Reyes

Joel Reyes Has been designing and coding web sites for several years, this has lead him to be the creative mind behind Looney Designer a design resource and portfolio site that revolves around web and graphic design.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

Sort by:   newest | oldest | most voted
Jonathan
Guest
Jonathan
7 years 1 month ago

“When using AJAX, the page that is using the JavaScript isn’t just limited to the server it is located on. The AJAX can make a call to any server online.”

That statement couldn’t be any more wrong. AJAX requests are limited by the “Same Origin Policy”

Prakhar
Guest
Prakhar
7 years 1 month ago

Very Correct, Jonathan… the author is not completely wrong here…. it can be achieved using server-side technologies (proxy)

Matchu
Guest
Matchu
7 years 1 month ago

To be fair, you can still be sneaky and use .js files and callbacks, which accomplish a similar effect. Which is pseudo-AJAX in the sense that it doesn’t really use the XHR technology, but is asynchronous, is Javascript, and looks exactly the same to the end user: something updates without having the page refresh.

Matchu
Guest
Matchu
7 years 1 month ago

Such would also require that both servers set themselves up to send/receive such callbacks, but it’s been done: see JSONP (http://en.wikipedia.org/wiki/JSON#JSONP)

Phoenix2life
Guest
7 years 1 month ago

Definitely true that we can make an AJAX call to different domain than the one on which server app is residing. This is very much possible on IE but not on browser like FireFox and Safari.

It definitely need to be taken care using appropriate JavaScript/JQuery.

Anyway very good list of AJAX functionality. AJAX helps to improve usability, add dynamic nature without those white flashes as well as allow to refresh content spots depending on events and user actions.

AJAX enables client side MVC model very nicely.

Thanks to share !!!!

Anthony Pace
Guest
Anthony Pace
7 years 15 days ago

Have you forgotten about script polling through iframe and script tags, you can even poll through links for css, and images.

Sure, using ajax with XMLHttpRequest will limit you; yet, there are other ways to do things.

Ezrad Lionel
Guest
7 years 1 month ago

A post this elaborate should first distinguish between Asynchronous HTTP requests and plain old Javascript techniques. Don’t promulgate this AJAX nonsense, I was doing all the fancy stuff before I knew about XML requests. All in all, this article was pretty pointless. I don’t know who this will serve, you should have broken down the implementation with small tutorials. That would have made sense.

Dandriod
Guest
Dandriod
7 years 1 month ago

WOW, you make a great point there Ezrad. Thats right, you really are a douchebag!

PelFusion
Guest
7 years 1 month ago

thanks…really help full article

Juarez P. A. Filho
Guest
7 years 1 month ago

Nice post guys! Ajax is really a huge part of Dynamic Web. :)

Patrick Sweeney
Guest
7 years 1 month ago

Gotta love these comments that add NOTHING to an already worthless post.

Ashley
Guest
Ashley
7 years 1 month ago

Gotta love how idiots posting vile comments STILL include their full name and URL in their comment.

Ezrad Lionel
Guest
7 years 1 month ago

It’s called criticism. You should benefit from it whether it’s constructive or not.

Patrick Sweeney
Guest
7 years 1 month ago

It’s not vile at all.

The post sucked as it gave some flat out WRONG info to beginners and that comment adds nothing but a cheap link to his site. Comments should ADD something to the discussion or discuss what it covers. I’m sick of people leaving useless comments, and that’s the only reason they do it.

Saliem
Guest
7 years 1 month ago

Good quick article to glance over, and good idea for an article. Had you guys gone in depth into describing how *you* thought various ajax techniques were actually implemented on popular websites *in depth* this article might have been better. and perhaps more popular.

DigitalAlchemist
Guest
7 years 1 month ago

AJAX is part of the web 2.BLOW phenomenon. I’m going to have to agree with both Jonathan and Ezrad Lionel.

This bandwagon only has three wheels, time to get off now.

Bill Lowden
Guest
7 years 1 month ago

Thanks for the post. Greate overview of AJAX and it’s uses.

Rahul Jadhav
Guest
7 years 1 month ago

Nice collection. Will try lightboxes for my blog

Jasper
Guest
7 years 1 month ago

I disagree on ‘1. Login Forms’.
I’m not a Digg-user so I don’t know how Digg’s implemented it, but I think that it’s just a form-element which is hided by css and shows up by clicking a button.
Since the login-form is transmitted along with the rest of the page and the whole page is refreshed after submitting the form, I would not consider this AJAX.

Greg Raby
Guest
7 years 1 month ago

Thanks, I need to get started on that one. thanks Noupe !

Charmaine
Guest
7 years 1 month ago

I am not an IT expert but I shall consider AJAX.

Mike
Guest
Mike
7 years 1 month ago

Oh, you made me wanna learn AJAX … :)

Rees
Guest
Rees
7 years 1 month ago

If you use ajax for a login form my understanding is that the form is posted using http and not https so the password is not secure. Any ideas on how it can be done securely? Thanks

drude
Guest
drude
7 years 1 month ago

Many of these Ajax techniques can be implemented through session variables and form post backs. Nothing new here. This was being done way back in 2002 and earlier. Nice to see people reinventing the wheel.

Matchu
Guest
Matchu
7 years 1 month ago
All it really does is create a nicer user experience – but it’s a tiny change that can make a huge difference. One of the reasons Gmail was a major game-changer was that it was the first app out there to /really/ leverage the power of AJAX. It managed to get a nice performance boost, too, out of the ability to preload messages, meaning even less wait time once you finally decide to click an inbox message. I’ve tried Gmail’s “Basic HTML” mode when I’ve been forced to on occasion, and, to be honest, were “session variables and form post… Read more »
Martin Gonzalez
Guest
7 years 1 month ago

Nice post guys!

J Heidbreder
Guest
J Heidbreder
7 years 1 month ago

This is an awesome post – I am really excited for AJAX! now. I just learned about AJAX! from my nephew and I’m going to get a good book on Web20 and jump right in. These ajax! sites like Netflix are ritzy and immute to the financial collapese. I read this on noupse.com any way. Like I said, the ajax! could help web artists like you and me in these difficult times.

Patrick Sweeney
Guest
7 years 1 month ago

Is it me or can no other human being parse that sentence?

ed
Guest
ed
6 years 7 months ago

Parse error: “your english sucks”

Ezrad Lionel
Guest
7 years 1 month ago

Saying AJAX is like saying I drive a car with wheels and a steering wheel, but I only recently found out I can turn.

I think we should boycott AJAX before we boycott IE.

Matchu
Guest
Matchu
7 years 1 month ago

Wait… you lost me. Sentence 1 says to me that AJAX is easy and everyone should be using it, and sentence 2 says that nobody should be using it. What’s the correct interpretation?

John
Guest
John
7 years 1 month ago

It is really useful information … we are grateful for you explanation

Mike B
Guest
7 years 1 month ago

Wow there’s so many applications for Ajax, if I can get my head around it, I will be using it.

donald
Guest
7 years 1 month ago

Nice post guys! Ajax is really a huge part of Dynamic Web!

KS
Guest
7 years 1 month ago

Very cool roundup! I don’t quite understand the jQuery Flash detection. If you want to use Flash detection with JavaScript, you should really use SWFObject. It’s used by Adobe in Dreamweaver, Flash Builder, and Photoshop!

http://code.google.com/p/swfobject/

taylan
Guest
7 years 1 month ago

Nice post, thanks a lot. I think, will started on ajax.

Premium Theme Info
Guest
7 years 1 month ago

Nice and useful info!

Shawn Hooghkirk
Guest
7 years 1 month ago

Great article! Thank you.

ncj
Guest
ncj
7 years 1 month ago

It is very important for the sites I work on to be accessible and meet 508 guidelines. AJAX has a bad rap when it comes accessibility issues because of the way the page is refreshed.

Are any of these samples accessible?

Acronyms
Guest
7 years 1 month ago

Thanks for the summary

kittu
Guest
7 years 1 month ago

great stuff you have here!! m definetly going to try some of these!! thnx a ton buddy!!

Joel Reyes
Guest
7 years 1 month ago

Thank you all for your comments! :) I hope you will continue to find this site as useful as many others have.

Rohit
Guest
7 years 1 month ago

Useful Information. Now I know, AJAX can be of great use!

tulch
Guest
tulch
7 years 28 days ago

Great article!

I’m very new to scripting, but does anyone know if you can incorporate AJAX into InDesign? Basically, I’ve created an interactive PDF newsletter using InDesign and I’m wondering if I can add features such as rating articles/adding email functions/chatrooms.

Thanks!

Webhostright
Guest
7 years 21 days ago

Thanks for pointing out some examples of its uses.

Tbh, im still not 100% clear on when something is classed as using AJAX and when its not, i was reading through a list on a tuts site and afterwards it was commented by some that certain things in the list were not AJAX.

I have a lot to learn yet though so hopefully with more reading i will begin to understand it better.

Chris @ Gaming Weapons
Guest
6 years 11 months ago

Thanks for the roundup. I’ve only just started getting into Ajax but it’s clearly a great way of achieving a better user experience.

Mustafa
Guest
Mustafa
6 years 6 months ago

God bless you :-)

Will Strohl
Guest
6 years 4 months ago

FYI – This excellent article is stolen and republished all over the place, word-for-word, without your pictures. :(

kingkabuz
Guest
5 years 11 months ago

Great hints as to the power of Ajax. I’m looking to start using it, and it seems I could find many uses for it. I must start immediately!

Lisa Thomason
Guest
5 years 10 months ago

Very good list of AJAX functionality. AJAX helps to improve usability, add dynamic nature, thanks for the round up. LT

Trance
Guest
5 years 10 months ago

Trance Music is Good Armin van Buuren

Craig
Guest
5 years 10 months ago

Comprehensive list of where AJAX will be beneficial, Thanks!

Yuonne Vandyne
Guest
5 years 9 months ago

Probably the most powerful Web optimization is done by generating relationships with other web-sites that are inside the exact same vertical and consequently carry wonderful relevacne inside the links they point to your site. Some random hyperlinks for example blog commenting is fine, but you have to have strong backlinks to maintain a very good position within the SERPS.

Cecil Perie
Guest
5 years 8 months ago

This is really among the much better content articles with those who I have read more the following subject matter as of late. Great function.

Wolfy
Guest
5 years 5 months ago

Love Ajax~ very useful for rich web applications.

Tyrone
Guest
5 years 4 months ago

What is the license on these examples?

I am considering some of these resources for the next generation of the Vehicle Stars used car classifieds search

Sag
Guest
5 years 3 months ago

I would like to use some of this options to improve my visual look , with pics etc.

Manish Rai
Guest
4 years 10 months ago

ajax has added many new features to make a webpage more interactive and cuts the cost of bandwidth requirement.

Psihologie
Guest
4 years 10 months ago

Hey Joel, ignore stupid comments listed here… i am really grateful for this article… i am starting some new features on my website, and i thank you so for the above examples. Thanks!

Pradyut Kumar NathSharma
Guest
4 years 9 months ago

I LIKE THESE TYPES OF EXAMPLE.
I WILL BE USING IT.

Debasish Mishra
Guest
4 years 9 months ago

nice one sir ……………..

emily nyondo
Guest
emily nyondo
4 years 9 months ago

the article is great really helpfull. Thumbs up!!!

sahil khan
Guest
4 years 5 months ago

he article is great really helpfull. Thumbs up!!!

Ezekiel Nyamle
Guest
Ezekiel Nyamle
4 years 2 months ago

it is funny and I’ll use my time to make sure I know this within 72 hours

Uko
Guest
Uko
4 years 17 days ago

Would like to add more , it is a complete tutorial how using ajax with jquery and php to setup a star rating system.

http://www.thetutlage.com/post=TUT226

Sjay Wicky
Guest
3 years 10 months ago

Great! I was looking for a way to display the detail description of a product or service using AJAX. So, user can view it without going away from the page they are or reloading it. I am not sure weather I have to go for AJAX or just use simple javascript?

However, I quickly went through the possibilities you’ve given

Cheers

Mark Corpuz
Guest
3 years 10 months ago

As a designer with a tiny bit of coding experience. I can say that having an overview and real-life understanding of what AJAX can do can help significantly in making better decisions on which apps to use. As I focus on building wordpress-based sites, the integration of AJAX running plugins becoming more available to the market just makes the web more accessible. It also allows the “small guy” to compete and have the ability to build great things simply out of ingenuity. Thanks for the article.

wpDiscuz