Putzmittel mit Power

Teil 5: 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.

Ajax, echte Client-Server-Lösung

© Archiv

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.

Ajax, echte Client-Server-Lösung

© Archiv

Um das effektiver zu machen, bekommt die "Umgebung" jedes Bildes eine mit Nummer identifizierte

-Anweisung. Das Bild 4711 wird also zusammen mit der Kennzeichnung für Löschung, die ja ein eigenes überlagertes GIF ist, im
-Bereich 4711 dargestellt:

<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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".