What Is AJAX? How Does It Work?
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
- Using XML again, the script sends the data back to the original client-side page that made the request
Throughout this tutorial, we will discuss how various scripts use this routine to accomplish a wide variety of effects.
1. Login Forms
Example: Digg.com (top of page)
Plugin: jQuery Form Plugin2. Auto-Complete
Example: Google Search
Plugin: jq autocomplete3. 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.
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.
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
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
Example: Google Adsense
9. Lightboxes instead of pop-ups
Example: Logo Sauce
Plugin: Lightbox Plugin
10. Using AJAX With Flash
Plugin: jQuery Flash Plugin
1) How AJAX Works: 10 Practical Uses For AJAX