Tutorial zum Nutzen des Ajax Features¶

Sorry, this article is not translated !

So ein Ajax Feature ist inzwischen eingebaut. Jetzt sieht man den Links zum erstellen eines Timers ([Aufzeichnen]) an der Farbe an ob dieser ein Konflikt verursachen würde(rot) oder nicht(grün). Da dies einen ziemlichen Aufwand für xxv bedeutet, jeden einzelnen EPG Event darauf zu prüfen ob er sich mit anderen Timern überschneiden würde ,hab ich das jetzt mit Ajax realisiert.

Am Anfang werden diese Links wie gewohnt normal dargestellt. Nach dem vollständigen Laden der Seite geht ein Javascriptprogramm jeden einzelnen Link durch und stellt eine Anfrage per Ajax an den Server. Als Antwort bekommt es entweder ein 'ok' oder die Timer mit deren Id sowie Priorität die einen Konflikt verursachen würden.

Schauen wir uns doch mal schnell das javascript (records.js) dazu an. Zuerst müssen wir dafür sorgen das die Links erst dann durchgeparst werden wenn die Seite schon geladen wurde. Dies tun wir einfach mit dem Event 'onLoad':

      window.onLoad = window.setTimeout("checkrecord('recordlink')", 1000);

Die Verzögerung von einer Sekunde hab ich mit Absicht drin gelassen, da man ja nie weiss was der Browser so alles im Hintergrund noch macht. Es wird also nach dem Laden der Seite sowie einer weiteren Sekunde die routine checkrecord('recordlink') aufgerufen. Der Bezeichner 'recordlink' wird genutzt um alle Links zu finden die den entsprechenden Namen besitzen:

     <a href="?cmd=tnew&data=840461701">
        <span name='recordlink' id='840461701' class='normal'>
        [Aufzeichnen]
        </span>
     </a>

Kommen wir nun zur eigentlichen JS Routine "checkrecord":

    function checkrecord (name) {
        var fnWhenDone = function (oXML, sData) {
            if(oXML.responseText != 'ok') {
                var text = oXML.responseText.split(':');
                document.getElementById(sData).className = 'problem';
                document.getElementById(sData).title = '' + text[0];
            } else {
                document.getElementById(sData).className = 'noproblem';
                document.getElementById(sData).title = '';
            }
         };

        var fnWorking = function (oXML, sData) {  };

        var tags = document.getElementsByName('recordlink');
        for (var i = 0; i < tags.length; i++) {
            var epgid = tags[i].id;
            var url = "cmd=conflict&data=" + epgid + "&ajax=text";
            var aconn = new XHConn();
            var hosturl = 'http://' + window.location.host;
            aconn.connect(hosturl, 'GET', url, fnWhenDone, fnWorking, epgid);
        }
    }

Da das gesamte Ajaxsystem asynchron abläuft, also man schickt eine Abfrage ab und wartet nicht bis die Antwort kommt ... man lässt sich sozusagen anklingeln wenn die Anfrage fertig ist und beendet dann seine Arbeit. Das tollste daran, das gesamte Webinterface bleibt nicht einfach stehen, sondern man kann in alle Ruhe damit weiterarbeiten.

Zuerst lässt man sich alle Links geben die im Namen 'recordlink' stehen haben. Diese geht man nun einzeln durch, ließt die jeweilige EPGid aus dem Id tag aus und baut die Ajax url zusammen.

        var tags = document.getElementsByName('recordlink');
        for (var i = 0; i < tags.length; i++) {
            var epgid = tags[i].id;
            var url = "cmd=conflict&data=" + epgid + "&ajax=text";
        .....

Diese unterscheidet sich nur in dem zusätzlichen Parameter 'ajax'. Diesen muss man entweder auf 'text' oder 'xml' setzen, damit beschreibt man das Format wie Ajax antworten soll:

            ....
            var url = "cmd=conflict&data=" + epgid + "&ajax=text";
            ....

Am Ende wird ein XMLHTTP Interface erstellt das mit XXV schon mitgeliefert wird, da wir für JEDE Anfrage eine Instance benötigen müssen wir diese auch schon in der Schleife erstellen:

            ....
            var aconn = new XHConn();
            var hosturl = 'http://' + window.location.host;
            aconn.connect(hosturl, 'GET', url, fnWhenDone, fnWorking, epgid);
            ....

Spätestens jetzt fallen uns die ominösen Funktionen 'fnWhenDone, fnWorking' auf. Diese Funktionen antworten sozusagen dem Klingeln, es sind in Javascript geschriebene Callbacks die anspringen wenn die Anfrage einen bestimmten Status erreicht hat. Wenn die Anfrage noch in Arbeit ist wird 'fnWorking' aufgerufen. Hier könnte man z.B. den Text 'Aufzeichnen' durch 'Loading...' ersetzen oder eine tolle Progressbar darstellen, der Fantasie sind da kaum Grenzen gesetzt. 'fnWhenDone' springt an wenn die Anfrage eine Antwort geliefert hat. In unserem Fall halt 'ok' oder z.B. '10:50', das würde bedeuten der Konflikt tritt mit dem Timer 10 auf der eine Priorität von 50 hat. 'fnWhenDone' macht nichts anderes als dem Link die entsprechende klasse zuzuweisen und noch einen Informationstext in dem title von dem Link schreibt:

        var fnWhenDone = function (oXML, sData) {
            if(oXML.responseText != 'ok') {
                var text = oXML.responseText.split(':');
                document.getElementById(sData).className = 'problem';
                document.getElementById(sData).title = '' + text[0];
            } else {
                document.getElementById(sData).className = 'noproblem';
                document.getElementById(sData).title = '';
            }
         };

Das wars dann auch schon wieder, jedenfalls ist Ajax ziemlich mächtig. Aber man muss auch zugeben, die Möglichkeiten sind begrenzt. Eine komplette GUI mit Hilfe dieses Frameworks zu schreiben würde vom hundertsten ins tausende führen, ich weiß wovon ich spreche ;) Aber kleine Sachen, ohne die gesamte Webpage nachladen zu müssen, kann man sehr schön damit realisieren.