Putzmittel mit Power
Teil 5: Ajax, echte Client-Server-Lösung
- Ajax, echte Client-Server-Lösung
- Teil 2: Ajax, echte Client-Server-Lösung
- Teil 3: Ajax, echte Client-Server-Lösung
- Teil 4: Ajax, echte Client-Server-Lösung
- Teil 5: Ajax, echte Client-Server-Lösung
- Teil 6: Ajax, echte Client-Server-Lösung
Bis zum Submit des Edit-Formulars bleibt alles gleich. Dann aber wird kein Seiten-Aufruf abgesetzt, sondern in der JavaScript Submit-Prozedur über AJAX eine PHP-Prozedur auf dem Server aufgerufen, die die Datenbank sofort updatet. Bis auf die Verarbeitung der Quittungen und einen denkbaren FehlerPop-Up wäre das Update fertig. Dafür brauchen Sie fast nur eine um AJAX erweiterte editOK() JavaScript-Prozedur und verlegen das Datenbank-Update in die PHP-Prozedur auf dem Server. Es entfällt die unschöne Parameter-Weitergabe über Session-Variablen.
Im Wesentlichen erzeugen Sie beim Submit in der editOK()-Prozedur ein Request-Objekt, das mit dem Server kommuniziert. Diesem Objekt übergeben Sie wie bei einem Formular-GET den Server-Aufruf mit allen Parametern. Für den Empfang der Antwort weist das Programm as Request-Objekt eine Prozedur zu, die bei einem Statuswechsel aufgerufen wird:
function editOK() { ... xmlhttpRequest = new XMLHttpRequest(); ...}
In der Antwort-Prozedur überprüfen Sie den zurückgesendeten Status, melden entweder einen Fehler oder schließen zur Quittung das Edit-Fenster:
function editAnswer() {if ( /* everything ok */ ) document.all.EditWindow.style.visibility = 'hidden';else alert ( /* Fehlermeldung */ );
Doch noch fehlt das Update des editierten Bildes auf der Seite. Der Server soll das Bild neu senden, weil es der Anwender hätte drehen können. Entscheidend dabei ist, dass sich der HTML-Code mit geändertem Bild auch ändert.
So muss z. B. eine neue Bildunterschrift angezeigt werden. Oder der Anwender könnte das Löschungkennzeichen gesetzt haben. Also muss der Server ein neues Thumbnail senden, und der Programmierer den Bereich der Seite neu aufbauen.
Um das effektiver zu machen, bekommt die "Umgebung" jedes Bildes eine mit Nummer identifizierte
<div id='4711'><a href='javascript:EditWindow(...)><img src='...4711...'><a href='javascript:deletePicture(...)'><img ... transparent icon></a> </a>....</div>
Somit haben Sie die HTML-Umgebung eines Bildes gestaltet. Da die Update Prozedur ohnehin auf die Datenbank zugreifen muss, lassen Sie zusammen mit der OK-Quittung die neuen Werte für die Bild-Umgebung mitliefern. Damit bauen Sie diesen Bereich Ihrer Seite neu. Selbst den Aufwand sparen Sie sich: Bei der ersten Anzeige der Seite haben Sie ja die gleiche Umgebung in PHP schon aus dem Datensatz jedes Bildes heraus aufgebaut. Diesen Code verwenden Sie genau so beim Update des Bildes, um ihn dann vom Server als HTML-Sniplet an den Browser zurückzuschicken. Im Browser brauchen Sie dann nur den JS-Befehl:
document.getElementById(id).innerHTML = [neue HTML Umgebung vom Update]
Dies sieht komplizierter aus, als es wegen des Objekt-orientierten Aufbaus der Webseite ist. Es überrascht, wie schnell das alles geht, weil der ganze Browser-Overhead mit Bild-Laden, Seiten-Layout und Rendering wegfällt. Als Rücklieferung von der Update-Prozedur können Sie also den String ok | | erwarten. Geht etwas schief, schicken Sie einen Fehlertext, der eben nicht mit ok anfängt.
