De:Tutorien:Eigene Response-Befehle erstellen

xajax kann auf vielerlei Weise mit zusätzlichen eigenen Funktionen erweitert werden. Die Erweiterbarkeit von xajax wird möglich gemacht durch die addScript()-Methode der xajaxResponse-Klasse und die objektorientierten Möglichkeiten zur Klassenerweiterung von PHP.

[edit] addScript() verwenden

Die addScript()-Methode der Response-Klasse erlaubt es, eigenen JavaScript-Code von registrierten xajax-Funktionen zurückzugeben, der clientseitig ausgeführt wird.

Nehmen wir als Beispiel an, sie möchten über xajax dynamisch Optionen einem Select-Box-Element hinzufügen. Um dies mit der xajaxResponse-Klasse zu erreichen, würden Sie das notwendige JavaScript als Zeichenkette erstellen und über die addScript()-Methode aufrufen. Etwa so:

$objResponse = new xajaxResponse();

$sScript  = "var objOption = new Option('New Option', '1');";
$sScript .= "document.getElementById('select1').options.add(objOption);";
$objResponse->addScript($sScript);

return $objResponse;

Mit dieser Server-Antwort wird das JavaScript zurück an den Client gesendet, wo xajax es ausführen und eine Option mit dem Titel "New Option" sowie dem Wert "1" in die Select-Box mit der id "select1" einfügen wird. Das funktioniert schon ziemlich gut. Wenn Sie jedoch eine Anwendung programmieren, die ständig Optionen wie diese in etliche Select-Boxen einträgt, und wenn Sie den nötigen Code ständig modifizieren und in Ihrer Anwendung hin und her kopieren, kann schnell die Übersicht verloren gehen, sodass der Code schwer zu lesen und instandzuhalten ist.

Daneben wirkt das asynchrone Übertragen von JavaScript mit der addScript()-Methode zwar cool und kann nützlich sein. Um jedoch die Vorteile des Browser-Caching zu nutzen und das JavaScript nicht jedesmal neu zurückgeben zu müssen, ist es empfehlenswert, eine JavaScript-Funktion in clientseitigem Code Ihrer Anwendung oder einer externen JavaScript-Datei zu erstellen und über die addScript()-Methode aufzurufen. Ungefähr so:

Clientseitig:

<script type="text/javascript">
function addOption(selectId, txt, val)
{
    var objOption = new Option(txt, val);
    document.getElementById(selectId).options.add(objOption);
}
</script>

Serverseitig:

$objResponse->addScript("addOption('select1', 'New Option', '13');");

Durch das Platzieren der JavaScript-Funktion auf der Client-Seite und das Aufrufen durch die addScript()-Methode kann der Browser das JavaScript cachen und wiederverwenden, und wir vermeiden es, den gesamten JavaScript-Code in jeder xajax-Response zurückgeben zu müssen. Dieser Ansatz erhöht die Performance und Wartbarkeit.

[edit] Erweitern der xajaxResponse-Klasse

Um die Wart- und Lesbarkeit Ihres Codes weiter zu verbessern, können Sie die objektorientierten Aspekte der PHP-Sprache nutzen und eine eigene Response-Klasse erstellen, die die normale xajaxResponse-Klasse durch das Hinzufügen eigener Methoden erweitert. Auf diese Weise können Sie häufig verwendete Funktionen integrieren, und Ihnen stehen weiterhin die von Haus aus eingebauten Response-Methoden zur Verfügung.

Zur Verdeutlichung führen wir unser Beispiel von oben fort. Sie könnten hier die xajaxResponse-Klasse erweitern, um eine Standardmethode zum Hinzufügen von Select-Box-Optionen zu integrieren:

class myXajaxResponse extends xajaxResponse
{  
    function addCreateOption($sSelectId, $sOptionText, $sOptionValue)  
    {  
        $sScript  = "var objOption = new Option('".$sOptionText."', '".$sOptionValue."');";
        $sScript .= "document.getElementById('".$sSelectId."').options.add(objOption);";
        $this->addScript($sScript);
    }
}

