Geräteüberwachung im Browser

[pl]

Du brauchst am Webserver eine Scriptsprache, die eine Verbindung zur Datenbank herstellt. Eine entsprechende Abfrage liefert {feldname => inhalt} Hier ein Beispiel für eine solche Datenstruktur in Perl:

$array = [
  {
     datetime => '2016-12-02 00:00:00',
     leistung => '1.2kW',
     unit     => 'Heizung'
  },
  {
     datetime => '2016-12-02 01:01:01',
     leistung => '2.7kW',
     unit     => 'Heizung'
  },
  # usw.
]

Der Clou an dieser Datenstruktur ist, dass diese von gängigen Template-Engines verstanden wird und sich bestens zur Darstellung tabellarischer Inhalte eignet. Nun, zur Übertragung in der AJAX-Response wir dieses Array serialisiert, und als Message-Body gesendet, z.B.:

$response = $json->encode($array);

In der Callbackfunktion, also da wo die Ajax-Response ankommt, wird obenstehendes Array wiederhergestellt, damit ein Template gerendert und anschließend ins DOM gepflanzt, z.B.:

xhr.onload = function(){
   if(this.status != 200) return alert(this.response); // Fehlerbehandlung
   var array = JSON.parse( this.response );
   var table = Mustache.render(template, {slice: array});
   $('#out').html( table ); // ab ins DOM
};

Das Template hat die Feldnamen als Platzhalter, {{datetime}}, {{leistung}}, {{unit}}, also dieselben Namen / Aliase welche auch die Abfrage liefert. Also guckst Du Mustache auf Git. /pl