Intro

AJAX stands for Asynchronous Javascript And XML. AJAX is a primarily web development technique of using the XMLHttpRequest object to asynchronously get data to and from the server for portions of a page, thus avoiding having to reload the entire page. The asynchronous data transfer is frequently combined with DHTML: Using client-side code (usually Javascript) to access the DOM plus CSS in order to modify the display of the page. The data may or may not be XML, but hey, it makes for a cooler acronym than ADHTML (Asynchronous DHTML).

Historically, the concept for XMLHttpRequest was created by Microsoft for Outlook Web Access 2000. They first made it available in IE 5. In 2002 Mozilla made XMLHttpRequest available in Mozilla 1.0 and Netscape 7.0. Apple made XMLHttpRequest available in Safari 1.2. In 2005-02-18 Jesse James Garrett was the first to apply the word "AJAX" to the concept in his article called "Ajax: A New Approach to Web Applications". The W3C did their first write up for XMLHttpRequest in 2006-04-05. AJAX is so popular now that the W3C standards for DOM Level 3 Load and Save, which has similar functionality, may never gain a foothold.

There are several major steps in the basic flow of AJAX requests:

  1. XHTML to initiate an AJAX request
  2. Client-side code to create an AJAX request.
  3. Server-side code to receive and respond to the AJAX request.
  4. Client-side code to process the response of the AJAX request.
  5. XHTML to receive the processed response of an AJAX request.

Of course there may be all sorts of DHTML, DOM, and CSS goodness thrown in.

EG: AJAX GET

Click on the button below and it will GET something from the server without having to refresh the page. You could achieve a similar affect with just DHTML if you sent all the data to the client on the first load, but with AJAX you pull data from the server.


You can view the actual client code by viewing the source code on this page, or see the following shortened version of it.

<!-- XHTML client-side code in the XHTML body -->
<form method="post" name="frmAJAX" action="">
    <!-- Step: Clicking on this button initiates an AJAX request -->
    <input type="button" value="Submit" onclick="SimpleAJAXExample()" /><br />
    <!-- Step: This text box receives the processed response from an AJAX request -->
    <input type="text" name="txtAJAX" id="txtAJAX" value="" />
</form>
<!-- Javascript client-side code in the XHTML head -->
<script type="text/javascript"><!-- 
    function SimpleAJAXExample(){
        //Step: Create XMLHttpRequest object
        if(window.XMLHttpRequest){
            var xhr1=new XMLHttpRequest();
            if(xhr1.overrideMimeType){
                xhr1.overrideMimeType("text/xml");
                alert("browser with overrideMimeType");
            }else {
                alert("browser without overrideMimeType");
            }
        }else if(window.ActiveXObject){
            var xhr1=new ActiveXObject("Microsoft.XMLHTTP");
            alert("IE 6");
        }
    
        //Step: Process the response to the AJAX request.
        //Note that the code processing the response comes BEFORE the code creating the request
        xhr1.onreadystatechange=function(){
            //Have the page display something while waiting.
            document.getElementById("txtAJAX").setAttribute("value","Waiting..");
            //See if request ready
            try{
                if(xhr1.readyState==4){
                    if(xhr1.status==200){
                        document.getElementById("txtAJAX").setAttribute("value","Server says: "+xhr1.responseText);
                        //alert("success");
                    }else{
                        document.getElementById("txtAJAX").setAttribute("value","Error: "+xhr1.status+". "+xhr1.statusText);
                        //alert("failure");
                    }
                }
            }catch(e){
                alert("Exception: "+e.description);
            }
        }
        
        //Step: Create the AJAX request
        xhr1.open("GET", "AJAX.txt",true);
        //1st parameter: Usually GET (in caps) if request retrieves data.
        //2nd parameter: URL of server-side code to receive the AJAX request. In this EG just a static file.
        //3rd parameter: true for asynchronous (most often). false for synchronous.
        xhr1.send(null);
        //No parameters sent in this EG.
    }
// --></script>

Common Variations

The EG: AJAX GET had an AJAX request response as plain text: xhr1.responseText. The other common AJAX request response is as an XMLDocument object: xhr1.responseXML. The code processing the response from the AJAX request will have to parse the XML document. EG:

var xmldoc = xhr1.responseXML;
var rootNode = xmldoc.getElementsByTagName("root").item(0);
alert(rootNode.firstChild.data);

The EG: AJAX GET had an AJAX request that pulled data from the server. The other common AJAX request is to POST or send data to the server. Sometimes, you may not even care about a response to the AJAX request. EG:

function LogAtServer(SomeQueryString) {
    var xhr1 = new XMLHttpRequest();
    xhr1.open("POST","/ServerSaver");
    xhr1.setRequestHeader("Content-Type","text/plain;charset=UTF-8");
    xhr1.send(SomeQueryString);
}

Here is a common short version of creating an XMLHttpRequest object:

var xhr1=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

Links

Links that lead to off-site pages about AJAX or XMLHttpRequest.

Page Modified: (Hand noted: ) (Auto noted: )