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
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
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
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
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
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
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
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.
8. External Widgets
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
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
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?
Photo by Desola Lanre-Ologun on Unsplash
Send Comment:
68 Comments:
good article i read more
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.
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
Would like to add more , it is a complete tutorial how using ajax with jquery and php to setup a star rating system.
it is funny and I'll use my time to make sure I know this within 72 hours
he article is great really helpfull. Thumbs up!!!
the article is great really helpfull. Thumbs up!!!
nice one sir .................
I LIKE THESE TYPES OF EXAMPLE.
I WILL BE USING IT.
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!
ajax has added many new features to make a webpage more interactive and cuts the cost of bandwidth requirement.
I would like to use some of this options to improve my visual look , with pics etc.
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
Love Ajax~ very useful for rich web applications.
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.
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.
Comprehensive list of where AJAX will be beneficial, Thanks!
Trance Music is Good Armin van Buuren
Very good list of AJAX functionality. AJAX helps to improve usability, add dynamic nature, thanks for the round up. LT
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!
FYI - This excellent article is stolen and republished all over the place, word-for-word, without your pictures. :(
God bless you :-)
Parse error: "your english sucks"
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.
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.
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.
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!
WOW, you make a great point there Ezrad. Thats right, you really are a douchebag!
Useful Information. Now I know, AJAX can be of great use!
Thank you all for your comments! :) I hope you will continue to find this site as useful as many others have.
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 !!!!
great stuff you have here!! m definetly going to try some of these!! thnx a ton buddy!!
Thanks for the summary
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?
Great article! Thank you.
Nice and useful info!
Nice post, thanks a lot. I think, will started on ajax.
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!
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?
Nice post guys! Ajax is really a huge part of Dynamic Web!
Wow there's so many applications for Ajax, if I can get my head around it, I will be using it.
It is really useful information ... we are grateful for you explanation
Is it me or can no other human being parse that sentence?
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.
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.
It's called criticism. You should benefit from it whether it's constructive or not.
Gotta love how idiots posting vile comments STILL include their full name and URL in their comment.
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.
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.
Such would also require that both servers set themselves up to send/receive such callbacks, but it's been done: see JSONP (
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.
Nice post guys!
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.
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
Very Correct, Jonathan... the author is not completely wrong here.... it can be achieved using server-side technologies (proxy)
Oh, you made me wanna learn AJAX ... :)
I am not an IT expert but I shall consider AJAX.
Thanks, I need to get started on that one. thanks Noupe !
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.
Nice collection. Will try lightboxes for my blog
Gotta love these comments that add NOTHING to an already worthless post.
Thanks for the post. Greate overview of AJAX and it's uses.
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.
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.
Nice post guys! Ajax is really a huge part of Dynamic Web. :)
thanks...really help full article
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.
"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"