Introduction to Ajax

Saturday, July 21, 2012

You may heard that Ajax is a tool that can be used to create web applications that look and feel like traditional desktop applications. This is because Ajax enables your web applications to transfer data behind the scenes by communicating with the back-end web server and displaying the results without having to refresh the web page. As more and more web developers integrate Ajax into their web applications, it will become more difficult to distinguish client desktop software from web based applications.

What is Ajax?

Ajax is short for Asynchronous JavaScript and XML. JavaScript is the client side scripting language that just about all browsers support. Web browsers support an XMLHttpRequest object which is used to communicate with the back-end web server without the need for a page refresh. The data that is returned from the web server as either text or XML. Let us take a look at this process in a bit more detail

  1. In your web code, you have a JavaScript function that can fetch data from the server as needed.
  2. As data is needed from the server, the JavaScript code creates a special object called the XMLHttpRequest object to send data to the webserver without page refreshes. JavaScript does not have to wait for that data to return as this communication is asynchronous.
  3. The data that is returned from the web server can be text or XML.
  4. Your JavaScript function then takes that data and displays it somewhere within the browser window.

Browser Requirements

Not all browsers support can support Ajax. However, most browsers used by typical users do support Ajax. Here is the list of major browsers which support Ajax.

  • Mozilla Firefox 1.0+
  • Netscape version 7.1+
  • Apple Safari 1.2+
  • Microsoft Internet Exporer 5+
  • Opera 7.6+

A browser that does not support Ajax simply means that it is unable to create the XMLHttpRequest Object.

Basic Example

The following example demonstrates how to update a div element with data retrieved from a web server using Ajax.

<!DOCTYPE html>
<script type="text/javascript">
    function loadAjax() {
        var xhr = false;
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        else {
            // IE5/IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        if (xhr) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("div1").innerHTML = xhr.responseText;
  "GET", "/demo/ajax_load.txt", true);
    <img id="img1" src="#" onclick="loadAjax()" />
    <div id="div1">Click the icon to load data via Ajax!</div> 

click here
Click the icon to load data via Ajax!

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor The Complete Reference Ajax Bulletproof Ajax