Use Dojo and AJAX to Build Client Side Portal

Dojo toolkit working together with AJAX enables us to build a client side portal with little coding. This client side portal utilizes the Javascript engine in browser, asynchronously fetches HTML snippets, then insert them into the right part on the web page.

Portal is web content aggregation framework. It provides an excellent way to structure various applications and contents into a unified web site. Portal framework is usually implemented on server side, on top of high end J2EE application server such as Websphere and WebLogic. Which these portal servers provides lots of advanced features such as personalization, they are expensive and heavy. Small web sites, like those sharing host web sites, don't have their own dedicated application server, so have no chance to enjoy portal server features. However, these web sites also need a flexible way to organize site contents. Dojo toolkit working together with AJAX enables us to build a client side portal with little coding. This client side portal utilizes the Javascript engine in browser, asynchronously fetches HTML snippets, then insert them into the right parts on the web page. So if we need to add some contents later, we only need to store those new contents in HTML snippets and the framework will pick them up.

Let's say our web site has a header and 2 content columns, like this:

The header is static throughout the site, but left and right column show different content on different pages. In normal HTML coding without server side include, we have to duplicate the header on each HTML page, which makes maintenance very difficult. Now let's try to use Dojo and AJAX to simplify HTML coding.
Step 1: import Dojo toolkit into site

You can download open source Dojo toolkit from here. Create a folder called "js" under the web root folder and unzip the downloaded file into this folder.
Step 2: Create a folder called "html" under the web root folder, and put HTML snippets for the header and columns into this folder. header.html

this is header

col1a.html

this is left column on page A

col1b.html

this is left column on page B

col2a.html

this is right column on page A, go to page B

col2b.html

this is right column on page B, go to page A

Step 3: Create an index.html under "html" folder. This file is the main page on this mini site, aggregate those HTML snippets into a complete page.

Step 4: Create a folder called "css", and create file "styles.css" under "css" folder. This file is to organize page layout with css.

#content {
width: 100%;
}
#left {
float: left;
width: 30%;
background-color: #ddd;
}
#right {
float: right;
width: 68%;
background-color: #eee;
}
.clearBoth {
clear: both;
}

Step 5: Create a folder called "js", and create a javascript file called "startup.js" under "js" folder. This file hooks up Dojo, loads corresponding HTML snippets according to query string, and insert HTML contents into right location on page DOM structure.

dojo.addOnLoad(function init() {
var query = location.search ? dojo.queryToObject(location.search.substring(1)) : {};
var page = (query.page) || "a";
getHTML("../html/header.html", "header");
getHTML("../html/col1" + page + ".html", "left");
getHTML("../html/col2" + page + ".html", "right");
});

function getHTML(/*String*/url, /*String*/nodeId) {
var d = dojo.byId(nodeId);
if(d) {
dojo.xhrGet({
url: url,
sync: true,
load: function(resp) {
d.innerHTML = resp;
}
});
}
}

Please note: You need a web server to run this sample; browsing on unzipped files from local file system may not work.