internet

jQuery handledning (del 5) AJAX dem alla!

jQuery handledning (del 5) AJAX dem alla! / internet

När vi nära slutet av vår jQuery mini-tutorial-serie är det dags att vi tog en djupare 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 måste laddas om. Från oändliga statusströmmar i Facebook-stil för att skicka formulärdata finns det en miljon olika verkliga situationer där denna teknik kan vara användbar.

Om du inte har läst de föregående handledningarna föreslår jag att du gör det innan du hanterar det som de bygger på varandra.

  • Introduktion: Vad är jQuery och varför ska du bry dig? Att göra webben interaktiv: En introduktion till jQuery Att göra webben interaktiv: En introduktion till jQuery jQuery är ett skrivbibliotek 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 den mest utvecklade, mest stödda och mest använda ... Läs mer
  • 1: Väljare och grunder jQuery-handledning - Komma igång: Grunder och väljare jQuery Handledning - Komma igång: Grunder och valörer I förra veckan pratade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag att det är dags att vi fick våra händer smutsiga med lite kod och lärde oss hur ... Läs mer
  • 2: Metoder Introduktion till jQuery (del 2): ​​Metoder och funktioner Introduktion till jQuery (Del 2): ​​Metoder och funktioner Detta är en del av en pågående nybörjare introduktion till jQuery webbprogrammeringsserier. Del 1 omfattade jQuery-grunderna om hur man ska inkludera det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer
  • 3: Väntar på sidlastning och anonyma funktioner Introduktion till jQuery (Del 3): Väntar på sidan för att ladda och anonyma funktioner Introduktion till jQuery (del 3): Väntar på sidan för att ladda och anonyma funktioner jQuery är förmodligen en viktig färdighet för den moderna webbutvecklaren, och i denna korta mini-serie hoppas jag ge dig kunskapen för att börja använda den i dina egna webbprojekt. I ... Läs mer
  • 4: Händelser jQuery-handledning (del 4) - Händelselysare jQuery-handledning (del 4) - Händelselyttare Idag ska vi sparka upp det och se hur jQuery lyser - händelser. Om du följde tidigare tutorials, borde du nu ha en ganska bra förståelse av grundläggande koden ... Läs mer
  • Felsökning med verktyget för Chrome-utvecklare Uträtta webbproblem med verktygen för Chrome-utvecklare eller Firebug Utvärdera webbproblem med Chrome Developer Tools eller Firebug Om du har följt mina jQuery-tutorials hittills har du kanske redan stött på några kodproblem och inte vet hur att fixa dem. När man möter en icke-funktionell kodbit, är det väldigt ... Läs mer

En Vad?

AJAX är en akronym för Asynkron Javascript och XML, men nyckelordet här är asynkron. Asynkron hänvisar till det faktum att dessa förfrågningar uppträder i bakgrunden och inte stör användarens webbläsarupplevelse. Du har nog aldrig märkt det tidigare, men om en webbplats uppdaterar sig dynamiskt finns det en bra chans att det är AJAX som använder det.

Före AJAX måste någon form av interaktion med en server, om den hämtar ny data eller skickar information tillbaka från användaren, ha gjort med en ny sidladdning och omdirigeringar.

Idag ska vi titta på en tredjepartsservice, 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 man manipulerar det.

För vidare läsning skrev jag en annan handledning för ett tag sedan om hantering av AJAX i WordPress för ett formulär för inlämning av ett formulär En handledning om att använda AJAX I WordPress En handledning om att använda AJAX I WordPress AJAX är en anmärkningsvärd webbteknologi som flyttat oss bortom det enkla “klicka länk, gå till en annan sida” strukturen på Internet 1.0. Det gör det möjligt för webbplatser att dynamiskt hämta och visa innehåll utan användaren ... Läs mer, så du kanske vill checka ut det också; Det handlar om att skriva en egen PHP-hanterare och integrera det i “officiell” WordPress AJAX-processen.

AJAX-metoden

Här är det grundläggande formatet för en AJAX-förfrågan:

$ .ajax (typ: "GET eller POST", url: "API eller din PHP-hanteringsadress", datatyp: "JSON", // beroende på vilken typ av data du vill ha tillbaka, men JSON är den vanligaste data: // en uppsättning nyckel: "värde" par, framgång: funktion (data) // hantera en lyckad dataåterkomst, fel: funktion (meddelande) // hantera felet);

Det ser ganska komplicerat först - inte med hjälp av bristen på indryckning från den här koden plugin - men du kommer se hur lätt det är när du kommer till ett verkligt världsexempel.

Flickr API AJAX

I det här exemplet ska vi ta taggarna i samband med det aktuella WordPress-inlägget och hämta några bilder som ska läggas till i slutet av artikeln. Det finns ett 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å JSON-data tillbaka, känner jag mig att det är viktigare att lära sig den faktiska AJAX-metoden, så det är så vi ska göra det.

Först en upp single.php och vi försöker att echo en enkel kommaseparad lista över de aktuella posterna. Vanligtvis skulle du använda the_tags () att göra det här, men det är inte bra eftersom vi så småningom vill lagra dem som en variabel, medan the_tags () echo dem rakt ut förformaterad. I stället använder vi get_the_tags ():

namn.","; ?>

Det här fungerar snyggt, så vi skickar den här inuti en AJAX-förfrågan till Flickr API-webbadressen enligt följande (Obs! Det här är en skärmdump - för att behålla indryckning finns koden tillgänglig på denna PasteBin).

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

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

$ .each (data.items, function (i, item) om (i == 3) returnerar false; // stopp när vi har 3 $ ("# flickr")."););

Och där har vi det. vi är bifogande 3 objekt från det returnerade JSON-objektet (datan är noll indexerad, så om vi kommer till punkt 3, är vi faktiskt på fjärde objektet. Förvirrande, jag vet. På 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 extraherar bara en länk och IMG-referens. Om du är intresserad av att veta vad mer är tillbaka, släng bara en console.log (post) där inne.

Här är resultaten på min testwebbplats och hela koden på denna PasteBin. Observera att resultaten returneras är i princip skräp - mitt inlägg inkluderade taggen DIY för en walk-in kycklingkörning, och Flickr har gett mig DIY stickning. Trevlig. Det här är självklart ett av de hinder du står inför när du arbetar med ett API och gör saker automatiskt. Du kan antingen ta om dina inlägg (ett betydande åtagande), ändra begäran att be om “Allt” taggar istället för “några” (sannolikt inte returnera någonting i det här fallet) eller komma med ett nytt anpassat fält som du skulle ange ett målriktat sökord för att använda med API: n (förmodligen det enklaste).

SEO överväganden

Detta är inte en viktig punkt, men eftersom du arbetar med att utveckla webbplatser bör det nämnas: sökmotorerna indexerar inte innehåll som inte existerar vid sidladdning, till exempel allt som görs via AJAX. Det absoluta värsta du kan göra är att helt AJAXifiera din blogg så att hemsidan bara var en iframe-liknande behållare för allt innehåll som laddas in dynamiskt. Använd AJAX klokt, till förbättra sidinnehållet, inte som en ersättning. Eller möta svåra konsekvenser.

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

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

Utforska mer om: jQuery, programmering, webbutveckling.