JQuery Tutorial (Teil 5): AJAX Them All!

Werbung

Gegen Ende unserer jQuery-Mini-Tutorial-Reihe ist es an der Zeit, uns eine der am häufigsten verwendeten Funktionen von jQuery genauer anzusehen. Mit AJAX kann eine Website im Hintergrund mit einem Server kommunizieren, ohne dass die gesamte Seite neu geladen werden muss. Von unendlichen Statusströmen im Facebook-Stil bis zum Senden von Formulardaten gibt es eine Million verschiedene Situationen im wirklichen Leben, in denen diese Technik nützlich sein kann.

Wenn Sie die vorherigen Tutorials noch nicht gelesen haben, empfehlen wir Ihnen, dies zu tun, bevor Sie sich damit befassen, da sie aufeinander aufbauen.

• Einführung: Was ist jQuery und warum sollte es Sie interessieren? Das Web interaktiv machen: Eine Einführung in jQueryjQuery ist eine clientseitige Skriptbibliothek, die fast jede moderne Website verwendet - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber die am weitesten entwickelte, am meisten unterstützte und am weitesten verbreitete ... Weiterlesen
instagram viewer
• 1: Selektoren und Grundlagen jQuery Tutorial - Erste Schritte: Grundlagen und SelektorenLetzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche, denke ich, ist es Zeit, dass wir uns mit etwas Code die Hände schmutzig machen und lernen, wie ... Weiterlesen
• 2: Methoden Einführung in jQuery (Teil 2): ​​Methoden und FunktionenDies ist Teil einer fortlaufenden Einführung für Anfänger in die jQuery-Webprogrammierungsserie. Teil 1 befasste sich mit den jQuery-Grundlagen zum Einfügen in Ihr Projekt und den Selektoren. In Teil 2 fahren wir fort mit ... Weiterlesen
• 3: Warten auf Seitenladen und anonyme Funktionen Einführung in jQuery (Teil 3): Warten auf das Laden der Seite und anonyme FunktionenjQuery ist wohl eine wesentliche Fähigkeit für den modernen Webentwickler, und ich hoffe, Ihnen in dieser kurzen Miniserie das Wissen zu vermitteln, wie Sie es in Ihren eigenen Webprojekten einsetzen können. Im... Weiterlesen
• 4: Ereignisse jQuery Tutorial (Teil 4) - Ereignis-ListenerHeute werden wir noch einen Schritt weiter gehen und wirklich zeigen, wo jQuery glänzt - Ereignisse. Wenn Sie den vorherigen Tutorials gefolgt sind, sollten Sie jetzt ein ziemlich gutes Verständnis des Basiscodes haben ... Weiterlesen
• Debuggen mit Chrome Developer Tools Finden Sie Website-Probleme mit Chrome Developer Tools oder Firebug herausWenn Sie bisher meinen jQuery-Tutorials gefolgt sind, sind möglicherweise bereits einige Codeprobleme aufgetreten, und Sie wissen nicht, wie Sie diese beheben können. Wenn man mit einem nicht funktionierenden Code konfrontiert wird, ist es sehr ... Weiterlesen

Ein Was?

AJAX ist eine Abkürzung für Asynchrones Javascript und XML, aber das Schlüsselwort hier ist asynchron. Asynchron bezieht sich auf die Tatsache, dass diese Anforderungen im Hintergrund auftreten und die Browser-Erfahrung des Benutzers nicht unterbrechen. Sie haben es wahrscheinlich noch nie bemerkt, aber wenn sich eine Website dynamisch aktualisiert, besteht eine gute Chance, dass AJAX dazu verwendet wird.

Vor AJAX hätte jede Form der Interaktion mit einem Server, sei es das Abrufen neuer Daten oder das Zurücksenden von Informationen vom Benutzer, mithilfe eines neuen Seitenladevorgangs und neuer Umleitungen erfolgen müssen.

Heute werden wir uns mit der Verwendung eines Drittanbieter-Dienstes, Flickr, befassen, von dem wir AJAX verwenden können, um einige Bilder mithilfe eines JSON-Datentyps abzurufen. Es spielt eigentlich keine Rolle, wie Flickr die empfangende Seite der Dinge implementiert, denn das ist das Schöne an APIs - Alles, was wir wissen müssen, ist eine API-URL, welche Art von Daten wir zurückerhalten und wie wir sie bearbeiten können.

Zur weiteren Lektüre habe ich vor einiger Zeit ein weiteres Tutorial darüber geschrieben Umgang mit AJAX in WordPress für die Übermittlung eines Kontaktformulars Ein Tutorial zur Verwendung von AJAX in WordPressAJAX ist eine bemerkenswerte Web-Technologie, die uns über den einfachen "Klick-Link, gehe zu einer anderen Seite" hinaus bewegt hat. Struktur des Internets 1.0. Es ermöglicht Websites das dynamische Abrufen und Anzeigen von Inhalten ohne die Nutzer... Weiterlesen Vielleicht möchten Sie das auch überprüfen. Es geht darum, einen eigenen PHP-Handler zu schreiben und diesen in den „offiziellen“ WordPress AJAX-Prozess zu integrieren.

Die AJAX-Methode

Hier ist das Grundformat einer AJAX-Anfrage:

