jQuery von Kopf bis Fuß (German Edition)

Informationen dargestellt werden: einer für die männlichen Finisher (mit der ID
männlich
) und einer für die weiblichen (mit der ID
weiblich
). Den Tab Über das Rennen können Sie entfernen, aber Alle Finisher sollten Sie behalten, er wird noch gebraucht. Bauen Sie in jeden Abschnitt ein leeres
ul
-Element ein, das später die Namen der Läufer und Läuferinnen aufnehmen wird. Vergessen Sie auch nicht, sämtliche Inhalte aus dem
alle_finisher ul
-Element mit der ID zu entfernen.
    HTML-Codemagneten: Lösung
    Sie sollten jetzt zwei neue Tabs haben, einen für die weiblichen und einen für die männlichen Finisher.
    Probefahrt
    Aktualisieren Sie Ihre index.html -Datei mit dem Code aus der Magnetenlösung und öffnen Sie sie im Browser Ihrer Wahl.

    Gute Arbeit!
    Die Seite nimmt langsam Gestalt an. Jetzt wollen wir sehen, wie Sie Daten vom Server abfragen und die Tabs mit echten Informationen über das Rennen füllen können.

Daten mit der ajax-Methode abfragen
    Sie wollen Daten? jQuery und Ajax warten nur darauf, sie Ihnen zu liefern. Die
ajax
-Methode von jQuery gibt ein Objekt (das kennen Sie noch aus Kapitel 6 , oder?) mit Daten über die auszuführende Aktion zurück. Sie können der
ajax
-Methode eine Vielzahl verschiedener Parameter übergeben. Sie ist außerdem in der Lage, Daten per POST zum Server zu schicken und per GET vom Server abzufragen.

    Eine vollständige Liste aller Parameter für diese Methode finden Sie unter der Adresse http://api.jquery.com/jQuery.ajax/ . Es gibt außerdem eine Reihe von jQuery-Hilfsmethoden für den Umgang mit Ajax-Aufrufen. Wir werden uns etwas später genauer damit beschäftigen, versprochen!
    Aktualisieren Sie nun Ihre meine_skripte.js -Datei mit dem Code, den wir unten hervorgehoben haben.

    Probefahrt
    Aktualisieren Sie Ihre meine_skripte.js -Datei mit dem Code von der vorigen Seite. Laden Sie dann die Beispiel-XML-Datei von http://thinkjquery.com/chapter08/step2/finisher.xml herunter und speichern Sie sie im selben Verzeichnis wie Ihre index.html -Datei. Wenn Sie damit fertig sind, öffnen Sie index.html in Ihrem Browser. Öffnen Sie nun den »Network«-Tab (in den Entwicklerwerkzeugen von Google Chrome) bzw. den »Net«-Tab (in Firebug für Firefox). Ihre XML-Datei sollte hier zusammen mit den anderen Dateien für Ihre Seite aufgelistet sein. Den eingedeutschten Code finden Sie unter www.oreilly.de/catalog/hfjqueryger .
    Gutes Argument!
    Jetzt, wo wir wissen, wie wir die XML-Datei in den Browser laden können, müssen wir die benötigten Textteile herausfischen und auf dem Bildschirm darstellen. Außerdem brauchen wir eine Möglichkeit, jeden (engl. each ) Läufer zu finden, und der richtigen Liste (männlich/weiblich/alle) hinzuzufügen. Und es ist tatsächlich eine gute Idee, die
ajax
-Aufrufe in Funktionen zu verpacken, damit Sie sie bei Bedarf aufrufen können.
    Aufgepasst
    Ajax-Aufrufe unterliegen der »same origin«-Regelung!
    Die same-origin -Regelung (»gleiche Herkunft«) ist ein Sicherheitskonzept für JavaScript und andere clientseitige Skriptsprachen. Danach dürfen Skripten, die auf einer Seite laufen, nur auf Ressourcen (z. B. Elementeigenschaften oder Methoden) zugreifen, die vom selben Server stammen . Dadurch soll verhindert werden, dass Skripten auf Elemente zugreifen, die möglicherweise aus gefährlichen Quellen stammen. Aus Gründen der Abwärtskompatibilität unterliegen eingebundene JavaScript-Ressourcen nicht dieser Regelung, XML-Dateien aber schon. Das heißt, dass die XML-Datei vom selben Server stammen muss wie die Seite, die sie lädt .

XML-Daten parsen
    Wir brauchen eine Methode, um die einzelnen Läufer aus der XML-Datei zu extrahieren und auf dem Bildschirm darzustellen. Glücklicherweise bietet jQuery die
find
-Methode. Ihre Aufgabe ist, anhand der übergebenen Suchkriterien bestimmte Elemente zu finden. Mit
find
können wir die Nachkommen von Elementen in einem hierarchisch strukturierten Satz an Informationen finden, beispielsweise dem DOM-Baum oder einem XML-Dokument, und daraus ein neues Array mit den passenden Elementen erstellen. Dabei haben die Methoden
find
und
children
eine gewisse Ähnlichkeit. (Die
children
-Methode haben wir in Kapitel 4 kennengelernt, als wir die Speisekarte für das Webville-Restaurant erstellt haben.) Allerdings bewegt sich
children
nur um eine Ebene im DOM-Baum nach unten. Wir müssen aber weiter runter ...

    Durch die Kombination der Methoden find und each können wir eine Gruppe von Elementen