Click here to Skip to main content
Click here to Skip to main content

SOWA - Building service oriented websites without direct use of AJAX.

, 13 Mar 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Service oriented web architecture – SOWA

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){ //alert(e.message); }} 

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){ //alert(e.message);
}} 

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alex.Bykovsky
Web Developer webUtilis.net
United States United States
Windows based Programmer.

Comments and Discussions

 
GeneralOther browser support PinmemberAlex.Bykovsky19-Mar-07 6:30 
GeneralOnly IE Pinmemberabakar19-Mar-07 0:24 
GeneralI like it. Pinmemberrmikaelian18-Dec-06 9:20 
GeneralRe: I like it. PinmemberAlex.Bykovsky18-Dec-06 15:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 13 Mar 2007
Article Copyright 2006 by Alex.Bykovsky
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid