Where I work we use a CMS (Content Management System) for our external site. We happen to have a very flexible system from a great design and software house in Houston, BrandExtract. This system works well because it uses XML as its base. This allows us to use XSL to create our page templates. This allows us a great deal of flexibility, however even XSL has it's limitations. Embedding Javascript in to your xsl can be a little tricky at best and down right aggravating most of the time.

We have a project to integrate a part of our site with a partner using Web Services. I figured that this would be the perfect time to use AJAX to delivers the content and throw in a couple of bells and whistles that give the application that ""Web 2.0" feel. I wrote the AJAX library we're using for the content delivery and we are using  Scriptaculous to handle the shiny  User Interface Effects.. Now let me stop right here for a minute. I'm using Scriptaculous to handle some of the DHTML effects used to provide the interface effects that people equate "Web 2.0" with.

I also want to clarify something. I believe that "AJAX" and "Web 2.0" are used interchangeably, when they really shouldn't be. One is used in the other, however are not interchangeable. You see "Web 2.0" is a group of features and technologies a site may have including: RSS, tagging, user provided content displayed in a community selected method, AJAX, and DHTML to improve the web interface. If you'd like to read more about Web 2.0, Tim O'Reilly, coined the phrase and has a great article on what he believes the platform of Web 2.0 to be. Several good examples of Web 2.0 applications are flickr and digg.

However AJAX is different, in that it is much more of the data transportation method used to refresh data on the page without having to reload the page in the users browser. AJAX stands for "Asynchronous Javascript and XML". So what AJAX basically does is to use the "XMLHTTPRequest" object in Javascript to retrieve or post data to the server, so that there is still a round trip to the server.

Alright so we have the basics. I use a javascript library, that I wrote that's pretty simple but so far has been able to handle most of the ways I've used AJAX, which is mostly retrieving data from the server from a specific URL with specific parameters. I wrote three functions in Javascript that helps make getting the data and putting it in a "<div>" tag, and I'm done. So let's take a look at the code and go over the functions.

function getXmlData(newUrl, div)
{
xmlHttp= GetXmlHttpObject();
myDiv = div;
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return
}
var url=newUrl;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
    loadDataToDiv(xmlHttp.responseText, myDiv);
    }
}

function loadDataToDiv(text, div)
{
document.getElementById(div).innerHTML = text;
}

function GetXmlHttpObject()
{
var objXMLHttp = null
    if (window.XMLHttpRequest)
    {
    objXMLHttp = new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
return objXMLHttp
}

So the first function we'll go over is the GetXmlHttpObject(), this function returns a XmlHttpRequest object, bascially it just figures out which version of the XmlHTTPRequest object to use depending on your  browser, and returns it for use in other functions. The next function is loadDataToDiv(text, div), this function is actually a method that takes the parameters text, and div, and simply puts what text is passed to it and sticks it in the div that you asked it too. The next Function is stateChange(), which is very XMLHTTPRequest object specific function, which checks the state of the request and if the state is ready (xmlHttp.readyState ==4 || xmlHttp.readyState == "complete") then it calls the loadDataToDiv function and passes the xmlHttp.responseText, and the div you've called.  The final function, which is the one that you actually call in your code is getXMLData(newUrl, div), this is the function the brings it all together, you give it the url of the content you want you AJAX app to display and the div tag id that you want to refresh the content in.

Alright so far, we have the Javascript/AJAX part taken care of, now we need to talk about the XSL part of the equation. We will talk about that in part two.