How to Develop Web Applications with Ajax: Part 1

In the past, web applications were limited because a web page had to be reloaded (or another page loaded in its place) in order for new data to be obtained. Other methods were available (without loading another page), but the techniques weren’t well supported and had a tendency to be buggy. In recent months, a technique that had not been widely supported in the past has become available to a large number of web surfers, giving developers more freedom to develop cutting-edge web applications. These applications, which asynchronously retrieve XML data via JavaScript, are affectionately known as “Ajax applications” (Asynchronous Javascript and XML applications). In this article, I will explain how to retrieve a remote XML file via Ajax to update a web page, and as this series continues, I will discuss more ways that Ajax technology can be used to take your web applications to the next level.

The first step is to create an XML file with some data. We’ll call this file data.xml. It’s a simple XML file and would most certainly be more complex in a real-world application, but for clarity our examples will be simple and concise.

Now let’s create a simple web page containing some sample data. This is the page that all our JavaScript will be in, and the page that users will visit to see the Ajax script in action. Let’s call this file ajax.html.

Note that we link to the data.xml file for users without JavaScript. For users with JavaScript, the function “ajaxRead” is called, the link is hidden, and the link does not redirect to the data.xml file. The function “ajaxRead” isn’t defined yet, so if you test the example code above, you’ll get a JavaScript error. Let’s go ahead and define that function (and another) so you can see how Ajax works. The following SCRIPT goes in your HEAD tags:

<script type=”text/javascript”><!–
function ajaxRead(file){
  var xmlObj = null;
  if(window.XMLHttpRequest){
      xmlObj = new XMLHttpRequest();
  } else if(window.ActiveXObject){
      xmlObj = new ActiveXObject(“Microsoft.XMLHTTP”);
  } else {
      return;
  }
  xmlObj.onreadystatechange = function(){
    if(xmlObj.readyState == 4){
       updateObj(‘xmlObj’, xmlObj.responseXML.getElementsByTagName(‘data’)[0].firstChild.data);
     }
    }
    xmlObj.open (‘GET’, file, true);
    xmlObj.send (”);
  }
  function updateObj(obj, data){
   document.getElementById(obj).firstChild.data = data;
  }
  //–></script>

That’s quite a bit, so let’s take this one piece at a time. The first function is “ajaxRead” – what we call from our “View XML data” link on the web page. In the function, we define an “xmlObj” variable – this will be the middleman between the client (user viewing the web page) and the server (the web site itself). We define this object in an if/else chunk:

if(window.XMLHttpRequest){
   xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
   xmlObj = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
   return;
}

This is just a test for the availability of different objects – some browsers implement the XMLHttpRequest object differently, so when we define “xmlObj” as our XMLHttpRequest object, we have to define it depending on what browser implementation is available. If no XMLHttpRequest object is available, we end the function with a “return” statement to avoid errors. Most of the time, this check will return an XMLHttpRequest object – this particular code should work in almost every browser out there, with the exception of some older browsers (it works in IE 5.01, but will cease to function in Netscape 4).

Next is this block:

xmlObj.onreadystatechange = function(){
  if(xmlObj.readyState == 4){
      updateObj(‘xmlObj’, xmlObj.responseXML.getElementsByTagName(‘data’)[0].firstChild.data);
  }
}