jQuery Tutorial (Teil 5) AJAX ihnen alle!

Am Ende unserer jQuery-Minitutorialserie wird es Zeit, dass wir uns eingehender mit einer der am häufigsten verwendeten Funktionen von jQuery befassen. Mit AJAX kann eine Website mit einem Server im Hintergrund 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, in denen diese Technik nützlich sein kann.

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

• Einführung: Was ist jQuery und warum sollten Sie sich darum kümmern? Machen Sie das Web interaktiv: Eine Einführung in jQuery Machen Sie das Web interaktiv: Eine Einführung in jQuery jQuery ist eine clientseitige Skriptbibliothek, die von fast jeder modernen Website verwendet wird - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber es ist die am meisten entwickelte, am meisten unterstützte und am weitesten verbreitete… Lesen Sie mehr
• JQuery Tutorial - Erste Schritte: Grundlagen und Selektoren jQuery Tutorial - Erste Schritte: Grundlagen und Selektoren Letzte 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, es ist an der Zeit, dass wir uns mit etwas Code schmutzig machen und erfahren haben, wie… Weiterlesen
• 2: Methoden Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Dies ist Teil einer laufenden Einführung in die jQuery-Webprogrammierserie. Teil 1 befasste sich mit den jQuery-Grundlagen, wie man sie in Ihr Projekt einfügt, und Selektoren. In Teil 2 fahren wir mit… Weiterlesen
• 3: Warten auf Seitenladefunktionen und anonyme Funktionen Einführung in jQuery (Teil 3): Warten auf die zu ladende Seite und anonyme Funktionen Einführung in jQuery (Teil 3): Warten auf die zu ladende Seite und anonyme Funktionen jQuery ist wohl eine unabdingbare Fähigkeit Ich bin der moderne Webentwickler und ich hoffe, Ihnen in dieser kurzen Miniserie das Wissen vermitteln zu können, das Sie in Ihren eigenen Webprojekten einsetzen können. In… Lesen Sie weiter
• 4: Events jQuery Tutorial (Teil 4) - Event Listeners jQuery Tutorial (Teil 4) - Event Listeners Heute werden wir uns einen Schritt weiterbilden und wirklich zeigen, wo jQuery - Events auftaucht. Wenn Sie die vorherigen Tutorials befolgt haben, sollten Sie jetzt einigermaßen gut mit dem grundlegenden Code vertraut sein… Lesen Sie weiter
• Debuggen mit Chrome-Entwicklertools Probleme mit der Website von Chrome Mit Chrome-Entwicklertools oder Firebug herausfinden Probleme mit der Chrome-Entwicklertools oder Firebug herausfinden Wenn Sie meine jQuery-Tutorials bisher befolgt haben, sind möglicherweise einige Code-Probleme aufgetreten und Sie wissen nicht, wie um sie zu reparieren Bei einem nicht funktionalen Code ist es sehr… Lesen Sie mehr

Ein Was?

AJAX ist ein Akronym 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 zuvor bemerkt, aber wenn eine Website sich dynamisch aktualisiert, besteht eine gute Chance, dass sie AJAX dazu benutzt.

Vor AJAX musste jede Form der Interaktion mit einem Server, z. B. das Abrufen neuer Daten oder das Buchen von Informationen vom Benutzer, mit einem neuen Seitenladevorgang und Umleitungen durchgeführt werden.

Heute werden wir uns mit dem Flickr-Dienst eines Drittanbieters befassen, von dem wir AJAX verwenden können, um Bilder mit einem JSON-Datentyp abzurufen. Es spielt keine Rolle, wie Flickr die empfangende Seite der Dinge implementiert, denn das ist die Schönheit von APIs - Alles, was wir wissen müssen, ist eine API-URL, welche Art von Daten wir zurückbekommen und wie man sie manipuliert.

Zur weiteren Lektüre habe ich vor einiger Zeit ein weiteres Tutorial zum Umgang mit AJAX in WordPress für die Übermittlung eines Kontaktformulars verfasst “Klicken Sie auf den Link, um zu einer anderen Seite zu gelangen” Struktur des Internets 1.0. Es ermöglicht Websites das dynamische Abrufen und Anzeigen von Inhalten ohne den Benutzer… Lesen Sie mehr, so dass Sie dies auch überprüfen möchten. Dazu müssen Sie Ihren eigenen PHP-Handler schreiben und diesen in den “offiziell” WordPress AJAX-Prozess.

Die AJAX-Methode

Hier ist das grundlegende Format einer AJAX-Anfrage:

