DOM-Manipulation JavaScript - Praxistutorial 2 - Die Ergebnisse ausgeben
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. Die Methode manipulateCompanies
... liest jetzt die <agentur>-Tags aus und schreibt die Inhalte in den rechten Bereich hinein. Zuerst sollte
sie aber mal in der analysePostXml aufgerufen werden, und zwar nach der Schleife!
function analysePostXml ()
{
for (var i = 0; i < input.length; i++) {...}
manipulateCompanies();
}
3. Die XML-Tags auslesen
Das Prinzip kennt ihr schon, nur hier gibt es einen kleinen Unterschied. Da wir nicht wissen, wie viele Einträge es gibt müssen
wir uns diesmal alle XML-Tags holen, die agentur heißen und dann in einer Schleife verarbeiten.
function manipulateCompanies ()
{
var company_info = xml.getElementsByTagName('agentur');
for (i = 0; i < company_info.length; i++)
{
...
}
}
Die Informationen holen
for (i = 0; i < company_info.length; i++)
{
var firma = company_info[i].firstChild.nodeValue;
var id = company_info[i].getAttribute('id');
var info = company_info[i].getAttribute('info');
}
Erläuterung
Haben wir alle schon gemacht und das sollte jetzt wohl bekannt sein. Für die Merkbefreiten trotzdem noch mal die Infos dazu.
Mit var firma = company_info[i].firstChild.nodeValue; holen wir uns aus jedem XML-Tag den Textknoten.
var id = company_info[i].getAttribute('id'); ermittelt den Wert des id-Attributs und
var info = company_info[i].getAttribute('info'); den von info. Warum aber arbeiten wir hier nicht
mit getAttributeNode? Gute Frage! Nun, weil getAttribute hier wunderbar funktioniert und wir uns das Leben
nicht unnötig schwer machen wollen. Darum!
4. Die Inhalte ausgeben
Bei unserem Ajax-Request haben wir abgefragt, ob zu einer Agentur ein Logo oder eine Adresse vorhanden ist. Wenn dem so ist, so basteln wir uns einen Link wenn nicht, so geben wir einfach nur den Namen aus.
for (i = 0; i < company_info.length; i++)
{
...
var absatz = document.createElement ('p');
var text = document.createTextNode(firma);
if (0 == info)
{
absatz.appendChild (text);
}
else if (1 == info)
{
// hier kommt anschließend noch was hinein
}
document.getElementById('result').appendChild(absatz);
}
Erläuterung
Der Optik wegen wollen wir die Inhalte jeweils in einem Absatz ausgeben. Und den erzeugen wir mittels var absatz =
document.createElement ('p');. Danach bauen wir uns einen Textknoten (var text =
document.createTextNode(firma);) und wenn keine Zusatzinfos vorhanden sind (if (0 == info)), so hängen wir den in
den "Absatzknoten" mit absatz.appendChild (text); ein. Und zu guter Letzt geschieht das auch noch dem Absatz, den
wir in das Elternelement mittels document.getElementById('result').appendChild(absatz); einbauen.
Die Links generieren
Hier wollen wir einen Event-Handler erzeugen, der bei einem Klick die Methode prepareRequest mit dem Parameter get
aufruft, um einen neuen Request abzuschicken. Damit wollen wir uns Detailinformationen über die ausgewählten Agenturen holen, um die
später ebenfall zu verarbeiten.
Leider wird es hier ein wenig komplizierter, da wir nicht nur einen weiteren Knoten erzeugen wollen, sondern den Link auch noch mit zusätzlichen Attributen versehen müssen. Allerdings ist das ein wenig vertrackter, als man gemein hin denken mag. Darum gibt es jetzt dazu einen eigenen Abschnitt.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt