dominoGuru.com
Your Development & Design Resource
Using AJAX, text/plain Content Type, and external resources to create dynamic in-line content!
01/18/2008 11:26 AM by Chris Toohey
Was chatting today with a good friend and fellow blogger Mike Smesler, when an interesting requirement came up for an application that he was working on: the need to populate a section of the current page with content from another source - and as dynamically as possible.
Now, an old-school solution to this problem would involve using an embedded iframe and walking said iframe to get the content. In the days of AJAX however, that's no longer a necessity! Here's the code that we'll use:
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e)
{
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
xmlhttp = false;
}
}
@end @*/
if
(!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new
XMLHttpRequest();
}
function getcontent_innerHTML(url, targ) {
targ.innerHTML = '<p align=center><img src="ajax-loader.gif"
/></p>';
xmlhttp.open("GET", url);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 &&
xmlhttp.status == 200) {
targ.innerHTML = xmlhttp.responseText;
}
return true;
}
xmlhttp.send(null);
}
Now, for it's usage:
<div id="container"> </div>
<script>
getcontent_innerHTML('some_URL_here', document.getElementById('container'));
</script>
Now, for the Domino-slant on this: you can take a Page or Form (or View, or Agent, etc. etc. etc.) Design Element, set the Content Type to text/plain and generate your markup to be used with this approach. This means that you can run Database queries live and in-line (or -hint hint- use any web technology or client to create a conduit to querying or maintaining Domino applications)!
It's a very simple technique that can help expand the architecture and usage of your applications - even outside of Domino!
One thing that you might want to look at however, the line
targ.innerHTML = '<p align=center><img src="ajax-loader.gif"
/></p>';
is simply put in there to load a "Loading - please
wait" type of icon which will tell your users that something is going
on - especially if the response from the server/resource lags for whatever
reason.
Updated
Thanks for the catch Tim - I'll approve your comment, which will explain this update, when I get back into the office!