$ .ajax (type: "GET oder POST", URL: "API oder Ihre PHP-Handler-URL"), Datentyp: "JSON", // abhängig davon, welche Art von Daten Sie zurückgeben möchten, aber JSON ist die am häufigsten verwendeten Daten: // ein Satz Schlüssel: "Wert" -Paare, Erfolg: Funktion (Daten) // eine erfolgreiche Datenrückgabe durchführen, Fehler: Funktion (Nachricht) // Fehler behandeln);

Das sieht auf den ersten Blick recht komplex aus - was nicht durch die fehlende Einrückung dieses Code-Plugins unterstützt wird -, aber Sie werden sehen, wie einfach es ist, wenn Sie zu einem Beispiel aus der realen Welt kommen.

Flickr API AJAX

In diesem Beispiel greifen wir die Tags auf, die dem aktuellen WordPress-Beitrag zugeordnet sind, und holen einige Bilder ab, die am Ende des Artikels angehängt werden sollen. In der jQuery-Dokumentation gibt es ein ähnliches Beispiel, es wird jedoch eine Abkürzungsmethode verwendet getJSON () anstatt ein vollständiges AJAX-Format zu erklären. Dies ist zwar eine gültige Methode, wenn Sie wissen, dass Sie nur JSON-Daten zurückbekommen, aber ich glaube, dass es wichtiger ist, die AJAX-Methode zu erlernen.

Zuerst eins single.php und wir versuchen, eine einfache, durch Kommas getrennte Liste der aktuellen Post-Tags auszugeben. 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 () Echo sie direkt vorformatiert. Stattdessen verwenden wir get_the_tags ():

Name.","; ?>

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

An diesem Punkt erfolgt die Ausgabe an die Browserkonsole oder eine Warnmeldung, falls vorhanden. Um tatsächlich etwas mit den zurückgegebenen Daten zu tun, fügen Sie einen Ort für die platzierten Bilder hinzu:

Und editiere das Erfolg Parameter des AJAX-Aufrufs zur Iteration über die Artikel die zurückgegeben werden.

$ .each (data.items, function (i, item) if (i == 3) gibt false zurück; // stop, wenn wir 3 $ ("# flickr") haben. append (""););

Und da haben wir es. Wurden anhängen 3 Elemente aus dem zurückgegebenen JSON-Objekt (die Daten sind null indiziert. Wenn Sie also zu Element 3 wechseln, 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, daher kenne ich 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 der vollständige Code in dieser PasteBin. Beachten Sie, dass die zurückgegebenen Ergebnisse im Grunde Junk sind - mein Posting enthielt das Tag DIY Für ein begehbarer Hühnerstall, und Flickr hat mir das DIY-Stricken gegeben. Nett. Dies ist natürlich eine der Hürden, wenn Sie mit einer API arbeiten und Dinge automatisch erledigen. Sie können Ihre Posts entweder neu kennzeichnen (eine beträchtliche Verpflichtung), die Anfrage ändern und danach fragen “alles” Tags statt “irgendein” (In diesem Fall wahrscheinlich nichts zurückgeben) oder ein neues benutzerdefiniertes Feld angeben, in das Sie ein zielgerichtetes Schlüsselwort zur Verwendung mit der API angeben (wahrscheinlich das einfachste)..

SEO-Überlegungen

Dies ist kein wichtiger Punkt, aber da Sie sich mit der Entwicklung von Websites befassen, sollten Sie Folgendes erwähnen: Suchmaschinen indizieren keine Inhalte, die beim Laden der Seite nicht vorhanden sind, wie etwa bei AJAX. Das absolut Schlimmste, was Sie tun könnten, wäre eine vollständige AJAXifizierung Ihres Blogs, so dass die Startseite lediglich ein iframe-ähnlicher Container für alle Inhalte ist, die dynamisch geladen werden. Verwenden Sie AJAX sinnvoll, um verbessern der Seiteninhalt, nicht als Ersatz. Oder sich drohenden Konsequenzen stellen.

Danke fürs Lesen, und ich hoffe, ich habe Ihnen einige Ideen gegeben. Natürlich ist Flickr nicht die einzige API - nur Google “öffentliche API” und Sie werden mit Sicherheit mehr Dinge finden, mit denen Sie spielen könnten.

Nächste Woche wird die letzte Lektion in der jQuery Tutorial-Reihe sein, während wir das Plugin für die jQuery-Benutzeroberfläche testen. Kommentare und Vorschläge sind wie immer willkommen. Wenn Sie eine Frage haben, von der andere profitieren werden, können Sie sie auf unserer Answers-Site veröffentlichen.

Erfahren Sie mehr über: jQuery, Programmierung, Webentwicklung.