Basics of AJAX (Asynchronous JavaScript and XML)

AJAX is acronym of Asynchronous JavaScript and XML. AJAX is not programming language, but a new way to use existing standards.

AJAX is way of exchanging data with a server, updating a part of web page without reloading the whole page.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

How does it works?

Ajax uses a programming model with display and events. These events are user actions, they call functions associated to elements of the web page.
Interactivity is achieved with forms and buttons. DOM allows to link elements of the page with actions and also to extract data from XML files provided by the server.
To get data on the server, XMLHttpRequest provides two methods:
- open: create a connection.
- send: send a request to the server.
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
- responseXml for an XML file or
- responseText for a plain text.

Take note that a new XMLHttpRequest object has to be created for each new file to load.

We have to wait for the data to be available to process it, and in this purpose, the state of availability of data is given by the readyState attribute of XMLHttpRequest.

States of readyState follow (only the last one is really useful):

0: not initialized.
1: connection established.
2: request received.
3: answer in process.
4: finished.

Ajax and DHTML

Dynamic HTML has same purpose and is a set of standards:
- HTML,
- CSS,
- JavaScript.
DHTML allows to change the display of the page from user commands or from text typed by the user.
Ajax allows also to send requests asynchronously and load data from the server. It is DHTML plus the XHR object.

The XMLHttpRequest object

Allows to interact with the servers, thanks to its methods and attributes.

Attributes:
readyState the code successively changes value from 0 to 4 that means for “ready”. status 200 is OK
404 if the page is not found.
responseText holds loaded data as a string of characters.
responseXml holds an XML loaded file, DOM’s method allows to extract data. onreadystatechange property that takes a function as value that is invoked when the readystatechange event is dispatched.

Methods:
open(mode, url, boolean)    mode: type of request, GET or POST
url: the location of the file, with a path.
boolean: true (asynchronous) / false (synchronous).
optionally, a login and a password may be added to arguments.
send(“string”)                     null for a GET command.

Building a request, step by step

First step: create an instance

This is just a classical instance of class, but two options must be tried, for browser compatibility.

if (window.XMLHttpRequest){     // Object of the current windows
    xhr = new XMLHttpRequest();     // Firefox, Safari, ...
}else if (window.ActiveXObject){   // ActiveX version
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  // Internet Explorer 
}

Or exceptions may be used instead:

try {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");    // Trying Internet Explorer
}catch(e){    // Failed 
  xhr = new XMLHttpRequest();    // Other browsers.
}

Second step: wait for the response

The response and further processing are included in a function and the return of the function will be assigned to the onreadystatechange attribute of the object previously created.

xhr.onreadystatechange = function() { // instructions to process the response };

if (xhr.readyState == 4){
 // Received, OK
}else{
  // Wait...
}

Third step: make the request itself

Two methods of XMLHttpRequest are used:
- open: command GET or POST, URL of the document, true for asynchronous.
- send: with POST only, the data to send to the server.

The request below read a document on the server.

xhr.open('GET', 'http://www.xul.fr/somefile.xml', true);
xhr.send(null);

Example:

<html>
<head>
<script type="text/javascript">
function submitForm(){
    var xhr;
    try {
            xhr = new ActiveXObject('Msxml2.XMLHTTP');
    }catch (e){
        try {
             xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }catch (e2){
          try {
             xhr = new XMLHttpRequest();
          }catch (e3) {
             xhr = false;
          }
        }
    }
    xhr.onreadystatechange  = function(){
         if(xhr.readyState  == 4){
              if(xhr.status  == 200)
                  document.ajax.dyn="Received:"  + xhr.responseText;
              else
                 document.ajax.dyn="Error code " + xhr.status;
         }
    };
   xhr.open(GET, "data.txt",  true);
   xhr.send(null);
}
</script>
</head>
<body>
    <form method="POST" name="ajax" action="">
         <input type="button" value="Submit"  onclick="submitForm()">
         <input type="text" name="dyn"  value="">
    </FORM>
 </body>
 </html>

Comments on the code:

new ActiveXObject(Microsoft.XMLHTTP)
This constructor is for Internet Explorer.

new XMLHttpRequest()
This constructor is for any other browser including Firefox.

http.onreadystatechange
An anonymous function is assigned to the event indicator.

http.readyState == 4
The 4 state means for the response is ready and sent by the server.

http.status == 200
This status means ok, otherwise some error code is returned, 404 for example.

http.open( “POST”, “data.xml”, true);
POST or GET
URL of the script to execute.
true for asynchronous (false for synchronous).

http.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
This is for POST only.

http.send(document.getElementById(“TYPEDTEXT”).value);
Send data to the server. Data comes from the “TYPEDTEXT” variable filled throught the form by the user.

Get from XML

To get data from an XML file, we have just to replace this line:

document.ajax.dyn="Received:" + xhr.responseText;

by this code:

var doc = xhr.responseXML;   // Assign the XML file to a var
var element = doc.getElementsByTagName('root').item(0);   // Read the first element
document.ajax.dyn.value= element.firstChild.data;    // Assign the content to the form

Write to body

The code below replaces the textfield form object and the second part replaces the assignment into the JavaScript function.

<div id="zone">
     ... some text to replace ...
 </div>

document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;

Post a text

The call to the “open” method changes, the argument is POST, the url is the name of a file or script that receives the data sent, and that must process it. And the “send” method has now a value as argument that is a string of parameters.

xhr.open("POST", "ajax-post-text.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);

The parameter of the send method is in the format of the HTML POST method. When several values are sent, they are separated by the ampersand symbol:

var data = "file=" + url + "&content=" + content;

The “file” parameter is the name of a file created to store the content. The filename must be checked by the server to prevent any other file to be modified.