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

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.


67 comments for „How AJAX Works: 10 Practical Uses For AJAX
  1. Jonathan on June 14th, 2009 at 3:38 am

    “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 on June 14th, 2009 at 7:57 pm

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

    • Matchu on June 15th, 2009 at 1:12 am

      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 on June 15th, 2009 at 1:14 am

        Such would also require that both servers set themselves up to send/receive such callbacks, but it’s been done: see JSONP (

    • Phoenix2life on June 18th, 2009 at 12:20 am

      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 on July 15th, 2009 at 3:48 pm

      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. Ezrad Lionel on June 14th, 2009 at 5:03 am

    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 on June 22nd, 2009 at 12:26 pm

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

  3. PelFusion on June 14th, 2009 at 5:18 am

    thanks…really help full article

  4. Juarez P. A. Filho on June 14th, 2009 at 5:47 am

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

    • Patrick Sweeney on June 14th, 2009 at 10:19 am

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

      • Ashley on June 15th, 2009 at 3:37 am

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

      • Ezrad Lionel on June 15th, 2009 at 6:03 am

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

      • Patrick Sweeney on June 15th, 2009 at 8:04 am

        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.

  5. Saliem on June 14th, 2009 at 8:24 am

    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.

  6. DigitalAlchemist on June 14th, 2009 at 8:42 am

    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.

  7. Bill Lowden on June 14th, 2009 at 9:12 am

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

  8. Rahul Jadhav on June 14th, 2009 at 2:14 pm

    Nice collection. Will try lightboxes for my blog

  9. Jasper on June 14th, 2009 at 2:59 pm

    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.

  10. Greg Raby on June 14th, 2009 at 3:06 pm

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

  11. Charmaine on June 14th, 2009 at 3:25 pm

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

  12. Mike on June 14th, 2009 at 6:03 pm

    Oh, you made me wanna learn AJAX … :)

  13. Rees on June 14th, 2009 at 9:18 pm

    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

  14. drude on June 14th, 2009 at 10:14 pm

    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 on June 15th, 2009 at 2:14 am

      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.

  15. Martin Gonzalez on June 14th, 2009 at 10:17 pm

    Nice post guys!

  16. J Heidbreder on June 15th, 2009 at 1:33 am

    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.

    • Patrick Sweeney on June 15th, 2009 at 8:06 am

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

      • ed on December 1st, 2009 at 11:37 am

        Parse error: “your english sucks”

  17. Ezrad Lionel on June 15th, 2009 at 6:06 am

    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 on June 15th, 2009 at 8:52 pm

      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?

  18. John on June 15th, 2009 at 8:37 am

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

  19. Mike B on June 15th, 2009 at 1:57 pm

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

  20. donald on June 15th, 2009 at 3:13 pm

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

  21. KS on June 16th, 2009 at 1:28 am

    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!

  22. taylan on June 16th, 2009 at 1:31 am

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

  23. Premium Theme Info on June 16th, 2009 at 1:53 am

    Nice and useful info!

  24. Shawn Hooghkirk on June 16th, 2009 at 6:30 pm

    Great article! Thank you.

  25. ncj on June 16th, 2009 at 6:57 pm

    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?

  26. Acronyms on June 17th, 2009 at 9:15 am

    Thanks for the summary

  27. kittu on June 17th, 2009 at 6:29 pm

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

  28. Joel Reyes on June 18th, 2009 at 1:13 am

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

  29. Rohit on June 20th, 2009 at 1:33 am

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

  30. tulch on July 2nd, 2009 at 11:13 pm

    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.


  31. Webhostright on July 10th, 2009 at 1:10 am

    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.

  32. Chris @ Gaming Weapons on August 6th, 2009 at 7:51 pm

    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.

  33. Mustafa on January 3rd, 2010 at 12:02 am

    God bless you :-)

  34. Will Strohl on March 20th, 2010 at 10:52 am

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

  35. kingkabuz on August 21st, 2010 at 2:30 am

    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!

  36. Lisa Thomason on August 31st, 2010 at 10:23 am

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

  37. Trance on September 5th, 2010 at 6:32 am

    Trance Music is Good Armin van Buuren

  38. Craig on September 8th, 2010 at 1:10 am

    Comprehensive list of where AJAX will be beneficial, Thanks!

  39. Yuonne Vandyne on October 6th, 2010 at 10:45 pm

    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.

  40. Cecil Perie on November 5th, 2010 at 4:16 pm

    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.

  41. Wolfy on February 4th, 2011 at 10:07 pm

    Love Ajax~ very useful for rich web applications.

  42. Tyrone on March 25th, 2011 at 7:25 am

    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

  43. Sag on April 3rd, 2011 at 7:25 pm

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

  44. Manish Rai on September 15th, 2011 at 9:30 am

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

  45. Psihologie on September 27th, 2011 at 5:23 pm

    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!

  46. Pradyut Kumar NathSharma on October 19th, 2011 at 1:06 pm


  47. Debasish Mishra on October 19th, 2011 at 6:47 pm

    nice one sir ……………..

  48. emily nyondo on October 20th, 2011 at 8:24 pm

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

  49. sahil khan on February 10th, 2012 at 12:33 pm

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

  50. Ezekiel Nyamle on May 9th, 2012 at 9:40 pm

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

  51. Uko on July 13th, 2012 at 4:47 pm

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

  52. Sjay Wicky on September 1st, 2012 at 10:19 am

    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


  53. Mark Corpuz on September 18th, 2012 at 6:32 am

    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.