Jun 14 2009

How AJAX Works: 10 Practical Uses For AJAX

Advertisement

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.

About the Author

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.

Homepage

Comments and Discussions
  • Jonathan, 14 June 2009

    “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, 14 June 2009

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

    • Matchu, 15 June 2009

      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.

    • Phoenix2life, 18 June 2009

      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, 15 July 2009

      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, 14 June 2009

    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, 22 June 2009

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

  • PelFusion, 14 June 2009

    thanks…really help full article

  • Juarez P. A. Filho, 14 June 2009

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

    • Patrick Sweeney, 14 June 2009

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

      • Ashley, 15 June 2009

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

      • Ezrad Lionel, 15 June 2009

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

      • Patrick Sweeney, 15 June 2009

        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, 14 June 2009

    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, 14 June 2009

    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, 14 June 2009

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

  • Rahul Jadhav, 14 June 2009

    Nice collection. Will try lightboxes for my blog

  • Jasper, 14 June 2009

    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, 14 June 2009

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

  • Charmaine, 14 June 2009

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

  • Mike, 14 June 2009

    Oh, you made me wanna learn AJAX … :)

  • Rees, 14 June 2009

    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, 14 June 2009

    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, 15 June 2009

      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.

  • Martin Gonzalez, 14 June 2009

    Nice post guys!

  • J Heidbreder, 15 June 2009

    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, 15 June 2009

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

      • ed, 01 December 2009

        Parse error: “your english sucks”

  • Ezrad Lionel, 15 June 2009

    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, 15 June 2009

      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, 15 June 2009

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

  • Mike B, 15 June 2009

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

  • donald, 15 June 2009

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

  • KS, 16 June 2009

    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, 16 June 2009

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

  • Premium Theme Info, 16 June 2009

    Nice and useful info!

  • Shawn Hooghkirk, 16 June 2009

    Great article! Thank you.

  • ncj, 16 June 2009

    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, 17 June 2009

    Thanks for the summary

  • kittu, 17 June 2009

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

  • Joel Reyes, 18 June 2009

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

  • Rohit, 20 June 2009

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

  • tulch, 02 July 2009

    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, 10 July 2009

    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, 06 August 2009

    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, 03 January 2010

    God bless you :-)

  • Will Strohl, 20 March 2010

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

  • kingkabuz, 21 August 2010

    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, 31 August 2010

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

  • Trance, 05 September 2010

    Trance Music is Good Armin van Buuren

  • Craig, 08 September 2010

    Comprehensive list of where AJAX will be beneficial, Thanks!

  • Yuonne Vandyne, 06 October 2010

    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, 05 November 2010

    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, 04 February 2011

    Love Ajax~ very useful for rich web applications.

  • Tyrone, 25 March 2011

    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, 03 April 2011

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

  • Manish Rai, 15 September 2011

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

  • Psihologie, 27 September 2011

    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, 19 October 2011

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

  • Debasish Mishra, 19 October 2011

    nice one sir ……………..

  • emily nyondo, 20 October 2011

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

  • sahil khan, 10 February 2012

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

  • Ezekiel Nyamle, 09 May 2012

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

  • Uko, 13 July 2012

    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, 01 September 2012

    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, 18 September 2012

    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.

search form
 
image description image description