Am Ende unserer jQuery-Mini-Tutorial-Reihe ist es an der Zeit, dass wir uns eine der am häufigsten verwendeten Funktionen von jQuery genauer ansehen. AJAX ermöglicht einer Website, mit einem Server im Hintergrund zu kommunizieren, ohne dass die gesamte Seite neu geladen werden muss. Von unendlichen Status-Streams im Facebook-Stil bis hin zur Übermittlung von Formulardaten gibt es eine Million verschiedene reale Situationen, in denen diese Technik nützlich sein kann.
Wenn Sie die vorherigen Tutorials nicht gelesen haben, schlage ich vor, dass Sie dies tun, bevor Sie das Problem lösen, wenn Sie aufeinander aufbauen.
- Einleitung: Was ist jQuery und warum sollte es dich interessieren? Das Web interaktiv gestalten: Eine Einführung in jQuery Das Web interaktiv gestalten: Eine Einführung in jQuery jQuery ist eine clientseitige Skriptbibliothek, die fast jede moderne Website verwendet - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber es ist am weitesten entwickelt, am meisten unterstützt und am meisten verwendet .... Lesen Sie mehr
- 1: Selektoren und Grundlagen jQuery Tutorial - Erste Schritte: Grundlagen & Selektoren jQuery Tutorial - Erste Schritte: Grundlagen & Selektoren Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es so großartig ist. Diese Woche, denke ich, ist es an der Zeit, dass wir uns mit Code die Hände schmutzig machen und gelernt haben, wie ... Read More
- 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 für Anfänger in die jQuery-Webprogrammierungsreihe. Teil 1 behandelte die Grundlagen von jQuery, wie man es in Ihr Projekt einfügt, und Selektoren. In Teil 2 werden wir mit ... weiterlesen
- 3: Warten auf Seitenladung 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 wesentliche Fähigkeit für der moderne Webentwickler, und in dieser kurzen Mini-Serie hoffe ich, Ihnen das Wissen zu geben, um es in Ihren eigenen Webprojekten zu nutzen. In ... Lesen Sie mehr
- 4: Ereignisse jQuery Tutorial (Teil 4) - Event Listener jQuery Tutorial (Teil 4) - Event Listeners Heute werden wir es eine Stufe höher und zeigen, wo jQuery glänzt - Ereignisse. Wenn Sie die vorherigen Tutorials befolgt haben, sollten Sie jetzt ein ziemlich gutes Verständnis des grundlegenden Codes haben ... Lesen Sie mehr
- Debuggen mit Chrome-Entwicklertools Ermitteln von Website-Problemen mit Chrome-Entwicklertools oder Firebug Ausfüllen von Website-Problemen mit Chrome-Entwicklertools oder Firebug Wenn Sie bisher meinen jQuery-Lernprogrammen gefolgt sind, haben Sie möglicherweise bereits einige Codeprobleme kennengelernt um sie zu reparieren. Wenn es mit einem nicht-funktionalen Bit Code konfrontiert wird, ist es sehr ... Read More
Ein Was?
AJAX ist ein Akronym für Asynchronous Javascript und XML, aber das Schlüsselwort hier ist asynchron . Asynchron bezieht sich auf die Tatsache, dass diese Anforderungen im Hintergrund auftreten und die Browsererfahrung des Benutzers nicht unterbrechen. Sie haben es wahrscheinlich noch nie zuvor bemerkt, aber wenn sich eine Website dynamisch aktualisiert, gibt es eine gute Chance, dass sie AJAX dazu verwendet.
Vor AJAX hätte jede Art von Interaktion mit einem Server, sei es das Abrufen neuer Daten oder das Zurücksenden von Informationen vom Benutzer, mit einer neuen Seitenladung und Umleitungen durchgeführt werden müssen.
Heute werden wir uns einen Drittanbieter-Dienst, Flickr, anschauen - von dem wir AJAX verwenden können, um einige Bilder mit einem JSON-Datentyp zu holen. Es spielt keine Rolle, wie Flickr die empfangende Seite der Dinge implementiert, denn das ist die Schönheit der APIs - alles, was wir wissen müssen, ist eine API-URL, welche Art von Daten wir zurückbekommen und wie wir sie manipulieren.
Für weitere Lektüre, schrieb ich vor einiger Zeit ein weiteres Tutorial über die Handhabung von AJAX in WordPress für ein Kontaktformular Ein Tutorial über die Verwendung von AJAX in WordPress Ein Tutorial über die Verwendung von AJAX in WordPress AJAX ist eine bemerkenswerte Web-Technologie, die uns über den einfachen "Klick-Link, gehen Sie zu einer anderen Seite "Struktur von The Internet 1.0. Es ermöglicht Websites, Inhalte ohne den Benutzer dynamisch abzurufen und anzuzeigen ... Lesen Sie mehr, also sollten Sie das auch überprüfen; Sie müssen Ihren eigenen PHP-Handler schreiben und diesen in den "offiziellen" WordPress AJAX-Prozess integrieren.
Die AJAX-Methode
Hier ist das grundlegende Format einer AJAX-Anfrage:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Das sieht zunächst ziemlich komplex aus - nicht unterstützt durch das Fehlen von Einrückungen aus diesem Code-Plugin - aber Sie werden sehen, wie einfach es ist, wenn Sie zu einem realen Beispiel kommen.
Flickr API AJAX
In diesem Beispiel werden wir die mit dem aktuellen WordPress-Post verknüpften Tags abrufen und einige Bilder abrufen, die am Ende des Artikels angehängt werden. Es gibt ein ähnliches Beispiel in der jQuery-Dokumentation, aber es verwendet eine Abkürzung namens getJSON (), anstatt ein vollständiges AJAX-Format zu erklären. Während dies eine gute Möglichkeit ist, Dinge zu tun, wenn Sie wissen, dass Sie nur JSON-Daten zurückbekommen werden, ist es meiner Meinung nach wichtiger, die eigentliche AJAX-Methode zu lernen, so werden wir das machen.
Erstens, eine nach oben single.php und wir werden versuchen, eine einfache Komma separate Liste der aktuellen Post-Tags zu echo. Normalerweise würden Sie the_tags () dazu verwenden, aber das ist nicht gut, da wir diese schließlich als Variable speichern wollen, während the_tags () sie direkt vorformatiert . Stattdessen verwenden wir get_the_tags ():
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 den Einzug beizubehalten, ist der Code in diesem PasteBin verfügbar).
An diesem Punkt wird lediglich die Ausgabe an die Browser-Konsole oder eine Fehlermeldung ausgegeben, sofern eine vorhanden ist. Um etwas mit den zurückgegebenen Daten zu tun, fügen Sie einen Speicherort für die platzierten Bilder hinzu:
Und bearbeiten Sie den Erfolgsparameter des AJAX-Aufrufs, um über die zurückgegebenen Elemente zu iterieren.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); Und da haben wir es. Wir fügen 3 Elemente aus dem zurückgegebenen JSON-Objekt an (die Daten sind null-indexiert. Wenn wir also zu Punkt 3 kommen, sind wir tatsächlich beim vierten Punkt. Verwirrend, ich weiß. An diesem Punkt verwenden wir return false, um herauszuspringen von jedem () Iterator). Ich habe bereits den Inhalt der Objekte untersucht, die zurückgegeben werden, daher kenne ich die Datenstruktur, und ich extrahiere nur einen Link und eine IMG-Referenz. Wenn Sie wissen möchten, was noch zurückgegeben wird, werfen Sie einfach ein console.log (Element) hinein.
Hier sind die Ergebnisse auf meiner Testseite und der vollständige Code in diesem PasteBin. Beachten Sie, dass die zurückgegebenen Ergebnisse im Grunde Junk sind - mein Beitrag enthielt das Tag DIY für einen Walk-in-Chicken Run, und Flickr hat mir DIY-Stricken gegeben. Nett. Natürlich ist dies eine der Hürden, die Sie haben, wenn Sie mit einer API arbeiten und Dinge automatisch erledigen. Sie könnten Ihre Posts entweder neu taggen (eine beachtliche Aufgabe), die Anfrage ändern, um nach "alle" Tags zu fragen, anstatt nach "any" (wahrscheinlich wird in diesem Fall nichts zurückgegeben), oder Sie erhalten ein neues benutzerdefiniertes Feld würde ein zielgerichtetes Schlüsselwort angeben, das mit der API verwendet werden soll (wahrscheinlich das einfachste).
SEO Überlegungen
Dies ist kein wichtiger Punkt, aber da Sie sich mit der Entwicklung von Websites befassen, sollte es erwähnt werden: Suchmaschinen indexieren keinen Inhalt, der beim Laden der Seite nicht existiert, wie etwa alles, was über AJAX erfolgt. Das Schlimmste, was Sie tun könnten, wäre, Ihren Blog vollständig zu AJAXisieren, so dass die Homepage nur ein iframe-ähnlicher Container für den gesamten Inhalt ist, der dynamisch geladen wird. Verwenden Sie AJAX mit Bedacht, um den Seiteninhalt zu verbessern, nicht als Ersatz . Oder mit schlimmen Folgen konfrontiert werden.
Danke fürs Lesen, und ich hoffe, ich habe dir ein paar Ideen gegeben. Natürlich ist Flickr nicht die einzige API, die es gibt - nur Google " public API " und du wirst sicher mehr Dinge finden, mit denen du herumspielen kannst.
Nächste Woche wird die letzte Lektion in der jQuery Tutorial-Reihe sein, wenn wir uns das jQuery UI-Plugin ansehen. Wie immer sind Kommentare und Vorschläge willkommen; Wenn Sie eine Frage haben, von der andere profitieren, sollten Sie sie auf unserer Answers-Website veröffentlichen.