Noupe Editorial Team June 14th, 2009

How AJAX Works: 10 Practical Uses For AJAX

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: (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 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 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.

Noupe Editorial Team

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.


  1. “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”

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

    2. 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.

    3. 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 !!!!

    4. 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.

  2. 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.

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

      2. 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.

  3. 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.

  4. 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.

  5. 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

  6. 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.

    1. 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 backs mode” my only choice, I would be using desktop apps. Instead, since Gmail’s interface is so powerful when sufficiently souped up, I’m happy to use it as my primary e-mail application.

      In short, AJAX sets a new standard for websites, and refusing to acknowledge its power will only lead to falling further behind in web development.

  7. 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 any way. Like I said, the ajax! could help web artists like you and me in these difficult times.

  8. 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.

    1. 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?

  9. 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?

  10. 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.


  11. 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.

  12. 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.

  13. 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!

  14. 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


  15. 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.

Sorry, Comments are closed...