XMLHttpRequest RB Example - By Ben Jimenez

Note: The HttpRequestObject does not seem to work
in Chrome or Safari

I discovered the power of the XMLHttpRequest and now I'd like to pass it on.
This is a very basic example of how to use it. I have not tried it with the Run
BASIC DIV feature. I've just used the DIV tag via the HTML command.
The XMLHttpRequest is a very powerfull feature of Javascript that allows you
to update information in your web program with out refreshing the whole page.
You can simply refresh a DIV, TABLE or TABLE ROW by referencing it by it's ID.
To setup your web page to be able to use the XMLHttpRequest you must add this
code between the <HEAD> tag of your page. I will not explain the details of the
XMLHttpRequestObject. I may do this at a later time.
html "<html>
<head>
<title>A Run BASIC Ajax example</title>
<script language = ""javascript"">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject(""Microsoft.XMLHTTP"");
}
 
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open(""GET"", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
 
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>"
 


Now we must setup the web page and the DIV object we want to receive the
XMLHttpRequest. For this example make sure you have set the firstTable
Run BASIC project to Published. We are going to add a button via HTML
code and also a DIV with the id of 'targetDiv'. The 'targetDiv' will receive the
program firstTable when we click the button.

Note: You can also access a file from your Run BASIC public folder via an HTTP link.
html "<body>
<H1>An RB Ajax example</H1>
<form>
<input type = ""button"" value = ""Show Me The Table""
onclick = ""getData('http://localhost:8008/seaside/go/runbasicpersonal?app=firstTable', 'targetDiv')"">
</form>
<div id=""targetDiv"">
<p>The fetched app will appear here.</p>
</div>
</body>
</html>"
 
 
 


When you run the code you will see the button that says 'Show Me The Table'. Click the
button and watch the DIV tag's current text be replaced with the firstTable application.

Break down--

When you click the button the getData() function is called. The URL to the app and the DIV
tag are passed to the function. The function then uses the XMLHttpRequest to call the app
and serve it up between the DIV tag 'targetDiv' . It's very simple and can be done with any
application that you create in Run BASIC.

Note: It is recommended to use the XMLHttpRequestObject to display informaton in
a more application type style.Keep in mind that any Run BASIC program will take
over the screen if it is refreshed for any reason with out using the XMLHttpRequestObject.
There are more advanced examples on the Internet but this is a basic example of how to
implement some AJAX in your Run BASIC applications.