DOM-Manipulation JavaScript - Praxistutorial 2 - Einführung
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. Das große Ajax-Tutorial!
Früher gab es dazu mal eine ziemlich oberflächige Wischi-Waschi-Anleitung, die ich mittlerweile entfernt habe, da sie doch ziemlicher Müll war. In diesem Tutorial dagegen habe ich mir mal richtig Mühe gegeben und alle Details genau erläutert. Warum das im Kapitel DOM-Manipulation auftaucht? Ganz einfach, Ajax ist gar nichts ohne das.
Daher sollten auch alle Anfänger, die direkt hier gelandet sind, sich zuerst mal die Theorie zu Ajax und der DOM-Manipulation zu Gemüte führen. Die Dinge, die ich dort erkläre, werde ich hier definitiv nicht mehr wiederholen. Das setze ich als Grundwissen voraus. Zusätzlich benötigt ihr für dieses Tutorial das entsprechende System, also Webserver, MySQL und PHP, sowie die entsprechenden Grundkenntnisse in den benötigten Sprachen PHP, SQL und natürlich JavaScript.
3. Ein ganz wichtiger Tipp!
Bevor ihr mit diesem Tutorial anfangt, solltet ihr euch vorher auf jeden Fall den Firebug installieren. Das ist eine wunderbare Erweiterung für den Firefox. Denn da gibt es unter den Optionen die Möglichkeit, sich alles anzusehen, was über Ajax läuft ("Show XMLHttpRequest"). Und zwar unter dem Punkt "Konsole".
4. Das Ziel
Wir wollen diesmal die Werte eines Formulars komplett dynamisch und zur Laufzeit verarbeiten. Das bezieht sich sowohl auf die eigentlichen
Inhalte, als auch auf die in den entsprechenden select
-Feldern. Dabei wird das Formular nicht ein einziges mal(!) abgesendet.
Alles läuft per JavaScript und Ajax im Hintergrund ab.
Das Thema
Anhand einer kleinen Datenbank wollen wir uns eine Internet-Agentur suchen. Das geschieht nach gewissen Kriterien wie dem Knowhow oder dem
jeweiligen Stundensatz. Dabei werden wir auch die einzelnen select
-Felder so anpassen, dass sie anhand der jeweiligen
Ergebnisse nur die entsprechende Anzahl von möglichen Einträgen haben.
Die Vorgehensweise
... wirkt hier und da ein wenig suboptimal. Und das ist sie auch. Ich mache das aber trotzdem, um euch die grundlegenden Dinge zu zeigen, damit ihr euch mit den verschiedenen Techniken und Möglichkeiten vertraut machen könnt und die Unterschiede kennen lernt.
5. Die Daten
Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien müssen vorhanden sein.
Dateien
formular.htm
ajax.js
request.php
styles.css
dump.sql
pics
(Ordner mit diversen Bildern)
6. Der Code
Da wir uns hier hauptsächlich mit JavaScript beschäftigen wollen, habe ich mir bei der Datenbank und den entsprechenden SQL-Abfragen keine sonderliche Mühe gebe. Das gilt natürlich auch für den PHP-Code, der sicherlich verbesserungswürdig ist. Darum ist das auch ziemlich schnell von mir zusammengehauen worden. Seid also bitte ein wenig nachsichtig. Wer sich die Mühe machen will, um das zu optimieren, bitteschön. Und wenn die Person dann auch so freundlich wäre, mir das zukommen zu lassen, so wäre ich sehr dankbar dafür.
Die Datenbank
... könnt ihr euch mit der Datei dump.sql
einrichten. Dann sind bereits alle benötigten Daten vorhanden. Wer keine Berechtigung
zum Löschen und Erstellen von Datenbank hat, sollte bitte die entsprechenden Zeilen auskommentieren oder löschen. Aber das ist ja wohl
selbstverständlich. Und wie das geschieht, solltet ihr ja schon wissen, da dies zwar ein Anfängertutorial ist, aber für
Fortgeschrittene. Für wen das zu hoch ist, der sollte vielleicht erst mal hier
vorbeischauen.
Der PHP-Code
... ist schon komplett vorhanden. Ihr braucht euch also nicht um die Abfragen, deren Auswertung und die Generierung der XML-Datei kümmern. Das habe ich für euch schon gemacht (aber wie schon gesagt, nicht besonders sauber). Im Laufe dieses Tutorials werde ich nur auf die wichtigen Dinge eingehen. Vergesst nur bitte nicht, dort die Zugangsdaten zur eurer Datenbank einzutragen!
Die formular.htm
... beinhaltet bereits alle benötigten Einträge aus der Datenbank, obwohl man die eigentlich per PHP hätte abfragen müssen. Da
es hier aber primär um JavaScript geht, habe ich sowohl das Array als auch die select
-Felder einfach mal hart in
die Datei reingeschrieben, um den PHP-Anteil in diesem Tutorial auf das absolut notwendige Minimum zu reduzieren.
7. Die Datenbank und die formular.htm
... solltet ihr euch zuerst mal anschauen. Dann werdet ihr sehr schnell erkennen, dass hier alles über die jeweiligen Primärschlüssel der einzelnen Datenbankfelder gesteuert wird. Denn nur die (mit Ausnahme gewisser Zusatzinformationen) holen wir uns bei den Ajax-Anfragen.