Introduction to AJAX

So, you've heard about AJAX, maybe you understand a little about how it works. But what exactly is AJAX? AJAX stands for Asynchronous JavaScript and XML, and refers to the use of JavaScript to access other documents, originally XML documents, in parallel (asynchronously) to other activities. Today, it generally involves the use of various technologies and JavaScript to get data between the server and your web browser without a page reload. All major browsers support AJAX, and it's a great way to add to the power of your website.

Why AJAX?

Generally, we use AJAX because it's the only way to fetch data from the server using JavaScript. Various other methods are available, and were used long before AJAX went mainstream, but most required the use of "hacks" and workarounds, and none were as solid and stable as AJAX. With AJAX, we can reliably fetch data from the server, submit data back to the server and maintain control over everything in between.

AJAX in the wild

AJAX is widely used around the internet; just look at the top 100 websites for some great examples of using AJAX. For example, Yahoo web search displays search term suggestions and topic meta data using AJAX, helping the user find information easier. The major web-based email clients (Gmail, Yahoo, Live Mail) are all powered by AJAX. If you are interacting with a web page, and it is fetching data without reloading the page, chances are you're using AJAX.


When you load a web page, your browser is making an HTTP request to the server. There may be some parameters to that request, either through the query string (variable=value pairs in the URL for GET) or in the body of the request (for POST). When the request completes, your browser takes the downloaded web page and displays it. AJAX, on the other hand, allows you to make HTTP requests and lets you decide what to do with the results. You can make GET and POST requests, and the data returned by the server will be available through standard JavaScript.
It's more likely that you'll use AJAX for discrete requests. You will often fetch each piece of data seperately - such as a list of recent items in one connection, and the data for each in many other connections. Because AJAX is asynchronous, you can have many AJAX requests pending at the same time, and handle each as they complete, instead of waiting for each request to complete before beginning the next.

Handling AJAX on the server

When you make AJAX requests, you are making fairly standard HTTP requests, either GET or POST requests. To serve AJAX requests on the server, you can simply output any standard HTML data.
However, there are other formats you may wish to consider, such as XML, plain text, or even JavaScript Object Notation (JSON). Each of these can be handled natively by JavaScript, and may save some data transfer compared to HTML.
Detecting AJAX requests is also an option. Adding a header to all AJAX requests is common practise; many JavaScript frameworks will add an X-Requested-With: XMLHttpRequest header which can then be detected by the web server and most scripting languages.

Event driven programming

It's also important to understand the concept of event driven programming. Because AJAX isasynchronous, you initiate a request and then continue - you don't wait for it to complete. You set a callback function to be executed when the request completes, and then move on to another task. When the AJAX request completes, the event is fired and your callback function will be executed. For a sample of event driven programming in JavaScript,