DOM-Manipulation JavaScript - Praxistutorial 2 - Ein paar Anmerkungen

1. Die Abschnitte

• Einführung
• Die Initialisierung
• Anfrage vorbereiten
• Daten zusammenstellen
• Anfrage senden
• Der PHP-Code
• Das Ergebnis auswerten
• Die select-Felder manipulieren
• Die Ergebnisse ausgeben
• Die Links generieren
• Noch eine Anfrage
• Inhalte einfügen
• Ein paar Anmerkungen

2. Puuuh!

Geschafft! Dies hier ist eines meiner bisher umfangreichsten Tutorials mit seinen sage und schreibe 13 Abschnitten. Ich hoffe, euch hat es Spaß gemacht und ihr habt auch noch was dabei gelernt. Trotzdem muss ich an dieser Stelle noch auf etwas Wichtiges hinweisen.

3. Die Sache mit den Variablen

Hier haben wir sie sehr oft auf global gesetzt, also zum Beispiel ajax_obj, str oder xml. Na ja, funktioniert hat es ja prächtig, also sollte das doch in Ordnung sein. So werden jetzt sicher etliche von euch denken und diesen Stil kritiklos übernehmen.

Aber!

Das ist zumindest meiner Meinung nach ein Trugschluss. Gut hier hält sich das noch in Grenzen, aber wenn ihr eine größere Sache in JavaScript programmiert, so wird diese Vorgehensweise ziemlich schnell sehr unübersichtlich. Meine Tipps dazu lauten.

• Meidet diese globalen Variablen wie der Teufel das Weihwasser. Also analog zu global in PHP.
• Legt für Ajax-Requests eine eigene Konstruktorfunktion fest und arbeitet mit Prototyping oder Aggregation.
• Legt alle Variablen innerhalb(!) einer Methode als lokal (var) fest und übergebt sie dann als Parameter an andere Methoden.
• Global verfügbare Variablen sollten in jeder Konstruktorfunktion als öffentliche Eigenschaft (this) definiert werden.

4. Die Sache mit dem Laden

Bei JavaScript ist das so eine Sache, denn der Code wird zur Laufzeit ausgeführt, das heißt, wenn er in den Browser geladen wurde. Das ist aber nicht gleichbedeutend mit wenn die komplette Seite übertragen worden ist. Und das kann zu mehreren Problemen führen.

• Es wird auf Elemente zugegriffen, die noch nicht vorhanden sind.
• Das Laden kann sich hinauszögern und es sind schon Interaktionen möglich, die noch nicht per JavaScript abgefangen werden können.
• Zusätzliche externe JavaScript-Anwendungen können den Ladeprozess verlangsamen.

4. Das grundsätzliche Problem

Grundsätzlich kann man erst bei einem onload sicher sein, dass die Seite komplett vorhanden ist. Oder man bindet den JavaScript-Code ganz am Ende des HTML-Dokumentes ein. Ich persönlich mache hier oft beides, also die Event-Handler in einem window.onload definieren und zusätzlich die externen JavaScript-Dateien am Ende der Seite einbinden. Zu der grundsätzlichen Problematik reiche ich bald ein Tutorial inklusive Lösung nach.

Leider kann ich damit nicht verhindern, dass der Anwender schon munter auf allen möglichen Elementen herumklickt und sich wundert, dass nichts passiert. Und besonders heikel wird es, wenn man zusätzlich noch externe Anwendungen laden muss. Als Beispiel nenne ich nur mal Google Analytics. Damit kann man sich zwar wunderbar die Zugriffe auf seinen Auftritt protokollieren lassen, aber glaubt mir, das kann auch mal dauern.

5. Das Ajax-Problem

Dank der "same-origin-policy" kann man solche Request nur auf die eigene Domain absetzen. Sicher ist sicher. Aber auch hier muss man bedenken, dass das Zeit in Anspruch nimmt. Und dann hat man wieder dieselben Probleme, die ich oben schon beschrieben habe. Man sollte also bei größeren und vor allem zeitkritischen JavaScript-Anwendungen immer im Hinterkopf behalten, dass es Schwierigkeiten wegen einer langsamen Datenübertragung geben kann.

6. Lösungsmöglichkeiten

Das Hosting

Wenn man seine Domain bei einem Billig-Hoster liegen hat, sollte man meiner Meinung nach auf den exzessiven Einsatz von JavaScript im Allgemeinen und Ajax im Speziellen verzichten, wenn man mit einem regen Zugriff rechnen muss. Da spart man dann am falschen Ende. Investiert also lieber ein Mark und seht zu, dass euer Auftritt auf einem schnellen Server liegt.

Elemente deaktivieren

Formularfelder können zum Beispiel direkt in HTML auf disabled gesetzt und dann erst beim onload per JavaScript aktiviert werden. Oder aber man legt ein div-Element über die gesamte Seite, so dass der Anwender erst auf die darunter liegenden Elemente klicken kann, wenn sie vollständig geladen ist und das div per JavaScript ausgeblendet wurde. Diese Methode ist im Moment sehr verbreitet, besonders in Kombination mit einem wie auch immer gearteten "Bitte Warten"-Bild.

Keine externen Anwendungen

Alles, was zusätzlich Zeit in Anspruch nimmt, sollte vermieden werden! Besonders Anbindungen an irgendwelche Google-Geschichten wie Maps, AddWords oder Analytics. Das muss ich immer wieder auf der Arbeit erleben, wo ein Ajax-Request erst nach zig Sekunden gestartet wird, da ein Google-Script ewig zum Laden braucht und so lange alles blockiert.

Timeouts setzen

Manchmal kann es passieren, dass eine Datenbank oder ein Webserver völlig überlastet ist. Wir schicken dann einen Request ab und der nudelt, nudelt und nudelt. Für so einen Fall sollte man zusätzlich per JavaScript einen Timer einbauen, der nach einer bestimmten Zahl von Sekunden sagt, sorry, das dauert zu lange, das wird nichts mehr.

7. Fazit

DOM-Manipulation im Verbund mit Ajax wäre eigentlich ziemlich einfach. Wenn es da nicht obige Probleme gäbe. Nun, dabei man sich durch die entsprechende Internet-Recherche behelfen. Und was die Performance angeht, so muss dann halt ein schneller Rechner her. Ich hoffe trotzdem, dass ich euch das Thema hier nicht madig gemacht habe, und ihr euch auch weiterhin damit beschäftigt.

zurück zum vorherigen Abschnitt