Der Internet Browser ist heute Bestandteil
aller modernen Betriebssysteme. Egal ob Internet Explorer, Firefox, Opera,
Netscape oder Safari - beim Surfen im Internet wird der Browser als vielseitiges
Anzeigeinstrument geschätzt.
Mit AJAX und den
W&T Web-IOs kann der Browser nun auch als Anzeige- und Steuerelement
für dynamische, technische Anwendungen benuzt werden.
AJAX steht für Asynchronus JavaScript
and XML, wobei die Kernfunktionalität von AJAX darin besteht, auch
nach Laden einer Webseite in den Browser weiter mit dem Server zu kommunizieren.
Webseiten, die in Standard HTML aufgebaut werden, können zur Aktualisierung
nur komplett neu geladen werden. AJAX-basierende JavaScripte hingegen
können einzelne Anzeigeelemente nachträglich austauschen oder
verändern.
Die im Folgenden beschriebene AJAX-Anwendung zeigt beispielhaft das Zusammenspiel
von AJAX und Web-IO.
Sie haben noch kein Web-IO und möchten das vorgestellte Beispiel
einfach mal ausprobieren?
Kein Problem: Wir stellen Ihnen das Web-IO Digital 2xInput, 2xOutput
gerne kostenlos für 30 Tage zu Verfügung. Einfach Musterbestellung
ausfüllen, wir liefern das Web-IO zum Test auf offene Rechnung.
Wenn Sie das Gerät innerhalb von 30 Tagen zurück schicken,
schreiben wir die Rechnung komplett gut.
1. Zusammenstellen der verschiedenen Bedienelemente und Anzeigeobjekteauf
der Webseite
Bei der Benennung der einzelnen Objekte bzw. der aufzurufenden Funktionen
ist es hilfreich, sinngebende Namen zu verwenden.
1. HTML-Grundaufbau der Webseite
Platzieren der Bedien- und Anzeigeelemente
Zur besseren Strukturierung werden die einzelnen Elemente in Tabellen
untergebracht und das Ganze als Formular deklariert. Das <user.htm>
Tag gehört nicht zur Standard HTML Syntax und dient dem Web-IO
zur Identifikation der Webseite. Das Tag wird vor dem Hochladen in den
Browser ausgefiltert.
Allgemeine Variablen und Funktionen
Obwohl die Webseite für das Web-IO 2xDigital Input, 2xDigital Output
aufgebaut ist, sind die JavaScripte für Web-IOs mit mehr IOs vorbereitet.
Deshalb auch die Funktion HexToInt, die hexadezimale Strings in Ganzzahlen
wandelt.
Die Variable SendString wird später für den Datenversand an
das Web-IO genutzt.
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. Bedienung durch den Anwender verarbeiten
In Abhängigkeit davon, welches Bedienelement der Webseite der
Anwender angeklickt oder verändert hat, wird die Variable SendString
mit dem entsprechenden Kommando gefüllt.
Setzen der Outputs
Das Setzen der Outputs wird dem Anwender über zwei Checkboxen
cb_output ermöglicht. Bei Aufruf der Funktion wird die Nr. des
Outputs übergeben.
Die Funktion DataRequest, die abschließend aufgerufen wird,dient
dem Datenaustausch mit dem Web-IO und ist im weiteren Verlauf noch
näher beschrieben.
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);
}
Output/Input-Statusabfragen
Den Status der Outputs und Inputs kann der Anwender durch Anklicken
des zugehörigen Buttons anfordern.
function getOutputs()
{ DataRequest('output?PW='+ioform.ed_password.value+'&');
}
function getInputs()
{ DataRequest('Input?PW='+ioform.ed_password.value+'&');
}
Counter abfragen löschen
Auch die Zählerstände der Input-Counter lassen sich abfragen
bzw. löschen. Als Parameter wird die Nr. des Counters übergeben,
der gelesen bzw. gelöscht werden soll. Wenn kein Parameter übergeben
wird, liest bzw. löscht das Web-IO alle Counter.
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. Kommnunikation mit dem Web-IO
Datenaustausch mit dem Web-IO und Aktualisierung der Webseite nachdem
diese bereits geladen wurde
Die hier vorgestellte Funktion beinhaltet das, was AJAX ausmacht.
Die Funktion DataRequest sendet im Hintergrund, für den Anwender
unsichtbar, die ausgewählten und in SendString übergebenen
Kommandos an das Web-IO. Die integrierte Funktion DataReceived nimmt
die Antworten des Web-IO entgegen.
Die Antworten des Web-IO haben je nach Type einen spezifischen Aufbau.
Für die Outputs: output;<Binärwert des Outputstatus im
hexadezimalen Format>
Für die Inputs: input;<Binärwert des Outputstatus im hexadezimalen
Format>
Für die Counter: counterx;<dezimaler Zählerstand>
oder counter;<dezimaler Zählerstand 0 >; <dezimaler Zählerstand
0 >; ...... wenn alle Counter auf einmal gelesen werden sollen.
Je nach empfangener Antwort verzweigt die Empfangsfunktion in den entsprechenden
Teil und aktualisiert die Anzeige der Objekte im Browserfenster.
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>';
}
}
}
}
}
}
}
Auch wenn das gezeigte Beispiel für das Web-IO 2x
Digital Input, 2x Digital Output zugeschnitten ist, ist die Funktion
DataRequest auch für Web-IO mit mehr IOs vorbereitet.
5. Polling
Zyklisches Abfragen bestimmter Werte
Um auch eine vollautomatische Aktualisierung der Anzeige zu ermöglichen,
wird die JavaScript Interval Funktion benutzt. In Abhängigkeit
der Checkboxen für Output-, Input- und Counter-Polling werden die
entsprechenden Information im eingestellten Intervall vom Web-IO abgerufen.
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+'&');
}
}
Das gewünschte Intervall kann in das entsprechende
Textfeld eingegeben werden und wird durch Anklicken des Set Interval
Button angepasst.
function setPolInterval()
{ var intervaltime=parseInt(ioform.ed_interval.value)
clearInterval(pollingtimer);
pollingtimer = window.setInterval("Polling()",
intervaltime);
}
Einspielen der Webseite in das Web-IO
AJAX basierende Webseiten funktionieren nur dann, wenn die Daten zur
Aktuallisierung vom gleichen Server kommen wie die Webseite selbst. Es
ist nicht möglich die Webseite von Server A zu laden, aber die Daten
von Server B zu abzurufen.
Ist die Programmierung der Webseite abgeschlossen, muss diese in das
Web-IO hochgeladen werden. Das geht bequem mit wenigen Mouse-Klicks über
das Web-Interface des Web-IO:
Das Beispiel unterstützt alle gängigen Funktionen des Web-IO,
optimiert für das Web-IO
2x Digital Input, 2x Digital Output PoE. Für die anderen Web-IO Modelle
müssen ggf. Anpassungen an der Beispiel-Webseite
vorgenommen werden. Weitere Programmbeispiele zur Socket-Programmierung
finden Sie auf den Tool-Seiten
zum Web-IO. Eine detaillierte Beschreibung zu den Kommandos der Web-IO
Digital Modelle finden Sie im Referenzhandbuch.
