Video-Tutorial: Einfacher AJAX-Request mit Hilfe von jQuery
Für das CMS fokus nehme ich zur Zeit einige technische Tutorials auf. Per Screencasting-Software zeige ich beispielsweise, wie man Templates erstellt oder mit den komplexen Dokumentenklassen umgehen sollte. Da mir diese Arbeit sehr viel Spaß bereit – aber auch enorme Übung erfordert – habe ich mir gedacht, warum nicht auch mal ein Video-Tutorial für diesen Blog erstellen?
Gesagt getan: Für den Anfang habe ich mir ein Thema vorgenommen, welches hier im Blog bereits in einer eigenen Artikelserie behandelt wurde. Die Rede ist von einem AJAX-Request, der mit Hilfe von jQuery umgesetzt werden soll.
Ein passendes Beispiel war ebenfalls schnell gefunden. Jede Sekunde soll der Server angefunkt werden und die Uhrzeit zurückgeliefert werden. Somit ist mit nicht einmal 30 Zeilen Quellcode eine digitale Uhr entstanden.
Das Video findet ihr hier im Blog und direkt bei Youtube. Ich empfehle euch jedoch dringend, als Auflösung 1080p zu wählen, da das Bild ansonsten doch sehr verpixelt ist.
Eure Meinung ist gefragt
Ich bin sehr auf eure Meinung gespannt. Gefällt euch der Ansatz mit den Video-Tutorials oder bevorzugt ihr klar die schriftliche Form? Was könnte man besser machen? Was ist in Ordnung? Themen-Wünsche für das nächste Video?
Im Video verwendete Dateien
Gerne greife ich den Vorschlag von Matthias aus den Kommentaren auf und zeige hier nochmal direkt den Quellcode der verwendeten Dateien. Macht natürlich Sinn und werde ich auch in Zukunft so handhaben! :)
index.html
time.php
jquery.js
Dieser Artikel wurde am 19.01.2012 veröffentlicht
Wer schreibt hier?
Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!
Tolles Video – hat mir sehr gefallen! – bitte weiterverfolgen
PS.: Skype solltest du vielleicht vorher ausschalten … :)
Hallo!
Netter Start. Was mich persönlich etwas stört ist das ständige Klickgeräusch. Ansonsten wäre’s noch toll, wenn Du in den relevanten Teil des Screens reinzoomen würdest, dann wäre das Video evtl. auch in kleineren Auflösung gut erkennbar.
Ja, das Klickgeräusch wurde bereits mehrfach bemängelt und fliegt beim nächsten Video definitiv raus! Bezüglich des Zoomes werde ich auch mal schauen was sich da machen lässt; muss mich da erst noch weiter mit der Screencasting-Software beschäftigen… Optionen über Optionen… ;-)
Danke für euer Feedback!
Schönes und lehrreiches Video, danke!
Mit welchem Programm hast du den Screencast aufgenommen?
Hier zwar gerade nicht passend, aber dennoch interessant: Warum setzt du eigtl. hier im Blog auf WordPress und nicht auf fokus?
Das Video habe ich mit Camtasia Studio aufgezeichnet.
Dieser Blog wurde bereits vor über einem Jahr aufgesetzt. Damals gab es noch keine produktive, solide Version des CMS fokus. Für eine Migration fehlte mir bislang die Zeit. :)
Ich finde das Tutorial echt super. So kann ich gleich mitlernen. Erinnert mich ein wenig an Video2Brain ;-)
Gefällt mir gut!
Kleiner Verbesserungsvorschlag: Es wäre toll, wenn ich den gezeigten Code noch einmal hier im Artikel oder als Dateianhang nachlesen könnte. Wenn ich jetzt dein Tutorial nachbauen will, muss ich im Video an verschiedenen Stellen anhalten und den Code abschreiben. Ist ok, aber nicht so richtig praktisch.
Ansonsten super! Und ja, das Klicken kann weg. ;)
Hallo Matthias,
dein Vorschlag macht natürlich Sinn – habe ich direkt übernommen! :)
Ich find Videos super. Ist gerade beim Programmieren ne schöne Sache. Evtl die Files noch zum Download zur Verfügung stellen – man ist schließlich faul ;)
Grüße
Pascal
Schönes Video, gut verständlich erklärt.
Eine Frage hätte ich noch dazu:
Du schreibst var time = $(‚#time‘) und später dann $(time).html(data).
Reicht es nicht aus wenn man schreibt: time.html(data), da ja weiter oben schon die Zuweisung erfolgt?
Hallo Alex,
in diesem Fall hätte es eine direkte Zuweisung während des Callbacks natürlich auch getan.
Doch aus Gründen der Performance sollte man sich angehen, die DOM-Elemente möglichst nur ein einziges Mal per jQuery zu selektieren. In unserem Beispiel muss so nur ein einziges Mal auf document.getElementById() zugegriffen werden, anstatt jede halbe Sekunde.
Hi Torben,
ich meinte es etwas anders.
Ich selektiere auch nur ein mal und verwende dann die Variable, eben auch Performancegründen.
Ich hatte mich nur gewundert, warum du nochmal die Schreibweise mit dem $-Zeichen verwendest, also $(time).html(data), anstatt nur time.html(data).
Hallo Alex,
ich verwende generell immer die $()-Schreibweise. Ist einfach Gewohnheit :-)
Hi Torben,
achso, ich dachte zuerst man macht das aus einem bestimmten Grund. Ich find es ja auch nicht falsch, wollte nur mal nachfragen, weil ich ja gern immer dazulerne :-)
Das Video habe ich mir nicht angeschaut, aber der Quellcode ist super übersichtlich, ich finde das mit der Uhr ist ein sehr schönes, kleines Beispiel ohne „Ballast“. Prima!
[…] […]
Ein sehr gutes Video. Ein einfaches Beispiel, dass die Möglichkeiten aber gut verdeutlicht.
Hallo,
also erklärt ist es super finde ich. Aber jede halbe Sekunde den Server anfragen? Das sind wenn 20 Besucher auf der Seite sind ja 2.400 HTTP-Requests pro Minute. Klar, wenn man über die Javascript Timefunktion auf die Zeit zugreift besteht immer die Gefahr, dass die Uhrzeit nicht korrekt ist wenn der Besucher eine falsche Uhrzeit eingestellt hat.
Ich würde direkt ins Dokument mit PHP den Timestamp reinschreiben und dann jedes mal wenn der Interval läuft (zum Beispiel 1000 ms) die Zahl (die Variable mit dem PHP-Timestamp) um 1 (1 Sekunde == 1000 Millisekunden) erhöhen.
So hat man dann trotzdem eine korrekte Serverzeit und das ohne so viele HTTP-Requests.
Gruß. :)
Genial erklärt. Bin ein JQuery Ajax Anfänger, arbeite zzt. am eigenen DynDNS Projekt dem ich Ajax Request´s beibringe. ;)
Hi,
ich bin auf der Suche nach einem Javascript gewesen, welches mir genau deine hier aufgeführte Lösung erzeugt. Sprich regelmäßiges Abfragen von Daten auf dem Server (Liveticker).
Danke für dein wirklich klasse Video! Ich lese übrigens sehr gerne deine Blogartikel. Mach weiter so! Auch heute ist er durchaus noch interessant!
Viele Grüße
Christian
Finde es durchaus nett. Was ich selber gerade besonders mag ist, dass sich das Beispiel echt nur und ausschliesslich auf einen Ajax-Request bezieht.
Was ich selber gerne erstellen würde wäre z.B. einen Chat. Allerdings sind viele gute Tutorials auf Youtube leider auf Englisch und nur weniger viele auf Deutsch. Hinzu kommt, dass ich keine Probleme damit habe einem mehrteiligen Tutorial zu folgen (auch stundenlang), WENN die Quali nicht absolut unterste Schublade ist. Damit meine ich z.B. das das Micro so dermassen mies eingestellt ist oder eben qualitativ so schlecht ist, dass man mehr „Hall“ als Stimme hört. Eine schlechte Erfahrung die ich leider machen musste in der Hinsicht war, dass ich dann sogar ein 1a Tutorial zum Thema Chat in Deutsch gefunden hatte, dieses Tutorial dann allerdings dummer Weise nie vollendet wurde! Heisst besser kleine Schritte die man auch vollendet, als nen Megaprojekt, welches man nie abschliesen wird.
Darüber hinaus ist es auch extrem nett, wenn der Quellcode aller Dateien angehangen wird! So kann sich jeder im nachhinein alles ohne viel Arbeit anschauen. Ich würde Faulheit ja eig. nichtmal unterstützen wollen, aber für den Ersteller der den Quellcode ohnehin schon nach Vollendung eines Tut’s fertig auf dem Rechner hat ist es wohl nicht all zu viel Arbeit eben den Text anzuhängen, was wiederum dem Endnutzer zu gute kommt! ;)
Vor allem geht es nichtmal nur um Faulheit, sondern habe da auch Erfahrungen gesammelt, dass man in dem ein oder anderen Video Teilpassagen vom Quellcode nicht ganz sehen konnte. In so Fällen ist es dann schon mehr als angebracht den Text anzuhängen, da keine Lust auf Rätsel raten hat oder? Wäre wohl auch nicht der Sinn und Zweck, den man mit der Erstellung eines Tut’s verfolgt würde ich mal so sagen! :D
Alles in allem ist dein Video 1a! Quali ist definitiv akzeptabel finde ich für meinen Teil. Wer was anderes sagt….1. ist das hier unentgeldliche Arbeit die da geleistet wird und 2. schaut mal auf Youtube, welcher MÜLL euch da grossteils geboten wird….in this way NICE 1 und vielen Dank!
Was mich mal interessieren würde…was die Performance angeht….ist das Auslesen einer Datei, in der z.B. nur ein Timestamp eingetragen ist, Reccourcenfressender als eine Datenbankabfrage, wo ebenfalls nur ein Timestamp abgefragt wird oder wie sieht das aus?
Was die Performance hier angeht….klar geht es besser…wäre aber wohl kaum Zweckdientlich hier DAS perfekte Script zu posten, da dann vermutlich wieder einige nicht alles verstehen würden und/oder es den Rahmen sprengen würde.
Wer es besser haben will kann es auch selber so abändern, dass die Zeit nur einmal abgefragt wird z.B. alle 30 Minuten zum synchronisieren und den Rest der Zeit läuft es ebend über das Script ohne permanente Requests.