jQuery von Kopf bis Fuß (German Edition)
welche Art von Bedingungsblock wir hier benutzen können? (Tipp: Wir haben die benötigte Form bereits zum Überprüfen des Geschlechts der Läufer in der XML-Datei benutzt.)
Es gibt keine: Dummen Fragen
F:
F: Welche anderen Sachen außer XML können mit Ajax in eine Seite eingebunden werden?
A:
A: Mithilfe von jQuery kann eine Vielzahl von Daten in die Seite eingebunden werden. Wie gerade gesehen, können Sie mit der
load
-Methode beispielsweise eine geparste PHP-Datei direkt in ein HTML-Element einfügen. Außerdem können Sie auch weitere HTML-Dateien, JavaScript-Dateien und JSON-Objekte (JavaScript Object Notation) laden. Mit JSON werden wir uns im folgenden Kapitel beschäftigen.
F:
F: Welche anderen jQuery-Hilfsmethoden gibt es für die Arbeit mit Ajax?
A:
A: Für die Arbeit mit Ajax gibt es in jQuery fünf Hilfs- bzw. Kurzschriftmethoden:
get
,
getJSON
,
getScript
,
post
und
load
. Die ersten vier Methoden werden am jQuery-Objekt aufgerufen. Die
load
-Methode kann dagegen von einem beliebigen Element aufgerufen werden, das dann als Ziel für die geladenen Daten verwendet wird.
F:
F: Wann sollte ich die
load
-Methode und wann
ajax
verwenden?
A:
A: Die
load
-Methode ist dafür gedacht, bestimmte Daten an einer vordefinierten Stelle in die Seite einzufügen, wie wir es in unserer Funktion
aktuelle_zeit_ajax
getan haben. Die
ajax
-Methode ist wesentlich komplexer und besitzt deutlich mehr Anwendungsgebiete und Parameter. Sie kann nicht nur verwendet werden, um Daten zu laden, sondern auch, um Daten zur Verarbeitung an den Server zu senden. Mehr dazu finden Sie im folgenden Kapitel.
Spitzen Sie Ihren Bleistift
Erstellen Sie eine Variable mit dem Namen
wiederholen
und dem Standardwert
true
. Erstellen Sie außerdem eine Funktion, die den Wert von
wiederholen
beim Anklicken eines Buttons mit der ID
stopp_button
verändert. Außerdem soll der Inhalt des
span
-Elements mit der ID
freq
in diesem Fall in »Aktualisierungen angehalten.« geändert werden. Zusätzlich benötigen wir noch einen Buttons namens
start_button
, der dafür sorgt, dass die Variable
wiederholen
den Wert
true
erhält und außerdem die Funktionen
AJAX_aufrufe_starten
und
setTimeout
aufruft, sofern
wiederholen
den Wert
true
hat. Bauen Sie die neuen Buttons in den Fußteil der Seite ein.
Spitzen Sie Ihren Bleistift: Lösung
Wenn Sie mit der Arbeit fertig sind, sollte Ihr Code eine Variable namens
wiederholen
enthalten, die steuert, ob die Funktion sich selbst aufruft, um die XML-Datei zur Aktualisierung zu laden. Der Wert dieser Variablen sollte über die Buttons
stopp_button
und
start_button
geändert werden können, die im Fußteil der Seite eingefügt wurden. Außerdem sollten diese Buttons dafür sorgen, dass im
span
-Element mit der ID
freq
eine passende Nachricht angezeigt wird, die dem Benutzer mitteilt, ob die Seite aktualisiert wird oder nicht.
Probefahrt
Aktualisieren Sie die Dateien meine_skripte.js und index.html mit dem gerade erstellten Code und rufen Sie die Seite im Browser auf, um zu überprrüfen, ob alles funktioniert. Probieren Sie die neuen Buttons aus und testen Sie, ob die Ajax-Requests tatsächlich angehalten werden. Verwenden Sie dafür den »Network«-Tab in Google Chrome bzw. den »Net«-Tab in Firebug für Firefox.
Jetzt haben wir tatsächlich eine Seite, die in Echtzeit aktualisiert werden kann (durch das wiederholte Laden der XML-Datei). Außerdem lassen sich die Aktualisierungen anhalten und wieder neu starten.
Ihr jQuery-/Ajax-Werkzeugkasten
Damit haben Sie auch Kapitel 8 in der Tasche. Neben den bisherigen Dingen enthält Ihr Werkzeugkasten jetzt auch etwas PHP und XML und eine Reihe von Ajax-Funktionen.
Ajax
Eine Kombination verschiedener Technologien, die es ermöglichen, Teile einer Website zu aktualisieren, ohne die Seite als Ganzes neu laden zu müssen.
Führt Aufrufe an einen Backend-Server durch, der Daten vor dem Zurücksenden verarbeiten kann.
In jQuery wird die Ajax-Funktionalität über die ajax-Methode implementiert.
ajax()-Hilfsmethoden
In jQuery gibt es fünf Hilfsmethoden für die Arbeit mit Ajax, die alle mit unterschiedlichen Standardparametern versehen sind, aber letztendlich alle die ajax-Methode aufrufen:
$.get
$.getJSON
$.getScript
$.post
$.load
XML
Eine strikte und trotzdem sehr flexible Markup-Sprache zum Beschreiben von Daten und Datenstrukturen.
Kann für das Speichern von Informationen oder die Formatierung von Daten zur Übertragung verwendet werden.
Kommt in vielen
Weitere Kostenlose Bücher