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

Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Whatsapp auf PC
Mit oder ohne Download

Mit Whatsapp Web oder der Whatsapp Desktop-App nutzen Sie den Messenger bequem am PC. Wir erklären Download, Installation und Einrichtung.
Spam-Mails
6 Tipps gegen E-Mail Betrug

Betrüger versenden E-Mails, die es auf Ihre Daten und Ihr Geld abgesehen haben. Wie Sie Phishing E-Mails erkennen und sich schützen.
DSL-Symbolbild
Umzug, Ausfall & Co.

Sie wollen Ihren Provider für Internet und Telefon wechseln? Wir verraten, welche Rechte Sie bei Ausfall, Unterbrechung und Umzug haben.
Fear The Walking Dead - Staffel 3
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Juni 2017 mit "Star Trek Beyond​​ ", neuen Folgen von "Fear the Walking Dead" und weiteren Highlights.
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017