The internet browser is today a part of every modern operating system. Whether Internet Explorer, Firefox, Opera, Netscape or Safari - the browser is valued as a versatile display element when surfing the internet.
With AJAX and the W&T Web-IOs the browser can now be used also as a display and control element for dynamic, technical applications.
AJAX stands for Asynchronous JavaScript and XML, whereby the core functionality of AJAX is in being able to continue to communicate with the server after loading a Web site to the browser. Web pages which are constructed in standard HTML can only be refreshed by completely reloading them. AJAX-based JavaScripts on the other hand can exchange or modify individual display elements after the fact.
The AJAX application described in the following is an example of how AJAX and Web-IO work together.
You don’t have a Web-IO yet but would like to try the example out sometime?
No problem: We will be glad to send you the Web-IO Digital 2xInput, 2xOutput at no charge for 30 days. Simply fill out a sample ordering form, and we will ship the Web-IO for testing on an open invoice. If you return the unit within 30 days, we will simply mark the invoice as paid.
1. Combining the various operating elements and display objects on the Web page
When naming the individual objects it is helpful to use logical names.
1. HTML underlying structure of the Web page
Placing the operating and display elements For better structuring the individual elements are placed in tables and the whole is declared as a form. The <user.htm> tag is not part of standard HTMP syntax and is used by the Web-IO for identifying the Web page. The tag is filtered out before uploading to the browser.
General variables and functions Although the Web page is structured for the Web-IO 2xDigital Input, Web-IO 2xDigital Output, the JavaScripts are prepared for Web-IOs with more IOs. This is the purpose of the HexTolnt function, which converts the hexadecimal strings into whole numbers.
The variable SendString is used later for sending data to the Web-IO.
function HexToInt(HexStr)
{ var TempVal;
var HexVal=0;
for( i=0; i<HexStr.length;i++)
{ if (HexStr.charCodeAt(i) > 57)
{ TempVal = HexStr.charCodeAt(i)
- 55;
}
else
{ TempVal = HexStr.charCodeAt(i)
- 48;
}
HexVal=HexVal+TempVal*Math.pow(16,
HexStr.length-i-1);
}
return HexVal;
}
.......
3. Process user operation
The variable SendString is filled with a command which depends on which operating element the user has clicked on or modified.
Setting the outputs The user sets the outputs by using the two check boxes cb_output. When the function is invoked the output no. is passed.
The DataRequest function which is then invoked is used for data exchange with the Web-IO and is will be described later in greater detail.
function setOutput(OutputNr)
{ if (ioform.cb_output[OutputNr].checked==true)
{ SendString='outputaccess'+OutputNr+'?PW='+ioform.ed_password.value+'&State=ON&';
}
else
{ SendString='outputaccess'+OutputNr+'?PW='+ioform.ed_password.value+'&State=OFF&';
}
DataRequest(SendString);
}
Querying output/input status The user can request the status of the outputs and inputs by clicking on the corresponding button.
function getOutputs()
{ DataRequest('output?PW='+ioform.ed_password.value+'&');
}
function getInputs()
{ DataRequest('Input?PW='+ioform.ed_password.value+'&');
}
Read clear counters Also the counter states of the input counters can be read or cleared. The parameter sent is the number of the counter you want to read or clear. If no parameter is sent, the Web-IO reads or clears all counters.
function getCounter(CounterNr)
{ if (CounterNr==undefined)
{ DataRequest('counter?PW='+ioform.ed_password.value+'&');
}
else
{ DataRequest('counter'+CounterNr+'?PW='+ioform.ed_password.value+'&');
}
}
function clearCounter(CounterNr)
{ if (CounterNr==undefined)
{ DataRequest('counterclear?PW='+ioform.ed_password.value+'&');
}
else
{ DataRequest('counterclear'+CounterNr+'?PW='+ioform.ed_password.value+'&');
}
}
4. Communication with the Web-IO
Data exchange with the Web-IO and refreshing of the Web page after it has already been loaded The function shown here contains the essence of AJAX.
The DataRequest function sends to the Web-IO the selected commands which are passed in the SendString in the background, invisible to the user. The integrated function DataReceived accepts the replies from the Web-IO.
The replies from the Web-IO have a specific structure depending on the type.
For the outputs: output;<binary value of the output status in hexadecimal format>
For the inputs: input;<binary value of the input status in hexadecimal format>
For the counters: counterx;<decimal counter state>
or counter;<decimal counter state 0 >; <decimal counter state 0 >;.....if you want to read all counters at the same time.
Depending on the reply received, the receive function branches accordingly and refreshes the display of the objects in the browser window.
function DataRequest(SendString)
{ var xmlHttp;
try
{ // Internet Explorer
if( window.ActiveXObject )
{ xmlHttp = new ActiveXObject(
"Microsoft.XMLHTTP" );
}
// Mozilla, Opera und Safari
else if(window.XMLHttpRequest
)
{ xmlHttp = new XMLHttpRequest();
}
}
// loading of xmlhttp object failed
catch( excNotLoadable )
{ xmlHttp = false;
alert("no knowen browser");
}
if (xmlHttp)
{ xmlHttp.onreadystatechange = DataReceived;
xmlHttp.open("GET",
SendString, true);
xmlHttp.setRequestHeader("Cache-Control",
"no-store, no-cache, must-revalidate");
xmlHttp.setRequestHeader("Expires",
"Sat, 05 Nov 2005 00:00:00 GMT");
xmlHttp.setRequestHeader("Pragma","no-cache");
xmlHttp.send(null);
}
function DataReceived()
{ var HexVal;
var ReceiveStr;
if (xmlHttp.readyState == 4)
{ if (xmlHttp.status
== 200)
{ ReceiveStr
= xmlHttp.responseText;
//Input
handling if
(ReceiveStr.substring(0,5)=='input')
{ HexVal=HexToInt(ReceiveStr.substring(6,10));
for
(i=0;i<MAXIO;i++)
{ if
((HexVal & Math.pow(2,i)) == Math.pow(2,i))
{ ioform.cb_input[i].checked
= true;
}
else
{ ioform.cb_input[i].checked
= false;
}
}
}
//Output
handling
if
(ReceiveStr.substring(0,6)=='output')
{ HexVal=HexToInt(ReceiveStr.substring(7,11));
for
(i=0;i<MAXIO;i++)
{ if
((HexVal & Math.pow(2,i)) == Math.pow(2,i))
{ ioform.cb_output[i].checked
= true;
}
else
{ ioform.cb_output[i].checked
= false;
}
}
}
//Counter
handling
if
(ReceiveStr.substring(0,7)=='counter')
{ var
slength=ReceiveStr.length;
if
(ReceiveStr.substring(7,8)==';')
{ countervalue=ReceiveStr.split(';');
for
(i=0;i<MAXIO;i++)
{
document.getElementById('counter'+i).innerHTML = '<a>'+countervalue[i+1]+'<\/a>';
}
}
else
{ if
(ReceiveStr.substring(9,10)==';')
{ i=(ReceiveStr.substring(7,9));
document.getElementById('counter'+i).innerHTML
= '<a>'+ReceiveStr.substring(10,slength)+'<\/a>';
}
else
{ i=(ReceiveStr.substring(7,8));
document.getElementById('counter'+i).innerHTML
= '<a>'+ReceiveStr.substring(9,slength)+'<\/a>';
}
}
}
}
}
}
}
Although the example shown is tailored to the Web-IO 2x Digital Input, 2x Digital Output, the DataRequest function is also capable of use for Web-IOs having more IOs.
5. Polling
Cyclical polling of particular values In order to enable automatic refreshing of the display, the JavaScript Interval function is used. Depending on the check boxes for output, input and counter polling, the corresponding information is obtained from the Web-IO at a set interval.
var pollingtimer = window.setInterval("Polling()", 500);
function Polling()
{ if (ioform.cb_output_polling.checked==true)
{ DataRequest('output?PW='+ioform.ed_password.value+'&');
}
if (ioform.cb_input_polling.checked==true)
{ DataRequest('input?PW='+ioform.ed_password.value+'&');
}
if (ioform.cb_counter_polling.checked==true)
{ DataRequest('counter?PW='+ioform.ed_password.value+'&');
}
}
The desired interval can be entered in the corresponding text field and is adjusted by clicking on the Set Interval button.
function setPolInterval()
{ var intervaltime=parseInt(ioform.ed_interval.value)
clearInterval(pollingtimer);
pollingtimer = window.setInterval("Polling()",
intervaltime);
}
Loading the Web page into the Web-IO
AJAX-based Web pages only function if the data to be refreshed come from the same server as the Web page. It is not possible to load the Web page from Server A but retrieve the data from Server B.
When programming of the Web page is finished, it must be uploaded to the Web-IO. This is easy to do with just a few mouse clicks from the Web interface of the Web-IO:
The example supports all common functions of the Web-IO, optimized for the Web-IO 2x Digital Input, 2x Digital Output PoE. For the other Web-IO models you may have to make adaptations to the example Web page. Additional program examples for socket programming can be found on the Tool pages for the Web-IO. A detailed description for the socket interface of the Web-IO Digital models can be found in the reference manual.
