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 Read more…

• Websites for Learning Ajax
• CSS Alternatives to Javascript Examples

If you’ve ever wanted to learn about Ajax, there are many sites out there that’ll help you “grok” Ajax and the various technologies surrounding it. Here are  top-notch websites that cover the subject of Ajax.

1. Ajax resource center (developerWorks)

developerWorks, a resource center for developers and IT professionals by IBM, has a dedicated Ajax resource center that hosts plenty of tutorials on Ajax. developerWorks tutorials are in-depth and lengthy, and you can learn a variety of information and techniques from them such as creating RIA applications with jQuery and Ajax, learning about Ajax security tools, and building an Ajax-based chat system.

2. Mozilla Developer Center (AJAX)

The Mozilla Developer Center has an AJAX section that’s a great starting point for beginning developers or those that need to brush up on Ajax.  The Getting Startedguide on MDN is an excellent starting point to learn about the basic concepts of Ajax. Another MDN guide you might be interested in reading is the entry on XMLHttpRequest, the primary mode of communicating with server-side scripts in typical Ajax approaches. Read more…

• 10 Practical Uses For AJAX
• 100 Best of jQuery Tutorials and Examples