Writing an Ajax-based web application is far from new, and neither is the conundrum of choosing a single-page interface (SPI) or multi-page interface (MPI) and which patterns to implement. But these decisions are made much simpler if you’re developing a web version of some traditional local application. For instance the issues of browsing history and bookmarking for which SPI applications would require additional code to implement are not needed. We don’t expect this functionality from traditional local applications other than the menus and controls that would be implemented in an Ajax web-based version of the application.
This is why I chose to implement the SPI model for my browser-based application framework, primarily intended for strategy/RPG gaming. Since users will need to be authenticated by the application before they can use it, and once logged in they are presented with navigational controls via menus and other web controls, I see no real requirement for them to bookmark anything other than the main application page. Which they are free to do. Admittedly, particularly in the case of online gaming, there would generally be some content intended for non-members, introduction to the application and enticing screenshots etc, which they may feel the need to bookmark. But if a sufficiently intuitive public menu is on offer then bookmarking and browsing history is still not really necessary.
Anyway, enough of justifying my apparent laziness ;P Time for some code…
I devised an XMLHttpRequest model which uses a single Ajax callback function that receives XML containing individual page updates. For example I have started with a two part interface made up of a menu and main content area. When the user clicks on a menu option an XMLHttpRequest is sent to a specific server-side script for that menu option which will compile an XML update document and pass it back. This will then be picked up from my one, generic callback function. This will then extract each xml page update and perform each update on the page. These updates will specify an ID, which relates to an element on the page.
For example, consider a very simplified situation below, with 2 menu items for introduction and about us sections, a header section that just informs the user where they are in the application and a main content section initially displaying the introduction:
<html>
<body>
<div id="header">Introduction</div>
<div id="menu">
<div onclick="AjaxReq('intro');">Introduction</div>
<div onclick="AjaxReq('about');">About Us</div.
</div>
<div id="main">
This is the introduction page.
</div>
</body>
</html>
The AjaxReq function will then look at it’s one parameter and call the appropriate server-side script, in this case maybe either intro{.php,.asp,.aspx,etc.} or aboutus for example. The aboutus script might then return the following XML:
<?xml version="1.0" encoding="iso-8859-1"?>
<updates>
<update target="header">
<![CDATA[
About Us
]]>
</update>
<update target="main">
<![CDATA[
This is the about us page.
]]>
</update>
</updates>
The generic callack function that receives this can then simply replace the contents of each of the html elements specified by the target attributes, with the contents of the CDATA sections. This will give a page that looks like:
<html>
<body>
<div id="header">About Us</div>
<div id="menu">
<div onclick="AjaxReq('intro');">Introduction</div>
<div onclick="AjaxReq('about');">About Us</div.
</div>
<div id="main">
This is the about us page.
</div>
</body>
</html>
So a single Ajax request-response can make several updates to the page. So we could expand this to also update the menu if we wanted to include sub-menus.
Also, a single section might have a specific layout and controls within the “main” element, whose controls make Ajax requests that return updates for elements specific to that “main” section. This is made easier by the addition of passing parameters in the request. So not only can you start with a simple menu-content layout, but each of those sections could load sub-sections whose content can be updated directly.
Time for an example of the Javascript Ajax request and callback functions that could be used in an application implementing this method. These also rely on the use of the prototype library. Here’s the Ajax request function:
function AjaxRequest(url, params, callBack) {
new Ajax.Request(url, {
parameters: params,
onSuccess: callBack,
onFailure: AjaxRequestError
});
}Here’s the generic callback function:
function AjaxResponse(req) {
var xmlDoc = req.responseXML;
var xhtmlUpdate = xmlDoc.getElementsByTagName("xhtmlupdate");
var i,target;
for(i=0; i<xhtmlUpdate.length; i++) {
target = xhtmlUpdate[i].getAttribute("target");
xhtml = GetNodeXML(xhtmlUpdate[i]);
// Clear previous data.
while($(target).hasChildNodes()) {
$(target).removeChild($(target).lastChild);
}
// Add new data if there is any.
if (xhtml != "") {
var tmpDiv = document.createElement("div");
tmpDiv.innerHTML = xhtml;
$(target).appendChild(tmpDiv);
}
}
}I’ve included a login section in my application framework, with the ability for a user to register an account and retrieve forgotten login details. I have also provided a public and private application menu depending on whether the user is currently logged in or not. I’m hoping to apply it to some game rules soon for a small SPI Ajax space colonisation strategy game. But I’m also thinking of moving from Prototype to JQuery.