Simple Ajax app (update html page, no refreshing/no flicker)
Posted: Fri Feb 13, 2009 1:59 pm
Hey all, I just wrote this real simple application as a demo for you all. This was designed to run on any of our network enabled modules.
Credit to Todd Gentille at Syncor Systems for the original idea and base. You can find his original example at http://www.netburner.com/support/techni ... ments.html.
This application is simply a webpage that counts up the Ticks that the netburner module has been running. It displays the ticks on the webpage counting up without having to refresh the webpage. This is accomplished by using Ajax in Javascript to query another webpage that calls a NetBurner HTML function to get the Ticks from the board. This other webpage is queried every 5 millisecs. To the code:
main.cpp - Nothing special here, only the web function call:
ticks.html - just calls the getHTMLTicks function. This page is what javascript is refreshing and getting results to inject
index.html - nearly all the code is running here:
This is telling Javascript to run the function processPage every 20 ms
Function processPage has 2 purposes. First is to run a function in both non-ie and ie browsers. IE side seems to be buggy. Second function is to send an HTML get request for the ticks.html file. After the get request is sent, the function getTicks is called
getTicks waits for the HTML get request from the processPage function to come back. If the request is successful, it injects the results into the TICK span in the main html code
This creates the webpage and adds a TICK span. The injected results will go into the span section.
Thats it. You can easily modify this source to add seamless updates to your own webpages running off the NetBurner board. Full example is attached to this message
Note: This application does not appear to run correctly in IE8. I have not tested other IE versions. If anyone knows why, id be happy to hear it. To me, it appears IE is caching my function page.
Credit to Todd Gentille at Syncor Systems for the original idea and base. You can find his original example at http://www.netburner.com/support/techni ... ments.html.
This application is simply a webpage that counts up the Ticks that the netburner module has been running. It displays the ticks on the webpage counting up without having to refresh the webpage. This is accomplished by using Ajax in Javascript to query another webpage that calls a NetBurner HTML function to get the Ticks from the board. This other webpage is queried every 5 millisecs. To the code:
main.cpp - Nothing special here, only the web function call:
Code: Select all
void getHTMLTicks(int sock, PCSTR url) {
char tick[40];
siprintf(tick, "%d", TimeTick);
writestring(sock, tick);
}Code: Select all
<!--FUNCTIONCALL getHTMLTicks -->Code: Select all
window.onload=function(){
setInterval("processPage()", 20)
}Code: Select all
function processPage() {
url = 'ticks.html';
// Most browser support
if (window.XMLHttpRequest) req = new XMLHttpRequest();
// IE5, IE6 support
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
if (req != null) {
req.onreadystatechange = getTicks;
req.open("GET", url, true);
req.send(null);
}
else {
alert("Browser not supported");
}
}Code: Select all
function getTicks() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("TICK").innerHTML = req.responseText;
}
}
}Code: Select all
<HTML>
<BODY>
The NetBurner has been up for <span id="TICK"></span> ticks.
</BODY>
</HTML>Thats it. You can easily modify this source to add seamless updates to your own webpages running off the NetBurner board. Full example is attached to this message
Note: This application does not appear to run correctly in IE8. I have not tested other IE versions. If anyone knows why, id be happy to hear it. To me, it appears IE is caching my function page.
. Fixing it:
