Introduction
AJAX (Asynchronous JavaScript and XML) makes web pages feel more dynamic. It exchanges small amounts of data with the web server, so that the entire web page does not have to be reloaded each time the user makes a change. The main workhorse of Ajax is the XML HTTPrequest. It exchanges data asynchronously with the web server.
AJAX Cons for Users
Ajax actions do not register themselves in history, so pushing "Back" button doesn't take you anywhere. Saving to favorites does not always work.
AJAX Cons for Developers
This technology used on a large scale becomes very cumbersome to develop. Problems are difficult to spot and fix. Intervals between user request and server response — need to be considered carefully during Ajax development. Without well formatted feedback to the requester, smart preloading of data, and proper handling of the XMLHttpRequest object, developers might experience a hard time in figuring out all the delays and bugs of the web application.
Service Oriented Web Architecture – SOWA
Starting a new project, we decided to systemize and simplify our development process. Using our experience in building regular AJAX applications, we came up with a new strategy. The easiest way to organize your code is, of course, to make your code object and service oriented. Browser objects we choose for this purpose were: <DIV> and <XML> tags. Each one of these tags possesses attributes we needed for our task. <DIV> can be controlled visually, <XML> has XML source, easily accessible DOM structure and states. The only thing which was left was combining them into one structure and adding Ajax like state mechanism. This structure we called SOWA.
Sample of SOWA object:
<DIV id="d0_div" class="small">
<div id="w0" class="display" name="w0_dis"></div>
<xml name="w0_xml" src="test.xml" onreadystatechange="doIT();"></xml>
<xml name="w0_ssh" src="test.xsl" onreadystatechange="doIT();"></xml>
</DIV>
Notice, how d0_div becomes a wrapper for display div and two XML tags provide XML and XSL source.
Function "doIT" transforms our results into HTML when the page is loaded. At that moment, the state of <xlm> tag changes and this event triggers reload of two <xml> tags.
function doIT(){
var divObj = event.srcElement.parentElement;
var pObj = divObj.childNodes[0];
var xmlSrc = divObj.childNodes[1];
var xslSrc = divObj.childNodes[2];
try{
if((xmlSrc.readyState == 'complete')&&(xslSrc.readyState == 'complete')){
pObj.innerHTML = xmlSrc.XMLDocument.documentElement.transformNode(xslSrc);
}} catch(e){
The only thing which is left to do is to create a totally dynamic and totally simple HTML page, which will look like that:
<html><head><title>Site Statistics</title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="test.js" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body topmargin="0" leftmargin="0">
<DIV id="adbalance" class="small">
<div id="adbalance1" class="display" style="top:5px; left:5px;"></div>
<xml src="test.xml" onreadystatechange="doIT();"></xml>
<xml src=" test.xsl" onreadystatechange="doIT(); "></xml>
</DIV>
<DIV id="stat" class="small">
<div id="stat1" class="display" style="top:28px; left:620px;"></div>
<xml src=" test1.xml " onreadystatechange="doIT();"></xml>
<xml src=" test1.xsl " onreadystatechange="doIT(); "></xml>
</DIV>
</body></html>
Data Posting
The biggest advantage of SOWA lies in the mechanics of how it submits data. Instead of waiting for and analyzing Ajax responses, SOWA object simply posts data using XMLHttpRequest and then reloads itself:
<DIV id="adbalance" class="small">
<div id="adbalance1" class="display" style="top:5px; left:5px;"></div>
<xml src="test.xml" ondatasetcomplete="doITnow();></xml>
<xml src=" test.xsl" ondatasetcomplete="doITnow(); "></xml>
</DIV>
In this example, we use data fields (content fields) attached to data source. Function "doITnow" takes care of the task.
function doITnow(){
var divObj = event.srcElement.parentElement;
var pObj = divObj.childNodes[0];
var xmlSrc = divObj.childNodes[1];
var xslSrc = divObj.childNodes[2];
try{ if (xslSrc.src == ''){ udateDSO(xmlSrc);
} else {
updateDisplay(pObj,xmlSrc,xslSrc);
}
}catch(e){alert(e.message);}
}
function udateDSO(xmlSrc){
try{
var xData = xmlSrc.documentElement.selectSingleNode('update/data/@href').nodeValue;
var xStyle = xmlSrc.documentElement.selectSingleNode('update/style/@href').nodeValue;
xmlSrc.parentElement.childNodes[2].src = xStyle;
xmlSrc.src=xData;
}catch(e){
alert(e.message);
}}
function updateDisplay(display,xmlSrc,xslSrc){
if((xmlSrc.XMLDocument.readyState == 4)&&(xslSrc.XMLDocument.readyState == 4)){
display.innerHTML = xmlSrc.XMLDocument.documentElement.transformNode(xslSrc);
}}
Communication with Other SOWA Objects
Communications between individual SOWA objects are done by changing their state and source. For example, after user submits data located in "<DIV id="adbalance" >", in order to reflect data changes on another div, he reloads source and changes state of div called "stat":
document.all. stat.childNodes[1].xmlSrc.src = "test2.xml";
SOWA div automatically reloads itself.
More complex solutions may involve combination of XML and XSL or just XSL reloading.
This tiny function would take care of any transformation:
function reloadDiv(divID,xmlUrl,xslUrl){
var divObj = document.getElementById(divID);
try{
divObj.childNodes.item(2).src = xslUrl;
divObj.childNodes.item(1).src = xmlUrl;
}catch(e){alert(e.message);}
}
Building a List Out of SOWA Objects
Implementing a list of objects sharing the same visual properties (XSL) and different, but similarly structured XML source.
<div id="list" class="display">
<xml src=""test5.xsl />
<div id="d20_div">
<div id="w20" class="display" style="LEFT :220px;WIDTH :200px;TOP :90px;"></div>
<xml src="" onreadystatechange="doList();"/>
</div>
<div id="d21_div">
<div id="w21" class="display" style="LEFT :220px;WIDTH :100px;TOP :260px;"></div>
<xml src="" onreadystatechange="doList();"/>
</div>
<div id="d22_div">
<div id="w22" class="display" style="LEFT :220px;WIDTH :50px;TOP :390px;"></div>
<xml src="" onreadystatechange="doList();"/>
</div>
</div>
XML source is being loaded by the following function during page load or some other triggering action:
function doList(){
var divObj = event.srcElement.parentElement;
var xslSrc = divObj.parentElement.childNodes[0];
var xmlSrc = divObj.childNodes[1];
var pObj = divObj.childNodes[0];
try{
if((xmlSrc.readyState == 'complete')&&(xslSrc.readyState == 'complete')){
pObj.innerHTML = xmlSrc.XMLDocument.documentElement.transformNode(xslSrc);
}} catch(e){
}}
Conclusion
Sowa allows you to build totally automated web applications with unseen performance and flexibility in a record short period of time. This sample web application - http://losru.com/, is in beta version. You are welcome to give it a try. Front-end development basically becomes an easy task of dropping multiple SOWA on HTML page.
Recommendations
If you decide to use SOWA, you'll have to understand that this code will work only in Internet Explorer 6.0 and higher. However, it should not discourage you. Treat your website as an application online.
Treat Internet Explorer as a very powerful, full featured, thin client platform. Unfortunately other browsers don't provide the level of XML support needed to build SOWA applications.
Latest Developments
I was able to run SOWA on Firefox, by adding onreadystatechange event to the XML tag.
