JQuery Tutorial (del 5): AJAX dem alla!

Annons

När vi nära slutet av vår mini-tutorial-serie för jQuery är det dags att ta en mer djupgående titt på en av de mest använda funktionerna i jQuery. AJAX tillåter en webbplats att kommunicera med en server i bakgrunden utan att hela sidan behöver laddas om. Från oändliga statusströmmar i Facebook-stil till att skicka in formulärdata finns det en miljon olika verkliga situationer där denna teknik kan vara användbar.

Om du inte har läst de tidigare handböckerna föreslår jag att du gör det innan du tacklar detta när de bygger på varandra.

• Inledning: Vad är jQuery och varför ska du bry dig? Att göra webben interaktiv: en introduktion till jQueryjQuery är ett skriptbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är det mest utvecklade, mest stödda och mest använda ... Läs mer
• 1: Väljare och grunder jQuery Tutorial - Komma igång: Basics & SelectorsFörra veckan talade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag det är dags att vi blir smutsiga med lite kod och lärde oss hur ...
  instagram viewer
  Läs mer
• 2: Metoder Introduktion till jQuery (del 2): ​​Metoder och funktionerDetta är en del av en pågående introduktion av nybörjare till jQuery webbprogrammeringsserier. Del 1 omfattade grunderna för jQuery för hur du inkluderar det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer
• 3: Väntar på sidbelastning och anonyma funktioner Introduktion till jQuery (del 3): Väntar på att sidan laddas och anonyma funktionerjQuery är utan tvekan en väsentlig färdighet för den moderna webbutvecklaren, och i denna korta miniserie hoppas jag ge dig kunskap om att börja använda det i dina egna webbprojekt. I... Läs mer
• 4: Händelser jQuery Tutorial (del 4) - Lyssnar på evenemangIdag kommer vi att sparka upp ett hack och verkligen visa var jQuery lyser - händelser. Om du följde tidigare tutorials bör du nu ha en ganska god förståelse för grundkoden ... Läs mer
• Felsökning med Chrome Developer Tools Ta reda på problem med webbplatsen med Chrome Developer Tools or FirebugOm du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vetat hur du fixar dem. När du står inför en icke-funktionell kodkod, är det mycket ... Läs mer

En Vad?

AJAX är en förkortning för Asynkron Javascript och XML, men nyckelordet här är asynkron. Asynkron hänvisar till det faktum att dessa förfrågningar inträffar i bakgrunden och inte avbryter användarens surfupplevelse. Du har antagligen aldrig ens lagt märke till det förut, men om en webbplats uppdaterar sig själv dynamiskt, finns det en god chans att den använder AJAX för att göra det.

Innan AJAX, någon form av interaktion med en server, vare sig det hämtar ny data eller skickar tillbaka information från användaren, måste det ha gjorts med en ny sidbelastning och omdirigeringar.

Idag ska vi titta på att använda en tredje parts tjänst, Flickr - från vilken vi kan använda AJAX för att hämta några bilder med en JSON-datatyp. Det spelar ingen roll hur Flickr implementerar den mottagande sidan av saker, för det är skönheten i API - allt vi behöver veta är en API-URL, vilken typ av data vi kommer att få tillbaka och hur vi kan hantera den.

För ytterligare läsning skrev jag en ny tutorial för ett tag sedan om hantering av AJAX i WordPress för att skicka ett kontaktformulär En handledning om hur du använder AJAX i WordPressAJAX är en anmärkningsvärd webbteknologi som flyttade oss bortom den enkla "klicklänken, gå till en annan sida" strukturen för Internet 1.0. Det gör det möjligt för webbplatser att dynamiskt hämta och visa innehåll utan användare... Läs mer , så du kanske vill kolla in det också; det handlar om att skriva din egen PHP-hanterare och integrera den i den "officiella" WordPress AJAX-processen.

AJAX-metoden

Här är det grundläggande formatet för en AJAX-begäran:

$ .ajax ({typ: "GET or POST", url: "API eller din PHP-hanterares URL", datatyp: "JSON", // beroende på vilken typ av data du vill ha tillbaka, men JSON är den mest vanliga data: {// en uppsättning nyckel: "värde" -par}, framgång: funktion (data) {// hantera en framgångsrik återgivning av data}, fel: funktion (meddelande) {// hantera felet } });

Det här ser ganska komplicerat ut till att börja med - inte hjälpt av bristen på intryck från det här kodpluginet - men du ser hur lätt det är när du kommer till ett verkligt exempel.

Flickr API AJAX

I det här exemplet kommer vi ta tag i taggarna som är associerade med det nuvarande WordPress-inlägget och hämta några bilder för att läggas till i slutet av artikeln. Det finns en liknande exempel i jQuery-dokumentationen, men det använder en genvägsmetod som heter getJSON () snarare än att förklara ett fullständigt AJAX-format. Även om detta är ett giltigt sätt att göra saker om du vet att du bara kommer att få tillbaka JSON-data, tycker jag att det är viktigare att lära sig själva AJAX-metoden, så det är hur vi gör det.

Först en upp single.php och vi kommer att försöka åka ut en enkel komma-separat lista med de aktuella inläggstaggarna. Vanligtvis skulle du använda the_tags () att göra detta, men det är inte bra eftersom vi så småningom vill lagra dessa som en variabel the_tags () ekar dem rakt ut förformaterade. Istället kommer vi att använda get_the_tags ():

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

Det här fungerar bra, så vi kommer att skriva ut detta inuti en AJAX-begäran till Flickr API-URL på följande sätt (notera, detta är en skärmdump - för att bevara intryckning är koden tillgänglig på den här PasteBin).

Just nu gör det allt för att mata ut till webbläsarkonsolen eller varna ett felmeddelande om det finns ett. För att faktiskt göra något med den returnerade informationen, lägg till någonstans för att bilderna ska placeras:

Och redigera Framgång parameter för AJAX-samtalet för att iterera över objekt som returneras.

$ .each (data.items, function (i, item) {if (i == 3) returnera falsk; // stopp när vi har 3 $ ("# flickr"). bifoga (""); });

Och där har vi det. vi är efterföljande patent 3 objekt från det returnerade JSON-objektet (uppgifterna är nollindexerade, så om vi kommer till objekt 3 är vi faktiskt vid den fjärde artikeln. Förvirrande, jag vet. Vid den tiden använder vi returnera falskt att hoppa ut ur varje() iterator) .Jag har redan granskat innehållet i de objekt som returneras, så jag känner till datastrukturen och jag tar bara ut en länk och IMG-referens. Om du är intresserad av att veta vad mer som returneras, bara kasta en console.log (artikel) där inne.

Här är resultaten på min testwebbplats och fullständig kod på denna PasteBin. Lägg märke till att resultaten som returneras i grund och botten är skräp - mitt inlägg inkluderade taggen DIY för en walk-in kycklingoch Flickr har gett mig DIY stickning. Trevlig. Naturligtvis är detta ett av de hinder du står inför när du arbetar med ett API och gör saker automatiskt; du kan antingen märka dina inlägg (ett betydande åtagande), ändra begäran om att be om "alla" taggar istället för "någon" (troligen kommer att returnera ingenting i det här fallet), eller komma med ett nytt anpassat fält som du skulle ange ett riktat nyckelord som ska användas med API: n (förmodligen lättast).

SEO-överväganden

Detta är inte en viktig sak, men eftersom du är ute efter att utveckla webbplatser borde det vara det nämnde: sökmotorer indexerar inte innehåll som inte finns vid sidbelastning, till exempel allt gjort via AJAX. Det absolut värsta du kan göra skulle vara att AJAXify din blogg helt så att hemsidan bara var en iframe-liknande behållare för allt innehåll som laddas in dynamiskt. Använd AJAX klokt, för att förbättra sidinnehållet, inte som en ersättning. Eller möta allvarliga konsekvenser.

Tack för att du läste, och jag hoppas att jag har gett er några idéer. Naturligtvis är Flickr inte det enda API där ute - bara Google "offentligt API”Och du är säker på att hitta fler saker du kan leka med.

Nästa vecka kommer den sista lektionen i jQuery Tutorial-serien när vi kolla in jQuery UI-plugin. Som alltid är kommentarer och förslag välkomna; om du har en fråga som andra kommer att dra nytta av, kan du överväga att lägga den på vår Answers-webbplats.