Für den Fall, dass Sie wie oben beschrieben eine JavaScript-Funktion erstellt haben, die vom Browser zwischengespeichert werden kann und nicht in jeder Server-Antwort neu übertragen werden muss, würde die erweiterte Response-Klasse so aussehen:

class myXajaxResponse extends xajaxResponse
{  
    function addCreateOption($sSelectId, $sOptionText, $sOptionValue)  
    {  
        $this->addScript("addOption('".$sSelectId."', '".$sOptionText."', '".$sOptionValue."');");
    }
}

Jetzt können Sie statt des xajaxReponse-Objekts Ihre eigene Response-Klasse in mit xajax registierten Funktionen instanzieren und verwenden:

$objResponse = new myXajaxResponse();

// Standard-Methoden sind weiterhin verfügbar
$objResponse->addAssign("div1", "innerHTML", "Some Text");   

// Dazu können Sie Ihre eigenen Methoden verwenden
$objResponse->addCreateOption("select1", "New Option", "13");
 
return $objResponse;

Der Einsatz einer erweiterten Response-Klasse macht Ihren Code effizienter wiederverwendbar und spürbar einfacher zu lesen, instandzuhalten und zu erweitern. Da Sie bereits eine Methode zum Erstellen einzelner Select-Box-Optionen erstellt haben, könnten Sie nun eine weitere programmieren, die aus einem übergebenen Feld mehrere Optionen auf einmal hinzufügt:

class myXajaxResponse extends xajaxResponse
{  
    function addCreateOption($sSelectId, $sOptionText, $sOptionValue)  
    {  
        $this->addScript("addOption('".$sSelectId."', '".$sOptionText."', '".$sOptionValue."');");
    }

    function addCreateOptions($sSelectId, $aOptions)
    {
        foreach($aOptions as $sOptionText => $sOptionValue)
        {
            $this->addCreateOption($sSelectId, $sOptionText, $sOptionValue);
        }
    }
}

Nun können Sie dynamisch Options-Gruppen in eine Select-Box einfügen:

$objResponse = new myXajaxResponse();
    
$aOptions['One'] = 1;
$aOptions['Two'] = 2;
$aOptions['Three'] = 3;
$objResponse->addCreateOptions("select1", $aOptions);
 
return $objResponse;

Wie Sie sehen sind die Möglichkeiten nahezu unbegrenzt.

Diese Art des Erweiterns der xajaxResponse-Klasse kann zudem die Integration von Third-Party-JavaScript-Bibliotheken in Ihre xajax-Anwendungen erleichtern. Genauso wie wir die Response-Klasse mit eigenen clientseitigen JavaScript-Funktionen erweitert haben, können wir Response-Methoden hinzufügen, die fremde JavaScript-Funktionen aufrufen.

Ein weiterer Vorteil ist, dass Sie Ihre speziellen Bedürfnisse implementieren können, ohne die xajax-Kernbiliothek verändern zu müssen. Wenn Sie nun ein xajax-Upgrade durchführen möchten, müssen Sie nicht Ihren gesamten Code durchgehen, um nachzusehen, welche eigenen Funktionen Sie unvorteilhafterweise direkt in den bestehenden xajax-Code eingefügt hatten. Bei Verwendung von erweiterten Response-Klassen müssen Sie lediglich die neue xajax-Bibliothek installieren und möglicherweise notwendige Veränderungen an Ihren angepassten xajax-Klassen vornehmen, bevor Sie diese wie bisher überall in Ihrer Anwendung nutzen können.

Hoffentlich hilft dieser Tipp/Trick Entwicklern dabei, xajax besser in Ihren Anwendungen nutzen zu können. Wenn Sie die Response-Klasse erweitert haben und der Meinung sind, andere xajax-Nutzer könnten von Ihren hinzugefügten eigenen Methoden profitieren, stellen Sie diese bitte zur Unterstützung der Gemeinschaft im Forum vor. Einige Ihrer Ideen könnten es ohne Weiteres in eine zukünftige Release-Version schaffen!