TDIing out loud, ok SDIing as well

Ramblings on the paradigm-shift that is TDI.

Friday, July 10, 2009

AJAX made easy and interactive

Stolen from Jon Elwoods internal IBM blog:
---------------------------------------------------------

I was writing some simple AJAX functions for a web page for the migration project. They are generic enough to be used anywhere...

I created an assembly line that iterates on an HTTPServer FC. I found it hard to code all my client-side JavaScript functions directly into TDI (caused problems in expression attribute mapping) so I included them all in a funcs.js. This was included at in the header of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="dashboard.css"/>
<script src="funcs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>title</title>
</head>

Contents of funcs.js:

var component

function request(attribute, value, comp) {
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
document.getElementById("main").innerHTML = "BROWSER DOES NOT SUPPORT AJAX";
}
component = comp;
xmlhttp.onreadystatechange = loadResult;
url=attribute + "=" + value;
url=url+"&sid="+Math.random();
xmlhttp.open("GET", url);
xmlhttp.send(null);
}

function loadResult() {
// if the readyState = 4 = Completed
// & http status is 200, get responseText
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
document.getElementById(component).innerHTML = xmlhttp.responseText;
}

else {
document.getElementById(component).innerHTML = "Loading...";
}
}

request() takes three parameters. Attribute and value will be used as part of the GET url. e.g. myurl.com?attribute=value. The third parameter is the component where the response xml/xhtml from TDI will be inserted.

The callBack function loadResult() will display a "Loading" message in the choosen element ID until the response is returned from TDI. I used simple <span> tags as place holders to insert my httpResponse text. e.g.:

<span id="result"> response goes here! </span>

So I would call the function:

request("myAtt","myvalue","result");

TDI simply looks at http.base for the attribute and value and returns an http.body according to my specifications. This is a very simple over view of the code. (There may be bugs and other nasties in the code so if your project comes tumbling to the ground....you have been warned!!) I will hopefully be posting a detailed tutorial on TDI and AJAX some time in the future.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)