XMLHttpRequest+Example

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  tag of your page. I will not explain the details of the XMLHttpRequestObject. I may do this at a later time. code format="javascript" html " A Run BASIC Ajax example  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); } } "

code

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. code format="javascript" html " An RB Ajax example  The fetched app will appear here. "

code

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.