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 sökordet här är asynkront . 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 använder AJAX att göra 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 hos API: erna - allt vi behöver veta är en API-URL, vilken typ av data vi ska komma 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 den enkla "klicka länken", gå till en annan sida "struktur av 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 den "officiella" WordPress AJAX-processen.
AJAX-metoden
Här är det grundläggande formatet för en AJAX-förfrågan:
$.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 } }); Det ser ganska komplicerat i början - inte med hjälp av bristen på indryckning från den här koden, men du ser 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 () istället för 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. Typiskt skulle du använda the_tags () för att göra detta, men det är inte bra eftersom vi så småningom vill lagra dem som en variabel, medan the_tags () ekar dem rakt ut förformaterad. I stället använder vi get_the_tags ():
name.", "; }?> Det här fungerar snyggt, så vi skickar in 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 är koden tillgänglig på denna PasteBin).
Vid denna punkt 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 succéparametern för AJAX-samtalet för att iterera över de objekt som returneras.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); Och där har vi det. Vi lägger till 3 objekt från det returnerade JSON-objektet (datan är noll indexerad, så om vi går till punkt 3, är vi faktiskt på fjärde objektet. Förvirrande, jag vet. Vid den tiden använder vi returfalska för att hoppa ut av varje () iteratorn). 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 som återkommer, släng bara en console.log (item) där inne.
Här är resultaten på min testwebbplats och hela koden på denna PasteBin. Observera att de återkomna resultaten är i grunden skräp - mitt inlägg inkluderade taggen DIY för en walk-in chicken run, 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 förfrågan om att fråga om "alla" taggar istället för "någon" (sannolikt att inget returneras i det här fallet) eller skapa ett nytt anpassat fält som du skulle ange ett riktat sökord som ska användas med API (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, för att 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 " public 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.