$ .ajax ({Typ: "GET oder POST", URL: "API oder Ihre PHP-Handler-URL", Datentyp: "JSON", // abhängig davon, welche Art von Daten Sie zurückhaben möchten, aber JSON ist die meiste gemeinsame Daten: {// eine Reihe von Schlüssel: "Wert" -Paaren}, Erfolg: Funktion (Daten) {// erfolgreiche Rückgabe von Daten}, Fehler: Funktion (Nachricht) {// Fehler behandeln } });

Dies sieht auf den ersten Blick ziemlich komplex aus - nicht unterstützt durch das Fehlen von Einrückungen in diesem Code-Plugin -, aber Sie werden sehen, wie einfach es ist, zu einem Beispiel aus der Praxis zu gelangen.

Flickr API AJAX

In diesem Beispiel greifen wir auf die Tags zu, die dem aktuellen WordPress-Beitrag zugeordnet sind, und rufen einige Bilder ab, die am Ende des Artikels angehängt werden sollen. Da ist ein ähnliches Beispiel in der jQuery-Dokumentation, verwendet aber eine Abkürzungsmethode namens getJSON () anstatt ein vollständiges AJAX-Format zu erklären. Dies ist zwar eine gültige Vorgehensweise, wenn Sie wissen, dass Sie nur JSON-Daten zurückerhalten werden. Ich bin jedoch der Meinung, dass das Erlernen der eigentlichen AJAX-Methode wichtiger ist. So werden wir es also tun.

Zuerst eins auf single.php und wir werden versuchen, eine einfache, durch Kommas getrennte Liste der aktuellen Post-Tags wiederzugeben. Normalerweise würden Sie verwenden the_tags () dies zu tun, aber das ist nicht gut, da wir diese schließlich als Variable speichern möchten the_tags () gibt sie direkt vorformatiert wieder. Stattdessen verwenden wir get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist als $ tag) { echo $ tag-> name. ","; }

Dies funktioniert gut, daher geben wir dies innerhalb einer AJAX-Anfrage wie folgt an die Flickr-API-URL aus (Hinweis: Dies ist ein Screenshot. Um die Einrückung beizubehalten, ist der Code unter verfügbar dieser PasteBin).

Zu diesem Zeitpunkt reicht alles aus, um an die Browserkonsole auszugeben oder eine Fehlermeldung auszulösen, falls vorhanden. Um tatsächlich etwas mit den zurückgegebenen Daten zu tun, fügen Sie eine Stelle hinzu, an der die Bilder platziert werden sollen:

Und bearbeiten Sie die Erfolg Parameter des AJAX-Aufrufs zum Durchlaufen des Artikel das werden zurückgegeben.

$ .each (data.items, function (i, item) {if (i == 3) return false; // hör auf, wenn wir 3 $ haben ("# flickr"). append (""); });

Und da haben wir es. Wurden anhängen 3 Elemente aus dem zurückgegebenen JSON-Objekt (die Daten sind mit Null indiziert. Wenn Sie also zu Element 3 gelangen, befinden wir uns tatsächlich beim vierten Element. Verwirrend, ich weiß. An diesem Punkt verwenden wir falsch zurückgeben aus dem springen jeder() Iterator). Ich habe bereits den Inhalt der zurückgegebenen Objekte untersucht, kenne also die Datenstruktur und extrahiere nur einen Link und eine IMG-Referenz. Wenn Sie wissen möchten, was noch zurückgegeben wird, werfen Sie einfach ein console.log (item) da drin.

Hier sind die Ergebnisse auf meiner Testseite und die vollständiger Code in diesem PasteBin. Beachten Sie, dass die zurückgegebenen Ergebnisse im Grunde genommen Junk sind - mein Beitrag enthielt das Tag DIY Für ein begehbarer Hühnerlaufund Flickr hat mir DIY Stricken gegeben. Nett. Dies ist natürlich eine der Hürden, mit denen Sie konfrontiert sind, wenn Sie mit einer API arbeiten und Dinge automatisch erledigen. Sie können entweder Ihre Posts neu markieren (ein erhebliches Unterfangen) oder die Anfrage ändern, um nach "allen" Tags anstelle von "any" zu fragen (wahrscheinlich zurückkehren) in diesem Fall nichts) oder ein neues benutzerdefiniertes Feld erstellen, für das Sie ein Zielschlüsselwort angeben würden, das mit der API verwendet werden soll (wahrscheinlich das am einfachsten).

SEO Überlegungen

Dies ist kein wichtiger Punkt, aber da Sie im Bereich der Entwicklung von Websites tätig sind, sollte dies der Fall sein Erwähnt: Suchmaschinen indizieren keine Inhalte, die beim Laden der Seite nicht vorhanden sind, z über AJAX. Das absolut Schlimmste, was Sie tun könnten, wäre, Ihr Blog vollständig zu AJAXifizieren, sodass die Homepage lediglich ein iframe-ähnlicher Container für den gesamten Inhalt ist, der dynamisch geladen wird. Verwenden Sie AJAX mit Bedacht verbessern der Seiteninhalt, nicht als Ersatz. Oder mit schlimmen Konsequenzen konfrontiert sein.

Vielen Dank fürs Lesen und ich hoffe, ich habe Ihnen einige Ideen gegeben. Natürlich ist Flickr nicht die einzige API da draußen - nur Google “öffentliche API"Und Sie werden sicher mehr Dinge finden, mit denen Sie herumspielen könnten.

Nächste Woche wird die letzte Lektion in der jQuery Tutorial-Reihe sein, wenn wir uns das jQuery UI-Plugin ansehen. Kommentare und Vorschläge sind nach wie vor willkommen. Wenn Sie eine Frage haben, von der andere profitieren, können Sie sie auf unserer Answers-Website veröffentlichen.